CODEWITHSUNDEEP
vue.jsvuetify.js
r3plica
r3plica

Reputation: 13387

Unknown custom element: <v-btn> after installing vuetify

I am not sure why this isn't working. But I have created a file in src/plugins/vuetify.ts which looks like this:

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

Vue.use(Vuetify);

const vuetify = new Vuetify({
  theme: {
    themes: {
      light: {
        primary: "#3f51b5",
        secondary: "#b0bec5",
        anchor: "#8c9eff",
      },
    },
  },
});
  
export default vuetify;

Then in my main.ts I have done this:

import "./registerServiceWorker";

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

import vuetify from "@/plugins/vuetify";

Vue.config.productionTip = false;

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

But when I try to launch my app, even though it compiles, when I navigate to my component I see it states:

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

found in

---> <HelloWorld> at src/components/HelloWorld.vue
       <Home> at src/views/Home.vue
         <App> at src/App.vue
           <Root>

Does anyone know why?

Upvotes: 0

Views: 2264

Answers (2)

r3plica
r3plica

Reputation: 13387

Turns out the plugin was not installed correctly.

Upvotes: 0

Kapcash
Kapcash

Reputation: 6909

I think you're missing the webpack vuetify-loader.

// webpack.config.js

const { VuetifyLoaderPlugin } = require('vuetify-loader')

exports.plugins.push(
  new VuetifyLoaderPlugin()
)

Or you can import vuetify like this if you don't use the custom webpack loader:

// src/plugins/vuetify.js

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

Vue.use(Vuetify);

const vuetify = new Vuetify({});

export default vuetify;

Upvotes: 1

Related Questions