Ionic-framework: 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 [e-mail]
Sent: Friday, October 9, 2020 3:37 PM
To: ionic-team/ionic-framework [e-mail]
Cc: Jean-Marie Sacre [e-mail]; Author [e-mail]
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 GitHubhttps://github.com/ionic-team/ionic-framework/issues/22236#issuecomment-706185377, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AHHB6UBM5B5PZCGNHLEDWPDSJ4G2JANCNFSM4SBSRS6Q.

[Sacrekin]

[email protected] C:UsersChouchouionicTestmy-app
+-- @ionic/[email protected]
+-- @ionic/[email protected]
+-- @types/[email protected]
+-- @typescript-eslint/[email protected]
+-- @typescript-eslint/[email protected]
+-- @vue/[email protected]
+-- @vue/[email protected]
+-- @vue/[email protected]
+-- @vue/[email protected]
+-- @vue/[email protected]
+-- @vue/[email protected]
+-- @vue/[email protected]
+-- @vue/[email protected]
+-- @vue/[email protected]
+-- @vue/[email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]

---

From: Jean-Marie Sacre [e-mail]
Sent: Sunday, October 11, 2020 3:48 PM
To: ionic-team/ionic-framework [e-mail]; ionic-team/ionic-framework [e-mail]
Cc: Jean-Marie Sacre [e-mail]; Author [e-mail]
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 [e-mail]
Sent: Friday, October 9, 2020 3:37 PM
To: ionic-team/ionic-framework [e-mail]
Cc: Jean-Marie Sacre [e-mail]; Author [e-mail]
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 GitHubhttps://github.com/ionic-team/ionic-framework/issues/22236#issuecomment-706185377, or unsubscribehttps://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 [e-mail]
Sent: Monday, October 12, 2020 5:57 PM
To: ionic-team/ionic-framework [e-mail]
Cc: Jean-Marie Sacre [e-mail]; Author [e-mail]
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 GitHubhttps://github.com/ionic-team/ionic-framework/issues/22236#issuecomment-707204623, or unsubscribehttps://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 [e-mail]
Sent: Monday, October 12, 2020 6:37 PM
To: ionic-team/ionic-framework [e-mail]
Cc: Jean-Marie Sacre [e-mail]; Mention [e-mail]
Subject: Re: [ionic-team/ionic-framework] bug: Slot attributes used in some Ionic components are deprecated in Vue 3 (#22236)

@Sacrekinhttps://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 GitHubhttps://github.com/ionic-team/ionic-framework/issues/22236#issuecomment-707225788, or unsubscribehttps://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 [e-mail]
Sent: Wednesday, October 14, 2020 6:40 PM
To: ionic-team/ionic-framework [e-mail]
Cc: Jean-Marie Sacre [e-mail]; Mention [e-mail]
Subject: Re: [ionic-team/ionic-framework] bug: Slot attributes used in some Ionic components are deprecated in Vue 3 (#22236)

@Sacrekinhttps://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 GitHubhttps://github.com/ionic-team/ionic-framework/issues/22236#issuecomment-708522176, or unsubscribehttps://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')

[Sacrekin]

Yes, it is from the VS Code plugin.

By the way, since we have this exchange, do you think you'll be able to add the global component registration? This point is certainly more important to us than the slot warning, albeit we appreciate the attention to details.

KInd rgds

---

From: Liam DeBeasi [e-mail]
Sent: Thursday, October 15, 2020 3:59 PM
To: ionic-team/ionic-framework [e-mail]
Cc: Jean-Marie Sacre [e-mail]; Mention [e-mail]
Subject: Re: [ionic-team/ionic-framework] bug: Slot attributes used in some Ionic components are deprecated in Vue 3 (#22236)

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')

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHubhttps://github.com/ionic-team/ionic-framework/issues/22236#issuecomment-709344333, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AHHB6UEOV3CGKUMMD32QV4DSK352LANCNFSM4SBSRS6Q.

[liamdebeasi]

Ok thanks -- I do not normally use VS Code, so I will investigate this some more. Regarding global component registration we have https://github.com/ionic-team/ionic-framework/issues/22182 which I see you opened. If we do add it, it won't be right at launch. I still need to look into it some more.

[Sacrekin]

Thanks.

With regards to global registration, I have tested & it works fine. Appreciate the warning but by globally registering the layout & initial page UI components, I can already reduce substantially the registration list in the other views.

A+

---

From: Liam DeBeasi [e-mail]
Sent: Thursday, October 15, 2020 6:32 PM
To: ionic-team/ionic-framework [e-mail]
Cc: Jean-Marie Sacre [e-mail]; Mention [e-mail]
Subject: Re: [ionic-team/ionic-framework] bug: Slot attributes used in some Ionic components are deprecated in Vue 3 (#22236)

Ok thanks -- I do not normally use VS Code, so I will investigate this some more. Regarding global component registration we have #22182https://github.com/ionic-team/ionic-framework/issues/22182 which I see you opened. If we do add it, it won't be right at launch. I still need to look into it some more.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHubhttps://github.com/ionic-team/ionic-framework/issues/22236#issuecomment-709444346, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AHHB6UGVKRYN43NMRGOTAD3SK4P2BANCNFSM4SBSRS6Q.

[Alyssa-Crawford-dmi]

I am also getting errors from the linter about the usage of slots.

[vue/no-unused-vars]
'start' is defined but never used

I am using a new ionic app and copy pasted the icon-items media-items example.
I tried adding "vue/no-unused-vars": "off", to the .eslintrc.js file to see if that would fix it, but no luck

[1beb]

Can verify that this is happening for vsCode using thle vue sidebar template (ionic start myApp sidebar --type vue)

and my .eslint.js:

It's definitely being told to ignore this particular linting error, but seems to ignore being told to ignore. How meta!

[Alyssa-Crawford-dmi]

I created a side menu app since side bar was not an option. Beyond that, with the same configuration I got the same error as you, no-deprecated-slot attribute

[liamdebeasi]

I am going to open this issue back up. At the moment I am not quite sure why disabling the eslint rule fixes it in other IDEs but not in VSCode.

[oliveready7]

Hi guys,

I believe you're getting this issue because of the Vetur plugin, not ESLint.

Turn off the Vetur setting "validate vue-html in

[1beb]

Check out the big brain on Oliver! Thx!