Unknown custom element: <v-app> when use vuetify components

Question

I am new for vuejs. I tried to create a calendar app with vue and vuetify, but got tons of error on console as blow photo: I think they are from the same issue which I missed some config for vuetify. However, I tried to use the method I search from Google, like add "import "vuetify/dist/vuetify.min.css";" and "Vue.use(Vuetify);". They are not working well.

This is vuetify.js

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

import "vuetify/dist/vuetify.min.css";

Vue.use(Vuetify);

export default new Vuetify({
  icons: {
    iconfont: "mdi",
  },
});

main.js

import Vue from "vue";
import vuetify from "./plugins/vuetify";
import App from "./App.vue";

Vue.config.productionTip = false;

new Vue({
  vuetify,
  render: (h) => h(App),
}).$mount("#app");

Phoenix Phoenix · Accepted Answer · 2021-03-03T13:16:56

The Vuetify docs explain how to set this up with webpack, which is what it looks like you're using.

src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)

Your main.js is fine.

Alternatively, if you have the Vue CLI installed, then you can simply run:

vue add vuetify

Unknown custom element: <v-app> when use vuetify components

1 Answers