Integrating Vuetify into a Vue CLI app using webpack

Question

I have a Vue CLI app using Webpack that I am integrating Vuetify into. For some reason I can't get the Vuetify components to load properly.

I receive the following warnings:

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

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

JS File (newtab.js):

import Vue from 'vue';
import Vuetify from '../plugins/vuetify' 
import App from './App';

Vue.use(Vuetify);

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

Vuetify Plugin File:

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

Vue.use(Vuetify);
export default new Vuetify({});

Vue File (App.vue):

<template>
    <v-app id="inspire">
      <v-alert type="success">
          I'm a success alert. {{ message }}
      </v-alert>
    </v-app>
</template>

<script>
//import { VApp, VAlert } from 'vuetify/lib' 

export default {
  data () {
    return {
      message: "Additional message"
    }
  }
}
</script>

<style scoped>
    p { font-size: 20px; }
</style>

I tried using vue-loader to dynamically import the components, making sure that the vue-cli-plugin-vuetify and vue-loader packages were up to date.

├── vue-cli-plugin-vuetify@2.0.5 
└── vue-loader@15.9.1

I also tried manually importing the components, both in the main JS file, and into the Vue file itself:

import Vue from 'vue';
import Vuetify, {
    VApp, VAlert
} from 'vuetify/lib';
import 'vuetify/dist/vuetify.min.css';

Vue.use(Vuetify, {
    components: {
        VApp, VAlert
    }
});
export default new Vuetify({});

Answer 1

To install Vuetify into a Webpack project you need to add a few dependencies:

$ npm install vuetify

Once installed, locate your webpack.config.js file and copy the snippet below into the rules array. If you have an existing sass rule configured, you may need to apply some or all of the changes below. If you are you looking to utilize the vuetify-loader for treeshaking, ensure that you are on version >=4 of Webpack.

// webpack.config.js

module.exports = {
  rules: [
    {
      test: /\.s(c|a)ss$/,
      use: [
        'vue-style-loader',
        'css-loader',
        {
          loader: 'sass-loader',
          // Requires sass-loader@^7.0.0
          options: {
            implementation: require('sass'),
            fiber: require('fibers'),
            indentedSyntax: true // optional
          },
          // Requires sass-loader@^8.0.0
          options: {
            implementation: require('sass'),
            sassOptions: {
              fiber: require('fibers'),
              indentedSyntax: true // optional
            },
          },
        },
      ],
    },
  ],
}

Create a plugin file for Vuetify, src/plugins/vuetify.js with the below content:

// 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)

Now you should be able to use Vuetify components. From https://vuetifyjs.com/en/getting-started/quick-start/