CODEWITHSUNDEEP
vue.jseslintvuejs3
kusumoto_teruya
kusumoto_teruya

Reputation: 2475

eslint-plugin-vue vue/valid-v-model appears to warn using the rules in Vue.js 2

I'm using Vue.js 3.
The following eslint-plugin-vue warning appears to warn using the rules in Vue.js 2.
<MyComponent v-model:propName="foo"/> This writing style is supported in Vue.js 3.
How to make it compatible with Vue.js 3?

<MyInputComponent
  v-model:value="state.value"
/>
// [vue/valid-v-model] 'v-model' directives require no argument. eslint-plugin-vue [7, 9]

.eslintrc.js

module.exports = {
  extends: [
    'plugin:vue/vue3-recommended',
  ]
}

package.json

{
  "name": "ProjectName",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "typescript": "^4.1.2",
    "vue": "^3.0.2"
  },
  "devDependencies": {
    "@vue/compiler-sfc": "^3.0.2",
    "eslint-plugin-vue": "^7.1.0",
    "vite": "^1.0.0-rc.8"
  }
}

Upvotes: 5

Views: 8354

Answers (2)

Michael Currin
Michael Currin

Reputation: 680

This worked for me - ignore the rule in .eslintrc.js:

  rules: {
    "vue/no-v-model-argument": "off",
  },

Upvotes: 1

JackChouMine
JackChouMine

Reputation: 1192

Add these deps:

"@babel/core": "^7.12.10",
"@babel/eslint-parser": "^7.12.1",
"eslint": "^7.18.0",

install them:

npm i -D eslint @babel/core @babel/eslint-parser

change eslint.js

parser: '@babel/eslint-parser',

Upvotes: -1

Related Questions