npmパッケージをnuxtjsに追加できません[vue-star-rating]

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>

javascript

vue.js

npm

回答 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,
            }
        },

}

あなたの答え

関連記事