Vuetify doesn't activate its components

Question

[email protected]
[email protected]

I have the following code.

Plugin of Vuetify:

$ cat src/plugins/vuetify.js

import Vue from "vue";
import Vuetify from "vuetify/lib";

Vue.use(Vuetify);

export default new Vuetify({
  theme: {
    dark: false
  }
});

Import and activate it:

$ cat src/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify';

<some irrelevant code and imports reducted>

new Vue({
  vuetify,
  router,
  store,
  render: h => h(App)
}).$mount('#app')

Root App HTML code (irrelevant code reducted):

$ cat src/App.vue

<template lang="pug">
  #app
    component(:is="layout")
      router-view /
</template>

And finally I use it in one of pages:

$ cat src/layouts/PrivateLayout.vue

<template lang="pug">
div
    v-app
        ...
        router-view
</template>

And this is what I see in the console of DevTools:

Unknown custom element: <v-app> - did you register the component correctly?

Does anybody have an idea what happens? I've read already all the similar question (there are tons) but none of the answers helped.

SOLUTION

Thanks to @morphatic the solution was either:

Import every element manually
or install package that imports everything automaticallty: npm install --save vuetify-loader

Second way, obviously will increase the size as you import redundant things. But it's easier.

morphatic morphatic · Accepted Answer · 2020-04-26T08:14:42

This is a sneaky one! Your project structure looks correct to me. The only part that is different from most of the Vuetify apps I've seen is this part:

<template lang="pug">
  #app
    component(:is="layout")
      router-view /
</template>

Even though you appear to have registered all of the Vuetify components globally, when you use dynamic components (<component :is="layout">), my guess is that the build system is doing some sort of lazy loading or late binding which causes <v-app> not to be loaded in time to be recognized. This is mentioned as a special case in the Vuetify docs.

I think there are a couple of things you can try:

Don't load your layout with a dynamic component
Explicitly import VApp to make sure it's there before you need it

I'm sorry I can't be more specific as I haven't solved this particular problem before, but I'm pretty sure that's what's causing it.

Vuetify doesn't activate its components

1 Answers