JS.VUE.SCRIPT.SETUP.USES.VARS

• :warning: This rule was deprecated. This rule is not needed when using vue-eslint-parser v9.0.0 or later. 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:

{'vue/script-setup-uses-vars': ['error'], 'no-unused-vars': ['error']}

<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

You can disable this rule in any of the following cases:

• You are using vue-eslint-parser v9.0.0 or later.
• You are not using <script setup>.
• You do not use the no-unused-vars rule.

Further Reading

• Vue RFCs - 0040-script-setup (https://github.com/vuejs/rfcs/blob/master/active-rfcs/0040-script-setup.md)