Vue, Vuetify is not properly initialized

Question

I have setup Vuetify on my Vue webpack application.

My project is setup with vue init webpack my-project running Vue 2.5.2

Answer 1

Patrice has one of my preferred finely tailored answers, depending on configuration, this may be what you need:

webpack | vue 2.5+ | vuetify 2.1+

In your main.js/App.js

import Vue from 'vue'
import router from './router'
import vuetify from './plugins/vuetify' // path to vuetify export

//Vue.component('example-component', require('./components/ExampleComponent.vue').default);

const app = new Vue({
el: '#app',
router,
vuetify,
});

In your plugins/vuetify.js

// resources/js/plugins/vuetify.js

import 'material-design-icons-iconfont/dist/material-design-icons.css' // Ensure you are using css-loader

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

Vue.use(Vuetify)

const opts = {}

export default new Vuetify({
  icons: {
    iconfont: 'md', // default - only for display purposes
  },
})

In your EaxmpleComponent.vue and all other vue files: Wrap all vue components in v-app and template tag like: