How to install vuetify 2.0 beta to the new vue cli project?

Question

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.

Solution 1

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

Solution 2

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.

Comments

[Benny K]

this should be the right answer, as this works for beta.2 without any extra hassle... should be in docs also :)

[Kick Buttowski]

how can I use yarn to remove node-sass and add sass and sass-loader?

[Traxo]

@KickButtowski try yarn remove node-sass, and yarn add sass