Reputation: 283
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
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
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