In my nuxt.js project I am using a component from a Vue library called vue-tailwind.
I import the library as a plugin in this way (as advised by the author):
/plugins/vue-tailwind.js
import Vue from 'vue'
import VueTailwind from 'vue-tailwind'
Vue.use(VueTailwind)
/nuxt.config.js
plugins: ['~plugins/vue-tailwind']
and the component works perfectly in development.
My problem is that the component is not rendered when I serve the app generated with
nuxt generate
I already tried to load the plugin this way:
{ src: '~plugins/vue-tailwind', mode: 'client' }
and also tried to put the component between client-only tag
<client-only>
<t-datepicker
v-model="date"
:max-date="today"
placeholder="Select a date"
date-format="Y-m-d"
user-format="d-M-Y"
/>
</client-only>
After several attempt, I understood that the component has to be registered in the plugin. Vue.use does not work in generated code.
My final working code is the following:
/plugins/vue-tailwind.js
import Vue from 'vue'
import { TDatepicker } from 'vue-tailwind/dist/components';
Vue.component('t-datepicker', TDatepicker)
I've got the same problem and that could be fixed by setting ssr: false in the nuxt.config.js
export default {
ssr: false,
target: 'static'
}
Related
I have a nuxt app which uses the vue-plyr plugin to play videos. I've registered the plugin like this
import Vue from 'vue'
import VuePlyr from 'vue-plyr/dist/vue-plyr.ssr.js'
import 'vue-plyr/dist/vue-plyr.css'
Vue.use(VuePlyr, {
plyr: {}
})
and added it to nuxt.config.js
plugins: [
{
src: '~/plugins/plyr.client.js',
mode: 'client'
}
],
but when I import it inside a component
import VuePlyr from 'vue-plyr'
I always get an error saying
document is not defined
The component itself is also wrapped in a <client-only></client-only> tag.
Am i missing something with my implementation?
Is there any other way to import the plugin
I'm using node-14.17.6 and nuxt-2.15.6
You don't need plyr.client.js but plyr.js if you already have mode: 'client'.
Also, why do you import it again if you have it as a plugin? It is globally available so you could start using it directly.
<template>
<client-only>
<vue-plyr>
<div class="plyr__video-embed">
<iframe
src="https://www.youtube.com/embed/bTqVqk7FSmY?amp;iv_load_policy=3&modestbranding=1&playsinline=1&showinfo=0&rel=0&enablejsapi=1"
allowfullscreen
allowtransparency
allow="autoplay"
></iframe>
</div>
</vue-plyr>
</client-only>
</template>
Depending on the code you're using below, you may also check that this is not being called server side as shown here: https://stackoverflow.com/a/67751550/8816585
Updated with a more explicit example.
`import VueEllipseProgress from 'vue-ellipse-progress';
export default {
components: {
VueEllipseProgress
}
}`
document is not defined error when everytime this is running
i also checked to remove server side rendering and same also
Here an example how you can include vue-ellipse-progress globally to your project.
plugins/vue-ellipse-progress.js Create plugin.
import Vue from 'vue';
import VueEllipseProgress from "vue-ellipse-progress";
Vue.use(VueEllipseProgress);
nuxt.config.js Include plugin in config.
plugins: [
{
src: '#/plugins/vue-ellipse-progress.js',
mode: 'client'
},
],
your-component.vue Use component.
<client-only>
<vue-ellipse-progress :progress="50" />
</client-only>
The official guide for nuxt plugins https://nuxtjs.org/docs/2.x/directory-structure/plugins
I am trying to use vue-dragscroll with nuxtjs.
I am new to nuxtjs and I have been using vue-dragscroll before with regular vuejs.
I have been shown an error Window is not defined, I've looked at the vue-dragscroll documentation and I still couldn't find the solution.
This is how I implemented the vue-dragscroll
<template lang="pug">
div
CountriesSearch.mb-2
div#countryList(v-for="country in countries" :key="country.country" v-dragscroll)
CountryItem(:country="country" v-if="country.Country")
</template>
<script>
import { dragscroll } from 'vue-dragscroll'
export default {
directives: {
dragscroll
},
You will have to declare it as a directive within a plugin file.
// plugins/vue-dragscroll.js
import Vue from 'vue'
import { dragscroll } from 'vue-dragscroll'
Vue.directive('dragscroll', dragscroll)
Then, in your nuxt.config.js add that plugin file to your plugins: [] array:
{ src: '#/plugins/vue-dragscroll.js', ssr: false }
This directive leverages the window which is unavailable during SSR, hence your error.
I have created a new project using vue-cli 'vue init webpack-simple my-app' command. In that fresh installation copy, I'm trying to import vue-router in the App.vue component that was created by default. But it is giving me an error: 'Uncaught ReferenceError: Vue is not defined'. If I import the vue again in App.vue, then the app is working fine. But I already imported the vue in main.js, so why do I need to import it again in App.js? Is there any way I can use the imported vue from main.js? Here is my code:
main.js:
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})
App.vue:
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
import Vue from 'vue'; //**why I need to import it again? I already imported it in main.js
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import QuestionOne from './components/QuestionOneTemplate';
const routes = [
{ path: '/', name: 'QuestionOne', component: QuestionOne },
];
const router = new VueRouter({
routes
});
window.router = router;
export default {
router,
name: 'app',
data () {
return {
}
}
}
</script>
<style lang="scss">
</style>
Is there any way i can use the imported vue from main.js?
No, you need to import it in every file that uses Vue. The imports/requires are how things get hooked up. Rest assured, each import will be the same singleton instance.
You can get to the router from a Vue component's javascript using this.$router and this.$route without an import, or inside a template, using simply $router and $route
Not recommended, but you can assign Vue to a global in main.js, and use the global without importing.
main.js
import Vue from 'vue';
global.MyVue = Vue
App.vue
import VueRouter from 'vue-router';
MyVue.use(VueRouter);
Why
This is how ES6 links things up. Consider it wiring. If there were more than 1 Vue lib available, how would the linker know which to use? What if another library defined a variable or function called Vue? Perhaps a lib uses its own internal Vue for an event bus or other feature.
Other Thoughts
The explicit import also makes IDE autocompletion and syntax highlighting work better. Some IDEs can add the imports automatically, and that makes life easier.
did you try this ?
import Vue from 'vue'
import VueRouter from 'vue-router'
then use
Vue.use(VueRouter)
because the error message means you need to import vue first to use vue-router
You did the right thing and you don't have to worry about importing Vue in multiple files. When you are shipping your application and build it for production, you will have only one "Vue import". If you take a look at dist folder and your bundled .js files you will notice that Vue is imported only once.
I'm a new vuejs developer. I have study vueje for a while and now I decided to develop a project using vuejs.
So I learn about nuxtjs which is server side rendering. everything goes well. I can use bootstrap4 with my project.
Now I would like to use flickity carousel https://flickity.metafizzy.co on my project and I found that there is a vuejs package on https://github.com/drewjbartlett/vue-flickity
I follow the instruction how to install this component to my project by
npm install vue-flickity --save
and put on some code
<script>
import Logo from '~/components/Logo.vue'
import Searchbar from '~/components/Searchbar.vue'
import axios from 'axios'
import Flickity from 'vue-flickity';
export default {
data () {
return {
has_location: false,
flickityOptions: {
initialIndex: 3,
prevNextButtons: false,
pageDots: false,
wrapAround: true
}
}
},
components: {
Logo,
Searchbar,
Flickity
}
}
</script>
but it show window is not defined
I have try this with another component like google map, it's show the same error.
Please tell me what wrong did I do and how to install new component to the project.
Thank you.
Nuxt.js use SSR to render your website server side, therefore window object is not accessible on node.js environment.
What you need to do is use the built-in no-ssr component to prevent Nuxt.js to render it on the server side.
You can simply do this:
<no-ssr>
<Flickity :options="...">
<!-- slides -->
</Flickity>
</no-ssr>
UPDATE: If you still get an error at this point, then load Flickity in
a custom Plugin that you will load with ssr disabled
Create a file named plugins/VueFlickity.js
import Vue from 'vue'
import Flickity from 'vue-flickity'
Vue.component('Flickity', Flickity)
Then in your nuxt.config.js your add:
module.exports = {
// ...
plugins: [
{ src: '~/plugins/VueFlickity.js', ssr: false }
]
}
Don't forget to remove the Flickity local component registration:
components: {
Logo,
Searchbar
// Flickity <-- remove this line
}
This was tested and is now fully working.
I fixed it with:
let Flickity = {};
if (process.browser) {
Flickity = require('flickity.js');
}
#rayfranco pointed a great way.:) The thing is that by doing this in that way You're importing this plugin globally, but not as local component which is better for performance.
So You can do it also like this:
let Flickity;
if (process.client) {
Flickity = require('vue-flickity')
}
export default {
components: {
Flickity
}
}
and use this component this way:
Important: <no-ssr>......</no-ssr> is deprecated in Nuxt > 2.9, so use
<client-only>
<Flickity :options="...">
<div class="carousel-cell">1</div>
<div class="carousel-cell">2</div>
<div class="carousel-cell">3</div>
</Flickity>
</client-only>
you can also look into brief example by Josh Deltener
https://deltener.com/blog/common-problems-with-the-nuxt-client-only-component/