Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 927
mlst Avatar asked May 29 '19 16:05

mlst


People also ask

How do I add Vuetify to my Vue 2?

On the left side of your screen, click on Plugins. Once there, search for Vuetify in the input field and install the plugin.

How do I change my Vuetify version?

Just try the command npm install vuetify --save . It will update with latest one.

Does Vuetify 2 work with vue3?

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.

How do I install Vue 2 project?

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.


2 Answers

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.

like image 143
Traxo Avatar answered Nov 14 '22 20:11

Traxo


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

like image 34
Roland Avatar answered Nov 14 '22 20:11

Roland