Vuetify 2.0.0-beta.0 has just been released and I want to try it out and play around in a new vue test application. But I get errors when I try to install it in a fresh new project. Here are the steps I've taken.
I use @vue/cli v3.8.2
to create a new project with default settings:
vue create testapp
which gives me successful result:
š Successfully created project testapp.
š Get started with the following commands:
$ cd testapp
$ npm run serve
Then I add vuetify plugin to the project with default (recommended) preset:
cd testapp
vue add vuetify
which gives me success:
š¦ Installing vue-cli-plugin-vuetify...
+ [email protected]
added 1 package from 1 contributor and audited 23942 packages in 9.235s
found 0 vulnerabilities
ā Successfully installed plugin: vue-cli-plugin-vuetify
? Choose a preset: Default (recommended)
š Invoking generator for vue-cli-plugin-vuetify...
š¦ Installing additional dependencies...
added 11 packages from 49 contributors and audited 23980 packages in 9.252s
found 0 vulnerabilities
ā Running completion hooks...
ā Successfully invoked generator for plugin: vue-cli-plugin-vuetify
Now in package.json
I see vuetify version:
"vuetify": "^1.5.5"
I now update it to the v2.0.0-beta.0
like this:
npm install [email protected]
I get success again:
+ [email protected]
updated 1 package and audited 23980 packages in 10.302s
found 0 vulnerabilities
Now when I try to run it:
npm run serve
I get error:
> [email protected] serve c:\temp\testapp
> vue-cli-service serve
INFO Starting development server...
98% after emitting CopyPlugin
ERROR Failed to compile with 99 errors 6:17:04 PM
This dependency was not found:
* vuetify/src/stylus/app.styl in ./src/plugins/vuetify.js
To install it, you can run: npm install --save vuetify/src/stylus/app.styl
Failed to resolve loader: sass-loader
You may need to install it.
If I install sass-loader like this:
npm i -D node-sass sass-loader
I get success. Then I try to run it again:
npm run serve
Now again I get different error:
ERROR Failed to compile with 1 errors 6:27:06 PM
This dependency was not found:
* vuetify/src/stylus/app.styl in ./src/plugins/vuetify.js
To install it, you can run: npm install --save vuetify/src/stylus/app.styl
I am stuck here as I don't know how to fix this error. npm install --save vuetify/src/stylus/app.styl
obviously don't work. Also I couldn't make it work neither by following official vuetify page for this beta release.
On the left side of your screen, click on Plugins. Once there, search for Vuetify in the input field and install the plugin.
Just try the command npm install vuetify --save . It will update with latest one.
Save this answer. Show activity on this post. Vuetify is not currently compatible with Vue 3. Given the number of breaking changes and implementation differences in Vue 3, the entire library needs to be rewritten.
If you are looking for a specific version of Vue2 you can run the following command with npm: npm install [email protected] or if you want the latest, simply npm install vue . Save this answer.
Don't include .styl files, it's deprecated basically.
Remove node-sass
and install sass
$ npm uninstall node-sass
$ npm i -D sass
And modify your plugins/vuetify.js
file
import Vue from 'vue'
import Vuetify from 'vuetify'
Vue.use(Vuetify)
export default new Vuetify({ theme: { ... } })
And main.js
new Vue({
...
vuetify, // we add vuetify here
render: (h) => h(App),
}).$mount('#app')
Note theme options changed in v2, dark theme can now be customized, e.g.
theme: {
dark: true,
themes: {
light: {
primary: '#42a5f5',
//...
},
dark: {
primary: '#2196F3.
},
},
},
options: {
customProperties: true,
},
icons: {
iconfont: 'md', // default is 'mdi'
}
More in docs, and new style docs with regards to sass.
After creating a new fresh vue project follow those commands:
# yarn
$ yarn add https://github.com/vuetifyjs/vue-cli-plugin-vuetify.git#dev -D
$ vue invoke vuetify
# npm
$ npm install https://github.com/vuetifyjs/vue-cli-plugin-vuetify.git#dev --save-dev
$ vue invoke vuetify
I think it will even work with the project you have already created. Just try the commands above.
For more check v2.0.0-beta.0 release
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With