Does it work on nuxt?
Closed this issue ยท 6 comments
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!
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
- ways to import client-side plugin
https://nuxtjs.org/guide/plugins/#client-side-only - wrap html components (depend of nuxt version)
https://nuxtjs.org/api/components-client-only/
@nonlinearcom hope it helps
You can use mode attribute instead of <client-only>
tag
plugins: [
{ src: '~/plugins/name-of-plugin-file.js', mode: 'client' }
],
You can use mode attribute instead of
<client-only>
tagplugins: [ { 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
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.
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).
The new update is insane @Aminerman. Fantastic work. Hats off!