eslint(vue/no-lone-template) if we use v-show with template tag

[jd-solanki]

Checklist

• I have tried restarting my IDE and the issue persists.
• I have read the FAQ and my problem is not listed.

Tell us about your environment

• ESLint version: 7.21.0
• eslint-plugin-vue version: 7.7.0
• Node version: 14.15.4
• Operating System: Linux Mint 20.1 Cinnamon

Please show your full configuration:

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ['eslint:recommended', 'plugin:vue/recommended', '@vue/airbnb', '@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',

    // recommended by Vetur
    'vue/html-self-closing': 'off',

    // Disable max-len
    'max-len': 'off',

    // we don't want it
    semi: ['error', 'never'],

    // add parens ony when required in arrow function
    'arrow-parens': ['error', 'as-needed'],

    // add new line above comment
    'lines-around-comment': [
      'error',
      {
        beforeBlockComment: true,
        beforeLineComment: true,
      },
    ],

    // add new line above comment
    'newline-before-return': 'error',

    // Fix: EsLint no-shadow issue
    // Reference: https://stackoverflow.com/questions/63961803/eslint-says-all-enums-in-typescript-app-are-already-declared-in-the-upper-scope
    'no-shadow': 'off',
    '@typescript-eslint/no-shadow': ['error'],

    // add new line below import
    'import/newline-after-import': ['error', { count: 1 }],

    'import/extensions': [
      'error',
      'ignorePackages',
      {
        js: 'never',
        jsx: 'never',
        ts: 'never',
        tsx: 'never',
      },
    ],
  },
}

What did you do?

<template>
  <div>

    <!-- `<template>` require directive. eslint(vue/no-lone-template) -->
    <template v-show="true">
      <span>Hello</span>
    </template>

    <!-- `<template>` require directive. eslint(vue/no-lone-template) -->
    <template v-show="false">
      <span>Hello</span>
    </template>
  </div>
</template>

What did you expect to happen?
As I added v-show it shall not give eslint(vue/no-lone-template)

What actually happened?

3:5  warning  `<template>` require directive                          vue/no-lone-template
6:5  warning  `<template>` require directive                          vue/no-lone-template

Repository to reproduce this issue
I guess I don't need repo. Just create .vue file and you will see it.

Additional Comment

I checked the rule on this page, it doesn't include v-show as well.

[ota-meshi]

Do you want to render <template> HTML element? In that case, you need to turn off the vue/no-lone-template rule.
I don't think you can use v-show on <template> when using it as a Vue <template> element (which doesn't actually render the HTML). So I think the vue/no-lone-template rule is working correctly.

[jd-solanki]

@ota-meshi Thanks for the response.

Actually, I wanted to show group of buttons like below:

<v-btn v-show="showCode">JS</v-btn>
<v-btn v-show="showCode">TS</v-btn>

In above case I have to write two v-show. So, I tried:

<template v-show="showCode">
  <v-btn>JS</v-btn>
  <v-btn>TS</v-btn>
</template>

And receiving the warning, vue/no-lone-template.

[ota-meshi]

I don't think your template will work as you intended. (Vue2 and Vue3 work differently)

<template v-show="showCode">
  <v-btn>JS</v-btn>
  <v-btn>TS</v-btn>
</template>