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

SilasNiewierra · 2021-09-21T04:37:24Z

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/

Install latest Vue Cli: @vue/cli 4.5.13
Choose: Default (Vue 3 Preview) ([Vue 3] babel, eslint)
cd my-app
vue add vuetify
Choose: V3 (alpha)
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.

The text was updated successfully, but these errors were encountered:

DeivisFelipe · 2021-10-01T21:33:11Z

I took the test and it worked for me

Naurotski · 2021-10-10T19:48:32Z

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 · 2021-10-13T19:23:25Z

I have the same problem

LucianHij · 2021-10-14T08:19:58Z

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

KaelWD · 2021-10-14T09:24:47Z

Yes

LucianHij · 2021-10-14T09:31:56Z

@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 · 2021-10-14T09:34:50Z

LucianHij · 2021-10-14T09:47:43Z

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 · 2021-10-14T09:50:13Z

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 · 2021-10-14T10:31:51Z

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 vuejs/vue-cli#6350

reemaalwail · 2022-03-28T23:59:24Z

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/

Install latest Vue Cli: @vue/cli 4.5.13

Choose: Default (Vue 3 Preview) ([Vue 3] babel, eslint)

cd my-app

vue add vuetify

Choose: V3 (alpha)

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 · 2022-04-07T13:28:20Z

This is still an issue, had anyone solved this?

ikhidebright · 2022-04-07T13:40:00Z

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 · 2022-05-11T21:22:44Z

Having the same problem here. Any workaroud ?

harundogan01 · 2022-05-18T08:02:23Z

@ikhidebright This solution is not working for me

lukasz-madon · 2022-06-01T12:52:04Z

try import 'vuetify/dist/vuetify.css'

Logeswaras · 2022-06-02T08:31:30Z

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 · 2022-06-08T02:39:31Z

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

shakaran · 2022-07-12T16:37:02Z

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 · 2022-09-12T08:02:25Z

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 · 2023-01-07T12:54:44Z

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,
})

vuetifyjs/vue-cli-plugins#303

andrew99154 · 2024-07-03T09:46:17Z

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.

KaelWD transferred this issue from vuetifyjs/vuetify Oct 14, 2021

KaelWD added the need reproduction label Oct 14, 2021

KaelWD closed this as completed Oct 14, 2021

Chejin-cheol pushed a commit to Chejin-cheol/ArtisyServiceVue that referenced this issue Sep 25, 2023

vuetify 기본 설정

f937d55

vuetifyjs/vue-cli-plugins#303

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

SilasNiewierra commented Sep 21, 2021

DeivisFelipe commented Oct 1, 2021

Naurotski commented Oct 10, 2021

LucianHij commented Oct 13, 2021

LucianHij commented Oct 14, 2021

KaelWD commented Oct 14, 2021

LucianHij commented Oct 14, 2021 •

edited

Loading

KaelWD commented Oct 14, 2021

LucianHij commented Oct 14, 2021 •

edited

Loading

LucianHij commented Oct 14, 2021 •

edited

Loading

KaelWD commented Oct 14, 2021

reemaalwail commented Mar 28, 2022

Environment

Steps to reproduce

Expected Behavior

Actual Behavior

Reproduction Link

Other comments

ikhidebright commented Apr 7, 2022

ikhidebright commented Apr 7, 2022

guilmarc commented May 11, 2022

harundogan01 commented May 18, 2022

lukasz-madon commented Jun 1, 2022

Logeswaras commented Jun 2, 2022 •

edited

Loading

hamadasyoutarou commented Jun 8, 2022 •

edited

Loading

shakaran commented Jul 12, 2022

swasher commented Sep 12, 2022

kamilzazi commented Jan 7, 2023

andrew99154 commented Jul 3, 2024 •

edited

Loading

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

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

Comments

SilasNiewierra commented Sep 21, 2021

Environment

Steps to reproduce

Expected Behavior

Actual Behavior

Reproduction Link

Other comments

DeivisFelipe commented Oct 1, 2021

Naurotski commented Oct 10, 2021

LucianHij commented Oct 13, 2021

LucianHij commented Oct 14, 2021

KaelWD commented Oct 14, 2021

LucianHij commented Oct 14, 2021 • edited Loading

KaelWD commented Oct 14, 2021

LucianHij commented Oct 14, 2021 • edited Loading

LucianHij commented Oct 14, 2021 • edited Loading

KaelWD commented Oct 14, 2021

reemaalwail commented Mar 28, 2022

Environment

Steps to reproduce

Expected Behavior

Actual Behavior

Reproduction Link

Other comments

ikhidebright commented Apr 7, 2022

ikhidebright commented Apr 7, 2022

guilmarc commented May 11, 2022

harundogan01 commented May 18, 2022

lukasz-madon commented Jun 1, 2022

Logeswaras commented Jun 2, 2022 • edited Loading

hamadasyoutarou commented Jun 8, 2022 • edited Loading

shakaran commented Jul 12, 2022

swasher commented Sep 12, 2022

kamilzazi commented Jan 7, 2023

For me works:

andrew99154 commented Jul 3, 2024 • edited Loading

LucianHij commented Oct 14, 2021 •

edited

Loading

LucianHij commented Oct 14, 2021 •

edited

Loading

LucianHij commented Oct 14, 2021 •

edited

Loading

Logeswaras commented Jun 2, 2022 •

edited

Loading

hamadasyoutarou commented Jun 8, 2022 •

edited

Loading

andrew99154 commented Jul 3, 2024 •

edited

Loading