bugfix> javascript > 投稿

私はnuxtjsを初めて使用するので、npmパッケージを追加しようとすると、機能しません。これらは試用版です。

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']
  }

これらのエラーが表示されます

[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>

回答 2 件
  • 次のように、star-rating.jsに登録する必要があります。

    import Vue from 'vue';
    import StarsRatings from 'vue-star-rating';
    Vue.component('StarsRatings', StarsRatings);
    
    

  • ねえ、私は同じ問題を抱えていました、そしてここに答えがあります:

    1.プラグイン(star-rating.js)内:

    import Vue from 'vue'
    import VueStarRating from 'vue-star-rating'
    Vue.component('star-rating', VueStarRating);
    
    

    2. nuxt.config.jsの「mode: 'client'」を忘れないでください:

    {
      src: '~/plugins/star-raing.js', mode: 'client'
     },
    
    

    3.最後に.vueファイルで簡単に使用できます:

    <star-rating v-model="rating">
    </star-rating>
    
    

    ps:これはvuejs2xで機能しています

    ちなみに、評価小道具を取得したい場合は、これに簡単にアクセスできます:

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

あなたの答え