CODEWITHSUNDEEP
javascripttypescriptvue.jsvuetify.jsvue-cli-3
TKD21
TKD21

Reputation: 283

Vuetify stopped working when included in a Typescript-enabled Vue.js project

I have recently tried to create a simple app that combines Vue.js, Vuetify.js and Typescript. However, even though at first Vuetify seemed to work when combined with Typescript, upon my most recent app compilation, all I get are error messages of the type "Unknown custom component".

Here is the configuration for my vuetify.js file: 

import '@mdi/font/css/materialdesignicons.css'
import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

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

And here is the config for my main.ts file: 

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import './registerServiceWorker';
import vuetify from '@/plugins/vuetify.js';

Vue.config.productionTip = false;

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

I installed Vuetify using npm install vuetify and not through the Vue CLI.

Upvotes: 2

Views: 5956

Answers (2)

Tushar Roy
Tushar Roy

Reputation: 1208

Those who are still find trouble with Vuetify + Vue + Typescript.

vue create project-name
cd project-name
vue add vuetify

when your vuetify added, you will see under plugins folder, a file name vuetify.ts just created where you can custom your vuetify theme and also vuetify will be added to main.ts . Then you will able to find 

node_module/vuetify/types

This file need to add in tsconfig.json

"types": [
  ...
  "vuetify"
],

// then add this
"typeRoots": [
  "./node_modules/@types",
  "./node_modules/vuetify/types"
]

Enjoy !!

Upvotes: 3

Mark Z.
Mark Z.

Reputation: 2447

It could be any of a million things, but

1) confirm you've properly setup VuetifyLoaderPlugin in webpack.config.js, as that is what is intended for when you import Vuetify from 'vuetify/lib', otherwise you would do the full imports:

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

and 2) try this instead of your last new Vue line:

let vue = new Vue({
    el: '#app',
    router: router,
    vuetify: vuetify,
    render: (h) => h(App)
});

3) UPDATE as per your comment: you also need to make sure you have the right packages for the style to get loaded

npm install sass sass-loader fibers deepmerge -D

Then in webpack.config.js, add something like this to the rules:

            { test: /\.s(c|a)ss$/, use: [isDevBuild ? "style-loader" : MiniCssExtractPlugin.loader, "css-loader", {
                loader: 'sass-loader',
                // Requires sass-loader@^8.0.0
                options: {
                    implementation: require('sass'),
                    sassOptions: {
                        fiber: require('fibers'),
                        indentedSyntax: true // optional
                    }
                }}
            ]},

or if using vue-style-loader (this is the example from the vuetify quick start, which basically I think you should take a look at in full to make sure you're not missing any other setup steps):

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

Upvotes: 1

Related Questions