can't add npm package to nuxt js [vue-star-rating]

user_8871710 0
Viewed 1770

I'm new in nuxt js so when I try to add npm packages it won't work these are trials.

star-raing.js

import Vue from 'vue'
import StarsRatings from 'vue-star-rating'
Vue.use(StarsRatings)

nuxt.config.js

    plugins: [{ src: '~/plugins/star-rating.js', mode: 'client' }],
    build: {
    /*
     ** You can extend webpack config here
     */
    extend(config, ctx) {},
    transpile: ['star-rating']
  }

it shows these errors

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This 
is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or 
missing <tbody>. Bailing hydration and performing full client-side render.


[Vue warn]: Unknown custom element: <stars-ratings> - did you register the component correctly? For         
recursive components, make sure to provide the "name" option.

found in

---> <Deals> at components/Home/Deals.vue
<Home> at pages/index.vue
<Nuxt>
<Default> at layouts/default.vue
<Root>
nuxt.js npm vue.js plugins javascript
2 Answers

I had the same problem and here is the answer:

  1. in your plugin (star-rating.js):
import Vue from 'vue'
import VueStarRating from 'vue-star-rating'
Vue.component('StarRating', VueStarRating)
  1. don't forget mode:'client' in your nuxt.config.js:
{
    src: '~/plugins/star-rating.js', mode: 'client'
},
  1. finally in your .vue file you can simply use :
<star-rating v-model="rating">
</star-rating>

ps: this is working for vuejs 2x

by the way if you want to get rating props you can simply access to it lie this :

export default {
    name:"example",
    data() {
        return {
            rating: 0,
        }
    },    
}
user_147660150

You should register it in your star-rating.js as follows:

import Vue from 'vue';
import StarsRating from 'vue-star-rating';

Vue.component('StarsRating', StarsRating);
user_106288530
Related