ionic - `slot` attributes are deprecated - eslint-plugin-vue

Question

I am getting following error in VS Code:

[vue/no-deprecated-slot-attribute]
`slot` attributes are deprecated. eslint-plugin-vue

I have these two plugin installed in .eslintrc.js

  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended'
  ],

And this in rules:

'vue/no-deprecated-slot-attribute': 'off',

What should be done in order to avoid this issue?

Answer 1

This slot actually refers to webcomponent slots;
https://github.com/ionic-team/ionic-framework/issues/22236

The slots Ionic Framework uses are not the same as Vue 2 slots. The slots we use are Web Component slots and are valid usage: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots.

Developers should be using the Web Component slots to position elements as per our docs: https://ionicframework.com/docs/api/range#usage

Check to ensure your eslint.js has the following rule:

  rules: {
    'vue/no-deprecated-slot-attribute': 'off',
  }

Next open .vscode/settings.json and add the following:

  "vetur.validation.template": false,

Answer 2

Warning about slots

The vue/no-deprecated-slot-attribute warning is really about the slot attribute in Vue templates, which were replaced with v-slot. However, since Ionic Web components use the native slot property, you can safely ignore the warning, or disable it:

// .eslintrc.js
module.exports = {
  rules: {
    'vue/no-deprecated-slot-attribute': 'off',
  }
}

If using VS Code with Vetur, disable Vetur's template validation, which ignores .eslintrc.js. The Vetur docs recommend using the ESLint Plugin to configure your own ESLint rules:

If you want to config ESLint rules, do the following:

• Turn off Vetur's template validation with vetur.validation.template: false
• Make sure you have the ESLint plugin. The errors will come from ESLint plugin, not Vetur.
• yarn add -D eslint eslint-plugin-vue in your workspace root
• Set ESLint rules in .eslintrc.

Unused fixed

Regarding the 'fixed' is defined but never used error you commented, your <script> section in the SFC likely has an unused variable named fixed. Simply remove that variable to resolve the error.

Answer 3

you can try add this on .vscode/settings.json

{
    "vetur.validation.template": false
}