Aminerman/vue-kinesis

Does it work on nuxt?

Closed this issue · 6 comments

nonlinearcom commented

Hi, is this component compatible with nuxt.js? I'm trying to use it as a plugin but i get this error:

Uncaught TypeError: Cannot read property 'install' of undefined
    at Function.Vue.use (vue.runtime.esm.js?2b0e:5100)
    at eval (parallax.client.js?61cc:4)
    at Module../plugins/parallax.client.js (app.js:662)
    at __webpack_require__ (runtime.js:796)
    ...

Thanks in advance!

kressso commented

Cant find install method to use with Vue.use...

Try this:

plugins/name-of-plugin.client.js

import Vue from 'vue';
import { ParallaxContainer, ParallaxElement } from 'vue-mouse-parallax';

Vue.component('parallax-container', ParallaxContainer);
Vue.component('parallax-element', ParallaxElement);

nuxt.config.js

plugins: [ 'path/name-of-plugin.client.js' ]

.html

<client-only>
    <parallax-container>
        <parallax-element :parallax-strength="10" type="translation" tag="div">
            <h2>Put your content here</h2>
        </parallax-element>
    </parallax-container>
</client-only>

Check links for additional info of different ways of import depending of nuxt version

@nonlinearcom hope it helps

  • 👍1
the94air commented

You can use mode attribute instead of <client-only> tag

plugins: [
    { src: '~/plugins/name-of-plugin-file.js', mode: 'client' }
  ],
kressso commented

You can use mode attribute instead of <client-only> tag

plugins: [
    { src: '~/plugins/name-of-plugin-file.js', mode: 'client' }
  ],

Without <client-only> I get console error for this plugin

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content

And as far mode: 'client' its same like importing plugin-name..client.js

  • 👍1
Aminerman commented

This issue was fixed on the latest version that is now called vue-kinesis. There is a section in the README that explains how to migrate from vue-mouse-parallax to vue-kinesis.

  • 🎉1
the94air commented

Without <client-only> I get console error for this plugin

@kressso correct. It won't work unless you make the parallax components global inside of your plugin file. importing the components inside of your template file the normal way will cause a warn (not an error).

  • 👍1
the94air commented

The new update is insane @Aminerman. Fantastic work. Hats off!

  • ❤️1