script-setup-uses-vars.md

pageClass	sidebarDepth	title	description
rule-details	0	vue/script-setup-uses-vars	prevent `<script setup>` variables used in `<template>` to be marked as unused

vue/script-setup-uses-vars

prevent <script setup> variables used in <template> to be marked as unused

• ❗ This rule has not been released yet.
• ⚙️ This rule is included in all of "plugin:vue/base", "plugin:vue/essential", "plugin:vue/vue3-essential", "plugin:vue/strongly-recommended", "plugin:vue/vue3-strongly-recommended", "plugin:vue/recommended" and "plugin:vue/vue3-recommended".

ESLint no-unused-vars rule does not detect variables in <script setup> used in <template>. This rule will find variables in <script setup> used in <template> and mark them as used.

This rule only has an effect when the no-unused-vars rule is enabled.

📖 Rule Details

Without this rule this code triggers warning:

<script setup>
  // imported components are also directly usable in template
  import Foo from './Foo.vue'
  import { ref } from 'vue'

  // write Composition API code just like in a normal setup()
  // but no need to manually return everything
  const count = ref(0)
  const inc = () => {
    count.value++
  }
</script>

<template>
  <Foo :count="count" @click="inc" />
</template>

After turning on, Foo is being marked as used and no-unused-vars rule doesn't report an issue.

🔇 When Not To Use It

If you are not using <script setup> or if you do not use the no-unused-vars rule then you can disable this rule.

👫 Related Rules

• vue/jsx-uses-vars
• no-unused-vars

📚 Further Reading

• Vue RFCs - 0040-script-setup

🔍 Implementation

• Rule source
• Test source