global.js
import Vue from 'vue'
// javascript import for when you're importing the css directly in your javascript
import "vue-navigation-bar/dist/vue-navigation-bar.css";
// import the library
import VueNavigationBar from "vue-navigation-bar";
Vue.component("vue-navigation-bar", VueNavigationBar);
nuxt.config.js
plugins: [
{ src: '~/plugins/global.js', ssr: false }
],
Error
window is not defined
I have tried all the possible solutions in nuxtjs documentation still getting same error.
Thanks!
The solution is to wrap it in <client-only>
<template>
<client-only>
<vue-navigation-bar :options="navbarOptions" />
</client-only>
</template>
Related
I have a project in Nuxt.js and I am trying to test it using Vue Test Util which works effectively except on files where I use BootstrapVue custom html elements.
When I run npm test this error displays for every BootsrapVue html element.
console.error
[Vue warn]: Unknown custom element: <b-container> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <Anonymous>
<Root>
How can I prevent this?
You need to setup bootstrap-vue in your Jest enviroment, using a Jest setup file.
Create the setup file:
// #/jest-setup.js
import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue)
Vue.use(IconsPlugin)
Then configure Jest's setupFiles to load it:
// #/jest.config.js
module.exports = {
setupFiles: ['./jest-setup.js'],
}
I struggle to add a plugin in Nuxt.js. I have been looking to the doc and all kind of similar problems, but I got the same error: simpleParallax is not defined.
I tried different approach on all files
nuxt.config.js:
plugins: [
{src: '~/plugins/simple-parallax.js', mode:'client', ssr: false}
],
plugins/simple-parallax.js:
import Vue from 'vue';
import simpleParallax from 'simple-parallax-js';
Vue.use(new simpleParallax);
index.vue:
Export default {
plugins: ['#/plugins/simple-parallax.js'],
mounted() {
var image = document.getElementsByClassName('hero');
new simpleParallax(image, {
scale: 1.8
});
}
}
Error message:
ReferenceError: simpleParallax is not defined.
The best solution I found out so far is to register simpleParallax on the Vue prototype like so in a plugin nuxt file with the name simple-parallax.client.js:
import Vue from 'vue';
import simpleParallax from 'simple-parallax-js';
Vue.prototype.$simpleParallax = simpleParallax;
Also my nuxt.config.js file if anyone would like to verify that as well:
plugins: [
{src: '~/plugins/simple-parallax.client.js', mode: 'client', ssr: false}
],
I then have access to the plugin before instantiation in my case in the mounted life cycle of the primary or root component to grab the desired HTML elements and instantiate their individual parallax with the newly added global method this.$simpleParallax
For example I can then intiate a certain HTML element to have its parallax like so:
const someHTMLElement = document.querySelectorAll('.my-html-element');
const options = {...} // your desired parallax options
new this.$simpleParallax(someHTMLElement, options);
Actually you don't need to use plugin here.
Just import simpleParallax from 'simple-parallax-js' in your component and init it with your image in mounted hook.
index.vue:
import simpleParallax from 'simple-parallax-js'
export default {
...
mounted() {
// make sure this runs on client-side only
if (process.client) {
var image = document.getElementsByClassName('thumbnail')
new simpleParallax(image)
}
},
...
}
And don't forget to remove previously created plugin, it's redundant here.
I am trying to setup nuxtjs app with vue2-editor.if I try navigating to editor page via client navigation its loading but if i visit or refresh(eg.com/editor) page directly .i am getting document not defined error.
I have identified it because vue2 editor does not support ssr but i have disable it in nuxt-config.js for only client side.but error not going away.please share what i am doing wrong?
//plugin.quill-editor.js
import Vue from 'vue'
if (process.client) {
const VueEditor = require('vue2-editor') //tried normal import as wel
Vue.use(VueEditor)
}
//nuxt.config.js
plugins: [
{ src: '#plugins/quill-editor.js', mode: 'client' },
]
let VueEditor
if (process.client) {
VueEditor = require('vue2-editor').VueEditor
}
not doing anything in nuxt config or any plugin.
only import method changed.
its working now but i am still wondering why it is not working when i disable ssr in nuxt -config.js file
I solved this issue by adding
ssr: false
in nuxt.config.js because vue2 doesn't support server-side rendering
Trying to get the Dragabilly Vue plugin to work with my Nuxt app: https://www.npmjs.com/package/vue-draggabilly
I've used the usual approach that has worked with similar plugins but I don't have the depth of knowledge to crack this one. I am adding into my nuxt config file:
plugins: [ { src: '~/plugins/vue-draggabilly.js', ssr: false } ]
That file includes this code:
import Vue from 'vue'
import VueDraggabilly from 'vue-draggabilly'
Vue.use(VueDraggabilly)
However, I get the following error and I'm not able to use:
vue-draggabilly.js:3 Uncaught ReferenceError: exports is not defined
This refers to this line in the plugin:
exports.install = function (Vue, options) { ....
It is a usual vuew plugin package, but I'm not sure how to get it to work with nuxt. Any help very greatly appreciated!
I see a warning:
warning in ./plugins/vue-draggabilly.js
4:8-22 "export 'default' (imported as 'VueDraggabilly') was not found in 'vue-draggabilly'
I don't know the best answer, but this seems to work:
import Vue from 'vue'
import * as VueDraggabilly from 'vue-draggabilly'
Vue.use(VueDraggabilly)
I'm using https://github.com/zhuowenli/vue-clipboards. But when i tried this it doesn't work. I'm new to vue and nuxt js. and there is an error on the console that says [Vue warn]: Failed to resolve directive: clipboard. BTW i have already installed clipboard.
Template
<button v-clipboard='message'>Copy</button>
Script
import VueClipboards from 'vue-clipboards'
export default {
components: { VueClipboards },
data () {
return {
message: 'asdad'
}
}
}
This same issue is mentioned here:
https://github.com/Inndy/vue-clipboard2/issues/4
You can solve it adding the component in the main.js file. By doing that, you are making it global.
https://vuejsfeed.com/blog/copy-texts-to-clipboard-using-vue-clipboard2
Best regards
I got the same error here
Resolved it by
import VueClipboard from 'vue-clipboard2';
Vue.use(VueClipboard);
You have to import Vue & use it
import Vue from 'vue'
import vueClipboards from 'vue-clipboards'
Vue.use(vueClipboards)
...
Don't forget to remove the components: { VueClipboards },
import vueClipboards from 'vue-clipboards'
Vue.use(vueClipboards)
Import it to the main component and it works for me!!
Even before importing it to the current component I removed the "components: { VueClipboards }" but still it was not working. I just imported it to component instead of importing it to the Main.js file.