Nuxtjs error render function or template not defined in component: carousel
Nuxt has a different way to configure and include packages like vue-carousel
in the project
Below are the steps
- Install
vue-carousel
as local dependency
npm install --save vue-carousel
- In nuxt project, under
plugins
directory create a fileplugins/externalVueCarousel.js
and addvue-carousel
as a global component (reference link)
import Vue from 'vue'; import VueCarousel from 'vue-carousel'; Vue.use(VueCarousel);
- In
nuxt.config.js
file , include below code underplugins
plugins: [{ src: '~/plugins/externalVueCarousel.js', ssr: false }],
-
The project is now ready to use
vue-carousel
in pages or components.vue-carousel
is configured with global scope. -
Under pages or components try the examples given in vue-carousel official website
Sample program
Place below code under pages/components and validate the result in-case if you would like to test a program ASAP
<template>
<div class="mycarousel">
<carousel :perPage="1">
<slide>
<span class="label">Slide 1 Content</span>
</slide>
<slide>
<span class="label">Slide 2 Content</span>
</slide>
<slide>
<span class="label">Slide 3 Content</span>
</slide>
</carousel>
</div>
</template>
<style>
body{
background-color: yellow;
}
.mycarousel{
left: 50%;
top: 50%;
position: relative;
width: 700px;
transform: translateX(-50%);
}
.VueCarousel{
display:inline-block;
}
.VueCarousel-slide {
position: relative;
background: #42b983;
color: #fff;
font-family: Arial;
font-size: 24px;
text-align: center;
min-height: 100px;
}
</style>
Referred from https://nuxtjs.org/examples/plugins/
Related videos on Youtube
Geoff
A coder who loves taking coffee, sleeping in the morning but working late at night
Updated on May 28, 2022Comments
-
Geoff almost 2 years
I have installed vue carousel via npm
"dependencies": { "nuxt": "^1.0.0", "vue-carousel": "^0.6.9" },
Now in my nuxt configurations
plugins: [ '~/plugins/vue-carousel' ],
And the vue-carousel.js
import Vue from 'vue'; import VueCarousel from 'vue-carousel'; Vue.use(VueCarousel);
Now in my components am using it as
<template> <div> <carousel> <slide> Slide 1 Content </slide> <slide> Slide 2 Content </slide> </carousel> </div> </template> <script> import Carousel from 'vue-carousel'; import Slide from 'vue-carousel'; export default { components:{ Carousel,Slide } }
Where am i going wrong as am getting an error
render function or template not defined in component: carousel