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

javascript vue.js ionic-framework eslint vetur
Hello World picture Hello World · Jan 27, 2021 · Viewed 10.7k times · Source

I am getting following error in VS Code:

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

enter image description here

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

Lee picture Lee · Apr 2, 2021

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,

Related questions

How to disable input conditionally in vue.js

I have an input: <input type="text" id="name" class="form-control" name="name" v-model="form.name" :disabled="validated ? '' : disabled"> and in my Vue.js component, I have: .. .. ready() { this.form.name = this.store.name; this.form.validated = …

Read More
forEach is not a function error with JavaScript array

I'm trying to make a simple loop: const parent = this.el.parentElement console.log(parent.children) parent.children.forEach(child => { console.log(child) }) But I get the following error: VM384:53 Uncaught TypeError: parent.children.forEach is not a function …

Read More
Can you force Vue.js to reload/re-render?

Just a quick question. Can you force Vue.js to reload/recalculate everything? If so, how?

Read More