[Bug Report][3.0.0-alpha.11] * vuetify/styles not found after following Setup Guide (Vue3)

[SilasNiewierra]

Environment

Vuetify Version: 3.0.0-alpha.11 Vue Version: 3.2.12 Browsers: Chrome 93.0.4577.63 OS: Mac OS 10.15.7

Steps to reproduce

Follow this docu: https://next.vuetifyjs.com/en/getting-started/installation/

1. Install latest Vue Cli: @vue/cli 4.5.13
2. Choose: Default (Vue 3 Preview) ([Vue 3] babel, eslint)
3. cd my-app
4. vue add vuetify
5. Choose: V3 (alpha)
6. Replace main.js with

   import 'vuetify/styles'
   import { createApp } from 'vue'
   import { createVuetify } from 'vuetify'
   import App from './App.vue'
   const app = createApp(App)
   const vuetify = createVuetify()
   app.use(vuetify)
   app.mount('#app')

Expected Behavior

Working App with Vuetify Styles

Actual Behavior

After "npm run serve" the following error message appears:

This dependency was not found:
* vuetify/styles in ./src/main.js
To install it, you can run: npm install --save vuetify/styles

Reproduction Link

https://codepen.io/cameron_creative/pen/GREdeqX

Other comments

I followed the default instructions and am still not able to get Vuetify 3 running.

[DeivisFelipe]

I took the test and it worked for me

[Naurotski]

does not work

ERROR Failed to compile with 2 errors 9:14:52 PM

These dependencies were not found:

• @mdi/font/css/materialdesignicons.css in ./src/plugins/vuetify.js
• vuetify/styles in ./src/plugins/vuetify.js

[LucianHij]

I have the same problem

[LucianHij]

@KaelWD why this has the label need reproduction? Is it working for you when you follow the exact steps from the Installation documentation?

[KaelWD]

Yes

[LucianHij]

@KaelWD have you checked the reproduction link? https://codepen.io/cameron_creative/pen/GREdeqX Maybe you can tell us what version of node and vue-cli you are using, because i tried with "everything" and could not make it work.

[KaelWD]

[LucianHij]

These are the first errors after installing step by step from documentation with same versions of node and vue/cli. These errors i could fix by deleting vuetify-loader from package.json.

After that i get this errors, and I fixed them by changing the version in package json to "@vue/cli-service": "~4.5.0".

And after that, i get this error on npm run serve and this i cannot fix anymore. The second error i get on npm install.

[LucianHij]

Oh, the vue version on myside is 4.5.14. I will check if this is the problem.

EDIT: Same problem with 4.5.13

[KaelWD]

This is the same problem we saw in discord then, npm doesn't resolve conflicting versions of webpack well. You need to run #302. If you use typescript there is also https://github.com/vuejs/vue-cli/issues/6350

[reemaalwail]

does not work

ERROR Failed to compile with 2 errors 9:14:52 PM

These dependencies were not found:

• @mdi/font/css/materialdesignicons.css in ./src/plugins/vuetify.js
• vuetify/styles in ./src/plugins/vuetify.js

Environment

Vuetify Version: 3.0.0-alpha.11 Vue Version: 3.2.12 Browsers: Chrome 93.0.4577.63 OS: Mac OS 10.15.7

Steps to reproduce

Follow this docu: https://next.vuetifyjs.com/en/getting-started/installation/

1. Install latest Vue Cli: @vue/cli 4.5.13
2. Choose: Default (Vue 3 Preview) ([Vue 3] babel, eslint)
3. cd my-app
4. vue add vuetify
5. Choose: V3 (alpha)
6. Replace main.js with

import 'vuetify/styles'
import { createApp } from 'vue'
import { createVuetify } from 'vuetify'
import App from './App.vue'
const app = createApp(App)
const vuetify = createVuetify()
app.use(vuetify)
app.mount('#app')

Expected Behavior

Working App with Vuetify Styles

Actual Behavior

After "npm run serve" the following error message appears:

This dependency was not found:
* vuetify/styles in ./src/main.js
To install it, you can run: npm install --save vuetify/styles

Reproduction Link

https://codepen.io/cameron_creative/pen/GREdeqX

Other comments

I followed the default instructions and am still not able to get Vuetify 3 running. same problem ... what the solution now ??

[ikhidebright]

This is still an issue, had anyone solved this?

[ikhidebright]

Okay, was able to get it to work by:

Updating my @vue/cli version (5.0.4) Deleted .vuerc file in C://Users/Administrator

then followed steps in creating vue app with vuetify

[guilmarc]

Having the same problem here. Any workaroud ?

[harundogan01]

@ikhidebright This solution is not working for me

[lukasz-madon]

try import 'vuetify/dist/vuetify.css'

[Logeswaras]

I got also same issue

ERROR Failed to compile with 1 error 2:04:05 pm

This dependency was not found:

• vuetify/styles in ./src/plugins/vuetify.ts

To install it, you can run: npm install --save vuetify/styles Issues checking in progress... No issues found.

`import "@mdi/font/css/materialdesignicons.css"; import "vuetify/styles";

// Vuetify import { createVuetify } from "vuetify";

export default createVuetify();`

[hamadasyoutarou]

I tried import "vuetify/lib/styles/main.css"; and worked it. But this is not cool. What should I do for the best?

[shakaran]

I run:

vue upgrade

it upgrade this:

  Name                    Installed       Wanted          Latest          Command to upgrade
  @vue/cli-service        4.5.19          4.5.19          5.0.8           vue upgrade @vue/cli-service
  @vue/cli-plugin-babel   4.5.19          4.5.19          5.0.8           vue upgrade @vue/cli-plugin-babel
  @vue/cli-plugin-eslint  4.5.19          4.5.19          5.0.8           vue upgrade @vue/cli-plugin-eslint

Then it works for me

[swasher]

Have a same problem.

main.js

import { createApp } from 'vue'
import App from './App.vue'
import { firebaseApp } from './firebase'
import router from './router'
import { createPinia } from 'pinia'
import { createVuetify } from 'vuetify'
import { loadFonts } from './plugins/webfontloader'
import "vuetify/lib/styles/main.css";
loadFonts()

const Pinia = createPinia()
const app = createApp(App)
const vuetify = createVuetify()

app.use(router)
app.use(vuetify)
app.use(Pinia)
app.use(firebaseApp)

app.mount('#app')

plugins/vuetify.js

import { createApp } from 'vue'
import App from './App.vue'
import { firebaseApp } from './firebase'
import router from './router'
import { createPinia } from 'pinia'
import { createVuetify } from 'vuetify'
import { loadFonts } from './plugins/webfontloader'
import "vuetify/lib/styles/main.css";
loadFonts()

const Pinia = createPinia()
const app = createApp(App)
const vuetify = createVuetify()

app.use(router)
app.use(vuetify)
app.use(Pinia)
app.use(firebaseApp)

app.mount('#app')

vite.config.js

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vuetify from 'vite-plugin-vuetify'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        vuetify({ autoImport: true }),
    ],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    }
})

With import "vuetify/lib/styles/main.css"; styles work.

[kamilzazi]

For me works:

main.js:

import { createApp } from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import { loadFonts } from './plugins/webfontloader'

loadFonts()

createApp(App)
  .use(vuetify)
  .mount('#app')

plugins/vuetify.js

// Styles
import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'

import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

export default createVuetify({
    components,
    directives,
})

[andrew99154]

Refer to the official docs, about "Existing projects" part: https://vuetifyjs.com/zh-Hans/getting-started/installation/#section-73b06709987976ee

Run the command first: npm i vuetify

Then update main.js into following:

import { createApp } from 'vue'

// Vuetify
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

// Components
import App from './App.vue'

const vuetify = createVuetify({
  components,
  directives,
})

createApp(App).use(vuetify).mount('#app')

Just a little reminder, if you are using docker to run the project, try to delete the whole image and recreate again. Docker sometimes could not detect the change of npm packages dependencies.