When vue template components are generated dynamically, “v-rating” is not recognized

Question

I made a Vue template component that draws a "v-rating" on a card. And, registed this component in "App.vue" and write the "CardTest" tag, the "v-rating" was displayed correctly.

card-test.vue

<template>
  <v-card
    tile
    class="grey"
    width=400
    height=400
    >
    <v-card-text>
      {{title}}
    </v-card-text>

    <v-rating
      v-model="rating"
      color="yellow darken-3"
      background-color="grey darken-1"
      empty-icon="$ratingFull"
      half-increments
      hover
      large
    ></v-rating>

  </v-card>
</template>

<script>
  export default {
    data: () => ({
      title: 'default',
      rating: 4.5,
    }),
  }
</script>

App.vue

<template>
  <v-app>
    <v-main>
      <v-layout>
        <CardTest/> <--
      </v-layout>
    </v-main>
  </v-app>
</template>

<script>
import CardTest from './components/card-test';

export default {
  name: 'App',

  components: {
    CardTest, <--
  },

  data: () => ({
  }),
};
</script>

However, when this component is dynamically generated and appended, the card is displayed, but "v-rating" is not displayed and an error is output

App.vue

~~~~~
<script>
import Vue from 'vue'
import CardTest from './components/card-test';

export default {
  name: 'App',

  components: {
    CardTest,
  },

  data: () => ({
  }),

  mounted() {
    var CardComponent = Vue.extend( CardTest );
    var instance = new CardComponent({
      data: {
        title: 'append test',
      },
    });
    instance.$mount();
    document.getElementById('app').appendChild(instance.$el);
  },
};
</script>

error msg

vue.runtime.esm.js:619 [Vue warn]: Error in render: "TypeError: Cannot read property 't' of undefined"    warn @ vue.runtime.esm.js:619

found in

---> <VRating>
       <VCard>
         <Root>

TypeError: Cannot read property 't' of undefined    vue.runtime.esm.js:1888
  at VueComponent.genItem (vuetify.js:22638)
  at vuetify.js:22650
  at Array.map (<anonymous>)
  at Proxy.render (vuetify.js:22649)
  at VueComponent.Vue._render (vue.runtime.esm.js:3548)
  at VueComponent.updateComponent (vue.runtime.esm.js:4066)
  at Watcher.get (vue.runtime.esm.js:4479)
  at new Watcher (vue.runtime.esm.js:4468)
  at mountComponent (vue.runtime.esm.js:4073)
  at VueComponent.push../node_modules/vue/dist/vue.runtime.esm.js.Vue.$mount 
  (vue.runtime.esm.js:8415)

The "v-card", "v-img", "v-btn" in "card-test.vue" are displayed correctly, so vuetify is loaded correctly. However, as far as I can confirm, "v-rating" and "v-icon" are not recognized in dynamically generated templates.

Is there something wrong with the way my component is registered? Or issue of vuetify?

Please give me some advice.

my environment

"devDependencies": {
  "@vue/cli-plugin-babel": "~4.5.0",
  "@vue/cli-plugin-eslint": "~4.5.0",
  "@vue/cli-service": "~4.5.0",
  "babel-eslint": "^10.1.0",
  "electron": "^11.0.0",
  "electron-devtools-installer": "^3.1.0",
  "eslint": "^6.7.2",
  "eslint-plugin-vue": "^6.2.2",
  "node-sass": "^5.0.0",
  "sass-loader": "^10.1.1",
  "vue-cli-plugin-electron-builder": "~2.0.0-rc.6",
  "vue-cli-plugin-vuetify": "~2.1.0",
  "vue-template-compiler": "^2.6.11"
},

Hi, Please have a look at this example from vuetify: vuetifyjs.com/en/components/cards/#loading — Yash Maheshwari

tony19 tony19 · Accepted Answer · 2021-02-22T16:16:55

It seems $vuetify is not defined on the dynamically generated component. A workaround is to set it before mounting:

instance.$vuetify = this.$vuetify;
instance.$mount();

demo

When vue template components are generated dynamically, “v-rating” is not recognized

1 Answers