CODEWITHSUNDEEP
javascriptvuejs2nuxt.js
Geoff
Geoff

Reputation: 6639

Nuxtjs error render function or template not defined in component: carousel

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

Upvotes: 2

Views: 11756

Answers (1)

divine
divine

Reputation: 4912

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 file plugins/externalVueCarousel.js and add vue-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 under plugins

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/

Upvotes: 9

Related Questions