bug: ionic vue vscode incorrectly warning about deprecated slots

[Sacrekin]

Bug Report

Ionic version:
[x] 5.x
Ionic Vue version:
0.4.0

Current behavior:
Ionic components rely upon Slot attributes which is deprecated in V3 in favor of the v-slot template directive.

Expected behavior:
Compliance with V3

Steps to reproduce:
Using for example the Ionic-Range, there is no way to position the label using the new v-slot directive

Related code:

In the example below, the "start" label will not show using the V3 v-slot directive; Using the slot attribute for the "end" label does show as expected, albeit using a deprecated approach

        <ion-range min="-200" max="200" color="secondary" v-model="range">
          <template v-slot:start>
            <ion-label>{{range}}</ion-label>
          </template>
          <ion-label slot="end">{{range}}</ion-label>
        </ion-range>

[liamdebeasi]

Thanks for the issue. 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

I will update the Vue docs to note this.

[nathantaal]

@liamdebeasi but how do you suggest we fix this, becuase eslint hardly fails on this, meaning development is not possible. Maybe you can overwrite this error by creating a stylelint for ionic vue?

[liamdebeasi]

What I did to solve this was I disabled the slot check in the .eslintrc.js file for the Ionic Vue starter apps. Here is what the eslint file looks like:

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/typescript/recommended'
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'vue/no-deprecated-slot-attribute': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
  },
  overrides: [
    {
      files: [
        '**/__tests__/*.{j,t}s?(x)',
        '**/tests/unit/**/*.spec.{j,t}s?(x)'
      ],
      env: {
        jest: true
      }
    }
  ]
}

Note the 'vue/no-deprecated-slot-attribute': 'off', line. Let me know if this does not solve the issue.

[Sacrekin]

As it goes, this rule was already included in my current project. And I still get the eslint warning as follows: Used on content inserted into child components to indicate which named slot the content belongs to. API Reference [vue/no-deprecated-slot-attribute] `slot` attributes are deprecated.eslint-plugin-vue

…

________________________________ From: Liam DeBeasi <notifications@github.com> Sent: Friday, October 9, 2020 3:37 PM To: ionic-team/ionic-framework <ionic-framework@noreply.github.com> Cc: Jean-Marie Sacre <jm@sacre.us>; Author <author@noreply.github.com> Subject: Re: [ionic-team/ionic-framework] bug: Slot attributes used in some Ionic components are deprecated in Vue 3 (#22236) What I did to solve this was I disabled the slot check in the .eslintrc.js file for the Ionic Vue starter apps. Here is what the eslint file looks like: module.exports = { root: true, env: { node: true }, 'extends': [ 'plugin:vue/vue3-essential', 'eslint:recommended', '@vue/typescript/recommended' ], parserOptions: { ecmaVersion: 2020 }, rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'vue/no-deprecated-slot-attribute': 'off', '@typescript-eslint/no-explicit-any': 'off', }, overrides: [ { files: [ '**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)' ], env: { jest: true } } ] } Note the 'vue/no-deprecated-slot-attribute': 'off', line. Let me know if this does not solve the issue. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub<#22236 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AHHB6UBM5B5PZCGNHLEDWPDSJ4G2JANCNFSM4SBSRS6Q>.

[Sacrekin]

my-app@0.0.1 C:\Users\Chouchou\ionicTest\my-app +-- @ionic/vue@0.4.0 +-- @ionic/vue-router@0.4.0 +-- @types/jest@24.9.1 +-- @typescript-eslint/eslint-plugin@2.34.0 +-- @typescript-eslint/parser@2.34.0 +-- @vue/cli-plugin-babel@4.5.6 +-- @vue/cli-plugin-e2e-cypress@4.5.6 +-- @vue/cli-plugin-eslint@4.5.6 +-- @vue/cli-plugin-router@4.5.6 +-- @vue/cli-plugin-typescript@4.5.6 +-- @vue/cli-plugin-unit-jest@4.5.6 +-- @vue/cli-service@4.5.6 +-- @vue/compiler-sfc@3.0.0 +-- @vue/eslint-config-typescript@5.1.0 +-- @vue/test-utils@2.0.0-beta.6 +-- core-js@3.6.5 +-- eslint@6.8.0 +-- eslint-plugin-vue@7.0.1 +-- typescript@3.9.7 +-- vue@3.0.0 +-- vue-jest@5.0.0-alpha.4 `-- vue-router@4.0.0-beta.13

…

________________________________ From: Jean-Marie Sacre <jean_marie_sacre@hotmail.com> Sent: Sunday, October 11, 2020 3:48 PM To: ionic-team/ionic-framework <ionic-framework@noreply.github.com>; ionic-team/ionic-framework <reply@reply.github.com> Cc: Jean-Marie Sacre <jm@sacre.us>; Author <author@noreply.github.com> Subject: Re: [ionic-team/ionic-framework] bug: Slot attributes used in some Ionic components are deprecated in Vue 3 (#22236) As it goes, this rule was already included in my current project. And I still get the eslint warning as follows: Used on content inserted into child components to indicate which named slot the content belongs to. API Reference [vue/no-deprecated-slot-attribute] `slot` attributes are deprecated.eslint-plugin-vue

________________________________ From: Liam DeBeasi <notifications@github.com> Sent: Friday, October 9, 2020 3:37 PM To: ionic-team/ionic-framework <ionic-framework@noreply.github.com> Cc: Jean-Marie Sacre <jm@sacre.us>; Author <author@noreply.github.com> Subject: Re: [ionic-team/ionic-framework] bug: Slot attributes used in some Ionic components are deprecated in Vue 3 (#22236) What I did to solve this was I disabled the slot check in the .eslintrc.js file for the Ionic Vue starter apps. Here is what the eslint file looks like: module.exports = { root: true, env: { node: true }, 'extends': [ 'plugin:vue/vue3-essential', 'eslint:recommended', '@vue/typescript/recommended' ], parserOptions: { ecmaVersion: 2020 }, rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'vue/no-deprecated-slot-attribute': 'off', '@typescript-eslint/no-explicit-any': 'off', }, overrides: [ { files: [ '**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)' ], env: { jest: true } } ] } Note the 'vue/no-deprecated-slot-attribute': 'off', line. Let me know if this does not solve the issue. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub<#22236 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AHHB6UBM5B5PZCGNHLEDWPDSJ4G2JANCNFSM4SBSRS6Q>.

[nathantaal]

For me, this doesn't fix it either

[liamdebeasi]

What is the exact error/warning you are getting?

[Sacrekin]

Used on content inserted into child components to indicate which named slot the content belongs to. API Reference [vue/no-deprecated-slot-attribute] `slot` attributes are deprecated.eslint-plugin-vue In VS Code, getting the wiggled red line below the slot. Hovering on it, I get the tip you see above.

…

________________________________ From: Liam DeBeasi <notifications@github.com> Sent: Monday, October 12, 2020 5:57 PM To: ionic-team/ionic-framework <ionic-framework@noreply.github.com> Cc: Jean-Marie Sacre <jm@sacre.us>; Author <author@noreply.github.com> Subject: Re: [ionic-team/ionic-framework] bug: Slot attributes used in some Ionic components are deprecated in Vue 3 (#22236) What is the exact error/warning you are getting? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub<#22236 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AHHB6UGDE6X6M2XTMPFMPR3SKMRNBANCNFSM4SBSRS6Q>.

[liamdebeasi]

@Sacrekin What does your .eslintrc.js file look like? If you disabled "vue/no-deprecated-slot-attribute" it shouldn't give you that message.

[Sacrekin]

module.exports = { root: true, env: { node: true }, 'extends': [ 'plugin:vue/vue3-essential', 'eslint:recommended', '@vue/typescript/recommended' ], parserOptions: { ecmaVersion: 2020 }, rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'vue/no-deprecated-slot-attribute': 'off', '@typescript-eslint/no-explicit-any': 'off', }, overrides: [ { files: [ '**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)' ], env: { jest: true } } ] }

…

________________________________ From: Liam DeBeasi <notifications@github.com> Sent: Monday, October 12, 2020 6:37 PM To: ionic-team/ionic-framework <ionic-framework@noreply.github.com> Cc: Jean-Marie Sacre <jm@sacre.us>; Mention <mention@noreply.github.com> Subject: Re: [ionic-team/ionic-framework] bug: Slot attributes used in some Ionic components are deprecated in Vue 3 (#22236) @Sacrekin<https://github.com/Sacrekin> What does your .eslintrc.js file look like? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#22236 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AHHB6UGC5QRO6QJPWFBFYR3SKMWDBANCNFSM4SBSRS6Q>.

[liamdebeasi]

@Sacrekin Can you reproduce this in a blank Ionic Vue starter app? I am not sure why you are still getting the warning even after disabling it and cannot reproduce this on my end.

[Sacrekin]

Did create a blank ionic starter app & migrated my test boilerplate app (very simple test). Still getting the underline under scope on ion-label on tab 2 view. I have posted the stater app directory on github: https://github.com/Sacrekin/TestIonic4Vue/tree/master/demo

…

________________________________ From: Liam DeBeasi <notifications@github.com> Sent: Wednesday, October 14, 2020 6:40 PM To: ionic-team/ionic-framework <ionic-framework@noreply.github.com> Cc: Jean-Marie Sacre <jm@sacre.us>; Mention <mention@noreply.github.com> Subject: Re: [ionic-team/ionic-framework] bug: Slot attributes used in some Ionic components are deprecated in Vue 3 (#22236) @Sacrekin<https://github.com/Sacrekin> Can you reproduce this in a blank Ionic Vue starter app? I am not sure why you are still getting the warning even after disabling it and cannot reproduce this on my end. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#22236 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AHHB6UFB7OG5WHTFEHNRZA3SKXH6XANCNFSM4SBSRS6Q>.

[liamdebeasi]

Thanks! Is this warning from the VSCode ESLint plugin? I do see that it recognizes slot as a V2 API, but I don't see the warning (granted I don't see the warning even if I remove the 'vue/no-deprecated-slot-attribute': 'off')