“[Vue warn]: Unknown custom element: …” Error, when using vuetify UI components with the vue-cli-plugin-vuetify

Question

My project setup is using vue-cli with vue-cli-plugin-vuetify. When i want to use any of the List Components, the browser console throws errors on most of the vuetify elements, like:

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

My guess is that i need to do some extra configuration on the file /plugins/vuetify.js to make the lists work but i don't know how.

My file vuetify.js looks like this:

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

import 'vuetify/src/stylus/app.styl'

Vue.use(Vuetify, {
  iconfont: 'md',
})

main.js:

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

Vue.config.productionTip = false

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

Questions: How can i make all components from vuetify work??

Thanks for your help!

EDIT:

Basically, what i did was creating a new project with vue create projectX and then added vuetify with vue add vuetify. And now i want to be able to use the examples from the vuetify documentation. But copy&pasting the examples results in the described error...

Answer 1

Try updating vuetify with: npm install -S [email protected]

Answer 2

Try import Vuetify from 'vuetify' instead of import Vuetify from 'vuetify/lib'

It'll import all vuetify components and you will be able to use them without any declarations.

Or if you want to stay with A-La-Carte mode, try this one:

import Vue from 'vue'
import Vuetify, {
  VCard,
  VRating,
  VToolbar,
} from 'vuetify/lib'
import { Ripple } from 'vuetify/lib/directives'

Vue.use(Vuetify, {
  components: {
    VCard,
    VRating,
    VToolbar,
  },

where VCard, VRating, etc are just example.

Answer 3

If you're using Vuetify 2.x, you need to export Vuetify object from vuetify.js

vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

export default new Vuetify({
  theme: {
    dark: false // From 2.0 You have to select the theme dark or light here
  },
  icons: {
    iconfont: 'mdi', // default - only for display purposes
  }
})

then import it and use in main.js

main.js

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

Vue.config.productionTip = false

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

Answer 4

This solved this issue for me. Docs at https://vuetifyjs.com/en/getting-started/unit-testing/#testing-efficiency suggest to create an instance pass it to mount.

beforeEach(() => {
  vuetify = new Vuetify()
})

const wrapper = mount(CustomCard, {
  localVue,
  vuetify
})