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

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,

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.

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

{
    "vetur.validation.template": false
}

You are trying to use old syntax which is really deprecated. Try to use named slots syntax.

So, I guess instead of

<ion-refresher slot="fixed">...</ion-refresher>

you should use

 <ion-refresher>
  <slot name="fixed">...</slot>
 </ion-refresher>

Just use // eslint-disable-next-line OR eslint-disable-line to disable eslint on the next line containing the slot tag and move on with the code, if you wish to continue with that same code

OR

you can use <template v-slot> for using a unnamed slot tag and <template v-slot="name> to use named slot tag.

here is the link to the doc Link,