VuetifyLoaderPlugin Error No matching rule for vue-loader found

Question

Im trying to install the vuetify but it is giving me this Error:

[VuetifyLoaderPlugin Error] No matching rule for vue-loader found.
Make sure there is at least one root-level rule that uses vue-loader and VuetifyLoaderPlugin is applied after VueLoaderPlugin.

The package.json:

{
 "name": "vueapp",
 "version": "0.1.0",
 "private": true,

"scripts": {

    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

  "dependencies": {

    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "vuetify": "^2.4.0"
  },

  "devDependencies": {

    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0",
    "sass": "~1.32.0",
    "sass-loader": "^10.0.0",
    "vue-cli-plugin-vuetify": "~2.4.1",
    "vuetify-loader": "^1.7.0"
        
  },

  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

I am using Vue version 6.14.13, @vue/cli 4.5.13 and yarn version 1.22.10. I've tried to change the dependencies in package.json but it doesn't seem to work.

There is no Vue version 6.14.13. Your package.json shows Vue 3. — tony19
– tony19, Commented Jun 18, 2021 at 6:05
thank you! i have decided to use Vue 2 instead because I read that there are apparently some problems using vuetify with Vue 3 — istryingtocode
– istryingtocode, Commented Jun 23, 2021 at 9:23

Rehum · Accepted Answer · 2021-10-03 22:58:26Z

5

I faced the same issue. I removed "vuetify-loader": "^1.7.0" from devDependancies and it worked.

answered Oct 3, 2021 at 22:58

Rehum

6148 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Atikah · Accepted Answer · 2022-01-24 03:55:21Z

0

In webpack.mix.js change this :

mix.js('resources/js/app.js', 'public/js').sass('resources/sass/app.scss', 'public/css').sourceMaps();

into this :

mix.js('resources/js/app.js', 'public/js').vue().sass('resources/sass/app.scss', 'public/css').sourceMaps();

answered Jan 24, 2022 at 3:55

Atikah

1

Comments

KaMizuno · Accepted Answer · 2022-02-27 15:17:18Z

0

I also suffered from the same error. However, after a lot of trouble, the best answer is to recreate the foundation of your application with the "yarn create nuxt-app" command. Then overwrite the required source. nuxt.config.js may need to carefully merge the settings.

answered Feb 27, 2022 at 15:17

KaMizuno

1

Collectives™ on Stack Overflow

VuetifyLoaderPlugin Error No matching rule for vue-loader found

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related