Vue 3, JSX/TSX, and UniApp

This page documents 109 rules from the current dependency versions and repository configuration. Each entry includes effective severity, scope, upstream description, common messages, and incorrect/correct examples.

Explicit repository rules (15 rules)

vue/attribute-hyphenation

Use kebab-case for custom component template attributes; script props and JSX attributes remain camelCase.

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Supported; review semantics and the diff before applying
• Rule source: Official documentation
• Common messages: Attribute '{{text}}' must be hyphenated.; Attribute '{{text}}' can't be hyphenated.
• Example type: Direct code example for an explicit repository rule

Incorrect:

<template>
<UserCard userName="Fast" />
</template>

Correct:

<template>
<UserCard user-name="Fast" />
</template>

vue/attributes-order

Sorts template attributes by definitions, loops, conditions, modifiers, unique/global/ordinary attributes, events, and content.

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Supported; review semantics and the diff before applying
• Rule source: Official documentation
• Common messages: Attribute "{{currentNode}}" should go before "{{prevNode}}".
• Example type: Direct code example for an explicit repository rule

Incorrect:

<template>
<button @click="save" v-if="ready" id="save">Save</button>
</template>

Correct:

<template>
<button v-if="ready" id="save" @click="save">Save</button>
</template>

vue/custom-event-name-casing

Custom event names in emit, emits, and handler references use camelCase; native DOM events are unaffected.

• Effective severity and scope: error: Vue SFC, Vue JSX, Vue TSX, UniApp NVue, UniApp TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Custom event name '{{name}}' must be {{caseType}}.
• Example type: Direct code example for an explicit repository rule

Incorrect:

<script setup>const emit = defineEmits(["saveItem"]);
emit("save-item");</script>

Correct:

<script setup>const emit = defineEmits(["saveItem"]);
emit("saveItem");</script>

vue/multi-word-component-names

Allows conventional single-word component names such as App and Layout.

• Effective severity and scope: disabled by default through an explicit local override
• Disabled in: Vue SFC, Vue JSX, Vue TSX, UniApp NVue, UniApp TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Component name "{{value}}" should always be multi-word.
• Example type: Direct code example for an explicit repository rule

Incorrect:

<script>
export default { name: 'Card' };
</script>

Correct:

<script>
export default { name: 'UserCard' };
</script>

vue/no-dupe-keys

Disallows duplicate names across props, data, computed, methods, and similar options.

• Effective severity and scope: error: Vue SFC, Vue JSX, Vue TSX, UniApp NVue, UniApp TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Duplicate key '{{name}}'. May cause name collision in script or template tag.
• Example type: Direct code example for an explicit repository rule

Incorrect:

<script>export default { props: ["name"], data: () => ({ name: "" }) };</script>

Correct:

<script>export default { props: ["name"], data: () => ({ draftName: "" }) };</script>

vue/no-mutating-props

Props are readonly parent inputs; children update through emit or local state.

• Effective severity and scope: error: Vue SFC, Vue JSX, Vue TSX, UniApp NVue, UniApp TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Unexpected mutation of "{{key}}" prop.
• Example type: Direct code example for an explicit repository rule

Incorrect:

<script setup lang="ts">const props = defineProps<{ count: number }>();
props.count++;</script>

Correct:

<script setup lang="ts">const props = defineProps<{ count: number }>();
const emit = defineEmits<{ "update:count": [value: number] }>();
emit("update:count", props.count + 1);</script>

vue/no-ref-object-reactivity-loss

Disallows destructuring or passing refs in ways that lose reactivity.

• Effective severity and scope: error: Vue SFC, Vue JSX, Vue TSX, UniApp NVue, UniApp TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Getting a value from the ref object in the same scope will cause the value to lose reactivity.; Getting a reactive variable in the same scope will cause the value to lose reactivity.
• Example type: Direct code example for an explicit repository rule

Incorrect:

<script setup>import { ref } from 'vue';
const count = ref(0).value;</script>

Correct:

<script setup>import { ref } from 'vue';
const count = ref(0);</script>
<template><p>{{ count }}</p></template>

vue/no-reserved-component-names

Component names must not occupy Vue built-in or platform-reserved names.

• Effective severity and scope: error: Vue SFC, Vue JSX, Vue TSX, UniApp NVue, UniApp TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Name "{{name}}" is reserved.; Name "{{name}}" is reserved in HTML.; Name "{{name}}" is reserved in Vue.js.
• Example type: Direct code example for an explicit repository rule

Incorrect:

<script setup>defineOptions({ name: "div" });</script>

Correct:

<script setup>defineOptions({ name: "PageContainer" });</script>

vue/no-setup-props-reactivity-loss

Direct props destructuring in setup can lose reactivity; retain the props reference or use reactive conversion such as toRefs.

• Effective severity and scope: error: Vue SFC, Vue JSX, Vue TSX, UniApp NVue, UniApp TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Destructuring the 'props' will cause the value to lose reactivity.; Getting a value from the 'props' in root scope of '{{scopeName}}' will cause the value to lose reactivity.
• Example type: Direct code example for an explicit repository rule

Incorrect:

<script>
export default { setup({ count }) { return { count }; } };
</script>

Correct:

<script>
export default { setup(props) { return { count: toRef(props, 'count') }; } };
</script>

vue/no-v-html

v-html may introduce XSS; warning severity accommodates sanitized rich text.

• Effective severity and scope: warn: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: 'v-html' directive can lead to XSS attack.
• Example type: Direct code example for an explicit repository rule

Incorrect:

<template>
<div v-html="untrustedHtml" />
</template>

Correct:

<template>
<div>{{ plainText }}</div>
</template>

vue/no-v-text-v-html-on-component

Do not use v-text or v-html on component nodes, where they overwrite content and obscure boundaries.

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Using {{directiveName}} on component may break component's content.
• Example type: Direct code example for an explicit repository rule

Incorrect:

<template>
<UserCard v-html="content" />
</template>

Correct:

<template>
<UserCard>{{ content }}</UserCard>
</template>

vue/one-component-per-file

Allows small file-local helper components in one SFC.

• Effective severity and scope: disabled by default through an explicit local override
• Disabled in: Vue SFC, Vue JSX, Vue TSX, UniApp NVue, UniApp TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: There is more than one component in this file.
• Example type: Direct code example for an explicit repository rule

Incorrect:

<script>
export const Header = defineComponent({});
export const Footer = defineComponent({});
</script>

Correct:

<script>
export default defineComponent({ name: 'PageHeader' });
</script>

vue/prefer-import-from-vue

Allows explicit Vue subpackage imports for compiler/runtime use cases.

• Effective severity and scope: disabled by default through an explicit local override
• Disabled in: Vue SFC, Vue JSX, Vue TSX, UniApp NVue, UniApp TSX
• Autofix: Supported; review semantics and the diff before applying
• Rule source: Official documentation
• Common messages: Import from 'vue' instead of '{{source}}'.
• Example type: Direct code example for an explicit repository rule

Incorrect:

<script>
import { ref } from '@vue/reactivity';
</script>

Correct:

<script>
import { ref } from 'vue';
</script>

vue/require-default-prop

TypeScript props and required declarations already express optionality; optional props need not all declare defaults.

• Effective severity and scope: disabled by default through an explicit local override
• Disabled in: Vue SFC, Vue JSX, Vue TSX, UniApp NVue, UniApp TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Prop '{{propName}}' requires default value to be set.
• Example type: Direct code example for an explicit repository rule

Incorrect:

<script>
export default { props: { name: String } };
</script>

Correct:

<script>
export default { props: { name: { type: String, default: '' } } };
</script>

vue/require-explicit-emits

Component events must be explicitly declared as a checkable public contract.

• Effective severity and scope: error: Vue SFC, Vue JSX, Vue TSX, UniApp NVue, UniApp TSX
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: The "{{name}}" event has been triggered but not declared on {{emitsKind}}.; Add the "{{name}}" to {{emitsKind}}.; Add the {{emitsKind}} with array syntax and define "{{name}}" event.
• Example type: Direct code example for an explicit repository rule

Incorrect:

<script setup lang="ts">const emit = defineEmits<{ cancel: [] }>();
emit("save");</script>

Correct:

<script setup lang="ts">const emit = defineEmits<{ save: [] }>();
emit("save");</script>

Rules from third-party presets (94 rules)

vue/block-order

Checks the corresponding code constraint. Upstream description: enforce order of component top-level elements

• Effective severity and scope: warn: Vue SFC, UniApp NVue
• Autofix: Supported; review semantics and the diff before applying
• Rule source: Official documentation
• Common messages: '<{{elementName}}{{elementAttributes}}>' should be above '<{{firstUnorderedName}}{{firstUnorderedAttributes}}>' on line {{line}}.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<style scoped>.page { color: red; }</style>
<script setup>const title = 'Page';</script>
<template><h1>{{ title }}</h1></template>

Correct:

<script setup>const title = 'Page';</script>
<template><h1>{{ title }}</h1></template>
<style scoped>.page { color: red; }</style>

vue/comment-directive

Checks the corresponding code constraint. Upstream description: support comment-directives in <template>

• Effective severity and scope: error: Vue SFC
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: --block {{key}}; ++block; --line {{key}}
• Example type: Direct code example for a third-party preset rule

Incorrect:

<template>
// eslint-disable-next-line vue/no-v-html
<div v-html="html" />
</template>

Correct:

<template>
<!-- eslint-disable-next-line vue/no-v-html -->
<div v-html="html" />
</template>

vue/component-definition-name-casing

Checks the corresponding code constraint. Upstream description: enforce specific casing for component definition name

• Effective severity and scope: warn: Vue SFC, UniApp NVue
• Autofix: Supported; review semantics and the diff before applying
• Rule source: Official documentation
• Common messages: Property name "{{value}}" is not {{caseType}}.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<script>
export default { name: 'user-card' };
</script>

Correct:

<script>
export default { name: 'UserCard' };
</script>

vue/first-attribute-linebreak

Checks the corresponding code constraint. Upstream description: enforce the location of first attribute

• Effective severity and scope: warn: Vue SFC, UniApp NVue
• Autofix: Supported; review semantics and the diff before applying
• Rule source: Official documentation
• Common messages: Expected a linebreak before this attribute.; Expected no linebreak before this attribute.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<template>
<UserCard name="Fast"
  :active="true" />
</template>

Correct:

<template>
<UserCard
  name="Fast"
  :active="true"
/>
</template>

vue/jsx-uses-vars

Checks the corresponding code constraint. Upstream description: prevent variables used in JSX to be marked as unused

• Effective severity and scope: error: Vue SFC
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Example type: Direct code example for a third-party preset rule

Incorrect:

const UserCard = defineComponent({});
const view = <div />;

Correct:

const UserCard = defineComponent({});
const view = <UserCard />;

vue/no-arrow-functions-in-watch

Disallows unsafe, invalid, or misleading constructs. Upstream description: disallow using arrow functions to define watcher

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: You should not use an arrow function to define a watcher.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<script>
export default { watch: { count: () => { this.save(); } } };
</script>

Correct:

<script>
export default { watch: { count() { this.save(); } } };
</script>

vue/no-async-in-computed-properties

Disallows unsafe, invalid, or misleading constructs. Upstream description: disallow asynchronous actions in computed properties

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Unexpected {{expressionName}} in computed function.; Unexpected {{expressionName}} in "{{propertyName}}" computed property.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<script>
export default { computed: { async user() { return await loadUser(); } } };
</script>

Correct:

<script>
export default { data: () => ({ user: null }), async mounted() { this.user = await loadUser(); } };
</script>

vue/no-child-content

Disallows unsafe, invalid, or misleading constructs. Upstream description: disallow element's child contents which would be overwritten by a directive like v-html or v-text

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Child content is disallowed because it will be overwritten by the v-{{ directiveName }} directive.; Remove child content.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<template>
<div v-html="html">Fallback</div>
</template>

Correct:

<template>
<div v-html="html" />
</template>

vue/no-computed-properties-in-data

Disallows unsafe, invalid, or misleading constructs. Upstream description: disallow accessing computed properties in data

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: The computed property cannot be used in 'data()' because it is before initialization.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<script>
export default { data() { return { label: this.fullName }; }, computed: { fullName() { return this.name.trim(); } } };
</script>

Correct:

<script>
export default { data: () => ({ name: '' }), computed: { fullName() { return this.name.trim(); } } };
</script>

vue/no-deprecated-data-object-declaration

Disallows unsafe, invalid, or misleading constructs. Upstream description: disallow using deprecated object declaration on data (in Vue.js 3.0.0+)

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Supported; review semantics and the diff before applying
• Rule source: Official documentation
• Common messages: Object declaration on 'data' property is deprecated. Using function declaration instead.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<script>
export default { data: { ready: false } };
</script>

Correct:

<script>
export default { data() { return { ready: false }; } };
</script>

vue/no-deprecated-delete-set

Disallows unsafe, invalid, or misleading constructs. Upstream description: disallow using deprecated $delete and $set (in Vue.js 3.0.0+)

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: The '$delete', '$set' is deprecated.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<script>
export default { methods: { update() { this.$set(this.user, 'name', 'Fast'); this.$delete(this.user, 'legacy'); } } };
</script>

Correct:

<script>
export default { methods: { update() { this.user.name = 'Fast'; delete this.user.legacy; } } };
</script>

vue/no-deprecated-destroyed-lifecycle

Disallows unsafe, invalid, or misleading constructs. Upstream description: disallow using deprecated destroyed and beforeDestroy lifecycle hooks (in Vue.js 3.0.0+)

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Supported; review semantics and the diff before applying
• Rule source: Official documentation
• Common messages: The 'destroyed' lifecycle hook is deprecated. Use 'unmounted' instead.; The 'beforeDestroy' lifecycle hook is deprecated. Use 'beforeUnmount' instead.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<script>
export default { destroyed() { cleanup(); } };
</script>

Correct:

<script>
export default { unmounted() { cleanup(); } };
</script>

vue/no-deprecated-dollar-listeners-api

Disallows unsafe, invalid, or misleading constructs. Upstream description: disallow using deprecated $listeners (in Vue.js 3.0.0+)

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: The '$listeners' is deprecated.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<script>
export default { mounted() { use(this.$listeners); } };
</script>

Correct:

<script>
export default { mounted() { use(this.$attrs); } };
</script>

vue/no-deprecated-dollar-scopedslots-api

Disallows unsafe, invalid, or misleading constructs. Upstream description: disallow using deprecated $scopedSlots (in Vue.js 3.0.0+)

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Supported; review semantics and the diff before applying
• Rule source: Official documentation
• Common messages: The '$scopedSlots' is deprecated.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<script>
export default { mounted() { use(this.$scopedSlots); } };
</script>

Correct:

<script>
export default { mounted() { use(this.$slots); } };
</script>

vue/no-deprecated-events-api

Disallows unsafe, invalid, or misleading constructs. Upstream description: disallow using deprecated events api (in Vue.js 3.0.0+)

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: The Events api '$on', '$off' '$once' is deprecated. Using external library instead, for example mitt.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<script>
export default { mounted() { this.$on('save', this.handleSave); } };
</script>

Correct:

<script>
export default { mounted() { eventBus.on('save', this.handleSave); } };
</script>

vue/no-deprecated-filter

Disallows unsafe, invalid, or misleading constructs. Upstream description: disallow using deprecated filters syntax (in Vue.js 3.0.0+)

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Filters are deprecated.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<template>
<p>{{ total | currency }}</p>
</template>

Correct:

<template>
<p>{{ formatCurrency(total) }}</p>
</template>

vue/no-deprecated-functional-template

Disallows unsafe, invalid, or misleading constructs. Upstream description: disallow using deprecated the functional template (in Vue.js 3.0.0+)

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: The 'functional' template are deprecated.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<template functional><div /></template>

Correct:

<script>export default (props) => h('div', props);</script>

vue/no-deprecated-html-element-is

Disallows unsafe, invalid, or misleading constructs. Upstream description: disallow using deprecated the is attribute on HTML elements (in Vue.js 3.0.0+)

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: The 'is' attribute on HTML element are deprecated.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<template>
<table><tr is="UserRow" /></table>
</template>

Correct:

<template>
<table><tr is="vue:UserRow" /></table>
</template>

vue/no-deprecated-inline-template

Disallows unsafe, invalid, or misleading constructs. Upstream description: disallow using deprecated inline-template attribute (in Vue.js 3.0.0+)

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: 'inline-template' are deprecated.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<template>
<UserCard inline-template><p>{{ name }}</p></UserCard>
</template>

Correct:

<template>
<UserCard><template #default><p>{{ name }}</p></template></UserCard>
</template>

vue/no-deprecated-model-definition

Disallows unsafe, invalid, or misleading constructs. Upstream description: disallow deprecated model definition (in Vue.js 3.0.0+)

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: 'model' definition is deprecated.; 'model' definition is deprecated. You may use the Vue 3-compatible 'modelValue'/'update:modelValue' though.; Change to 'modelValue'/'update:modelValue'.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<script>
export default { model: { prop: 'value', event: 'input' } };
</script>

Correct:

<script>
export default { props: { modelValue: String }, emits: ['update:modelValue'] };
</script>

vue/no-deprecated-props-default-this

Disallows unsafe, invalid, or misleading constructs. Upstream description: disallow deprecated this access in props default function (in Vue.js 3.0.0+)

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Props default value factory functions no longer have access to 'this'.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<script>
export default { props: { color: { default() { return this.theme.color; } } } };
</script>

Correct:

<script>
export default { props: { color: { default: 'blue' } } };
</script>

vue/no-deprecated-router-link-tag-prop

Disallows unsafe, invalid, or misleading constructs. Upstream description: disallow using deprecated tag property on RouterLink (in Vue.js 3.0.0+)

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: 'tag' property on '{{element}}' component is deprecated. Use scoped slots instead.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<template>
<RouterLink to="/home" tag="button">Home</RouterLink>
</template>

Correct:

<template>
<RouterLink to="/home" custom v-slot="{ navigate }"><button @click="navigate">Home</button></RouterLink>
</template>

vue/no-deprecated-scope-attribute

Disallows unsafe, invalid, or misleading constructs. Upstream description: disallow deprecated scope attribute (in Vue.js 2.5.0+)

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Supported; review semantics and the diff before applying
• Rule source: Official documentation
• Common messages: 'scope' attributes are deprecated.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<template>
<template scope="slotProps">{{ slotProps.name }}</template>
</template>

Correct:

<template>
<template #default="slotProps">{{ slotProps.name }}</template>
</template>

vue/no-deprecated-slot-attribute

Disallows unsafe, invalid, or misleading constructs. Upstream description: disallow deprecated slot attribute (in Vue.js 2.6.0+)

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Supported; review semantics and the diff before applying
• Rule source: Official documentation
• Common messages: 'slot' attributes are deprecated.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<template>
<p slot="header">Title</p>
</template>

Correct:

<template>
<template #header><p>Title</p></template>
</template>

vue/no-deprecated-slot-scope-attribute

Disallows unsafe, invalid, or misleading constructs. Upstream description: disallow deprecated slot-scope attribute (in Vue.js 2.6.0+)

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Supported; review semantics and the diff before applying
• Rule source: Official documentation
• Common messages: 'slot-scope' are deprecated.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<template>
<template slot-scope="slotProps">{{ slotProps.name }}</template>
</template>

Correct:

<template>
<template #default="slotProps">{{ slotProps.name }}</template>
</template>

vue/no-deprecated-v-bind-sync

Disallows unsafe, invalid, or misleading constructs. Upstream description: disallow use of deprecated .sync modifier on v-bind directive (in Vue.js 3.0.0+)

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Supported; review semantics and the diff before applying
• Rule source: Official documentation
• Common messages: '.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<template>
<UserCard :name.sync="name" />
</template>

Correct:

<template>
<UserCard v-model:name="name" />
</template>

vue/no-deprecated-v-is

Disallows unsafe, invalid, or misleading constructs. Upstream description: disallow deprecated v-is directive (in Vue.js 3.1.0+)

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: 'v-is' directive is deprecated.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<template>
<div v-is="componentName" />
</template>

Correct:

<template>
<component :is="componentName" />
</template>

vue/no-deprecated-v-on-native-modifier

Disallows unsafe, invalid, or misleading constructs. Upstream description: disallow using deprecated .native modifiers (in Vue.js 3.0.0+)

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: '.native' modifier on 'v-on' directive is deprecated.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<template>
<UserCard @click.native="open" />
</template>

Correct:

<template>
<UserCard @click="open" />
</template>

vue/no-deprecated-v-on-number-modifiers

Disallows unsafe, invalid, or misleading constructs. Upstream description: disallow using deprecated number (keycode) modifiers (in Vue.js 3.0.0+)

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Supported; review semantics and the diff before applying
• Rule source: Official documentation
• Common messages: 'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<template>
<input @keyup.13="submit" />
</template>

Correct:

<template>
<input @keyup.enter="submit" />
</template>

vue/no-deprecated-vue-config-keycodes

Disallows unsafe, invalid, or misleading constructs. Upstream description: disallow using deprecated Vue.config.keyCodes (in Vue.js 3.0.0+)

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: 'Vue.config.keyCodes' are deprecated.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<script>
Vue.config.keyCodes.f1 = 112;
</script>

Correct:

<script>
const onKeydown = (event) => { if (event.key === 'F1') openHelp(); };
</script>

vue/no-dupe-v-else-if

Disallows unsafe, invalid, or misleading constructs. Upstream description: disallow duplicate conditions in v-if / v-else-if chains

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: This branch can never execute. Its condition is a duplicate or covered by previous conditions in the 'v-if' / 'v-else-if' chain.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<template>
<p v-if="status === 'ready'">Ready</p><p v-else-if="status === 'ready'">Again</p>
</template>

Correct:

<template>
<p v-if="status === 'ready'">Ready</p><p v-else-if="status === 'failed'">Failed</p>
</template>

vue/no-duplicate-attributes

Disallows unsafe, invalid, or misleading constructs. Upstream description: disallow duplication of attributes

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Duplicate attribute '{{name}}'.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<template>
<UserCard name="A" name="B" />
</template>

Correct:

<template>
<UserCard first-name="A" last-name="B" />
</template>

vue/no-export-in-script-setup

Disallows unsafe, invalid, or misleading constructs. Upstream description: disallow export in <script setup>

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: '<script setup>' cannot contain ES module exports.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<script setup>export const ready = true;</script>

Correct:

<script setup>const ready = true;</script>

vue/no-expose-after-await

Disallows unsafe, invalid, or misleading constructs. Upstream description: disallow asynchronously registered expose

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: '{{name}}' is forbidden after an 'await' expression.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<script setup>await load();
defineExpose({ refresh });</script>

Correct:

<script setup>defineExpose({ refresh });
await load();</script>

vue/no-lifecycle-after-await

Disallows unsafe, invalid, or misleading constructs. Upstream description: disallow asynchronously registered lifecycle hooks

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Lifecycle hooks are forbidden after an 'await' expression.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<script>import { onMounted } from 'vue';
export default { async setup() { await load(); onMounted(start); } };</script>

Correct:

<script>import { onMounted } from 'vue';
export default { async setup() { onMounted(start); await load(); } };</script>

vue/no-lone-template

Disallows unsafe, invalid, or misleading constructs. Upstream description: disallow unnecessary <template>

• Effective severity and scope: warn: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: '<template>' require directive.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<template><template><p>Content</p></template></template>

Correct:

<template><p>Content</p></template>

vue/no-multiple-slot-args

Disallows unsafe, invalid, or misleading constructs. Upstream description: disallow passing multiple arguments to scoped slots

• Effective severity and scope: warn: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Unexpected multiple arguments.; Unexpected spread argument.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<script>
export default { mounted() { this.$slots.default({ name: 'Fast' }, 0); } };
</script>

Correct:

<script>
export default { mounted() { this.$slots.default({ name: 'Fast', index: 0 }); } };
</script>

vue/no-parsing-error

Disallows unsafe, invalid, or misleading constructs. Upstream description: disallow parsing errors in <template>

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Parsing error: {{message}}.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<template><div></span></template>

Correct:

<template><div /></template>

vue/no-ref-as-operand

Disallows unsafe, invalid, or misleading constructs. Upstream description: disallow use of value wrapped by ref() (Composition API) as an operand

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Supported; review semantics and the diff before applying
• Rule source: Official documentation
• Common messages: Must use '.value' to read or write the value wrapped by '{{method}}()'.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<script setup>import { ref } from 'vue';
const count = ref(0);
const next = count + 1;</script>

Correct:

<script setup>import { ref } from 'vue';
const count = ref(0);
const next = count.value + 1;</script>

vue/no-required-prop-with-default

Disallows unsafe, invalid, or misleading constructs. Upstream description: enforce props with default values to be optional

• Effective severity and scope: warn: Vue SFC, UniApp NVue
• Autofix: Supported; review semantics and the diff before applying
• Rule source: Official documentation
• Common messages: Prop "{{ key }}" should be optional.; Change this prop to be optional.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<script>
export default { props: { name: { type: String, required: true, default: 'Fast' } } };
</script>

Correct:

<script>
export default { props: { name: { type: String, default: 'Fast' } } };
</script>

vue/no-reserved-keys

Disallows unsafe, invalid, or misleading constructs. Upstream description: disallow overwriting reserved keys

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Key '{{name}}' is reserved.; Keys starting with '_' are reserved in '{{name}}' group.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<script>
export default { data: () => ({ $el: null }) };
</script>

Correct:

<script>
export default { data: () => ({ element: null }) };
</script>

vue/no-reserved-props

Disallows unsafe, invalid, or misleading constructs. Upstream description: disallow reserved names in props

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: '{{propName}}' is a reserved attribute and cannot be used as props.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<script>
export default { props: { key: String } };
</script>

Correct:

<script>
export default { props: { itemKey: String } };
</script>

vue/no-shared-component-data

Disallows unsafe, invalid, or misleading constructs. Upstream description: enforce component's data property to be a function

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Supported; review semantics and the diff before applying
• Rule source: Official documentation
• Common messages: 'data' property in component must be a function.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<script>
export default { data: { ready: false } };
</script>

Correct:

<script>
export default { data() { return { ready: false }; } };
</script>

vue/no-side-effects-in-computed-properties

Disallows unsafe, invalid, or misleading constructs. Upstream description: disallow side effects in computed properties

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Unexpected side effect in computed function.; Unexpected side effect in "{{key}}" computed property.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<script>
export default { computed: { fullName() { this.name = this.name.trim(); return this.name; } } };
</script>

Correct:

<script>
export default { computed: { fullName() { return this.name.trim(); } } };
</script>

vue/no-template-key

Disallows unsafe, invalid, or misleading constructs. Upstream description: disallow key attribute on <template>

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: '<template>' cannot be keyed. Place the key on real elements instead.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<template>
<template :key="item.id"><UserRow /></template>
</template>

Correct:

<template>
<UserRow :key="item.id" />
</template>

vue/no-template-shadow

Disallows unsafe, invalid, or misleading constructs. Upstream description: disallow variable declarations from shadowing variables declared in the outer scope

• Effective severity and scope: warn: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Variable '{{name}}' is already declared in the upper scope.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<template>
<div v-for="user in users"><span v-for="user in user.friends">{{ user.name }}</span></div>
</template>

Correct:

<template>
<div v-for="user in users"><span v-for="friend in user.friends">{{ friend.name }}</span></div>
</template>

vue/no-textarea-mustache

Disallows unsafe, invalid, or misleading constructs. Upstream description: disallow mustaches in <textarea>

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Unexpected mustache. Use 'v-model' instead.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<template>
<textarea>{{ message }}</textarea>
</template>

Correct:

<template>
<textarea v-model="message" />
</template>

vue/no-unused-components

Disallows unsafe, invalid, or misleading constructs. Upstream description: disallow registering components that are not used inside templates

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: The "{{name}}" component has been registered but not used.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<script>import UserCard from './UserCard.vue';
export default { components: { UserCard } };</script>
<template><div /></template>

Correct:

<script>import UserCard from './UserCard.vue';
export default { components: { UserCard } };</script>
<template><UserCard /></template>

vue/no-unused-vars

Disallows unsafe, invalid, or misleading constructs. Upstream description: disallow unused variable definitions of v-for directives or scope attributes

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: '{{name}}' is defined but never used.; Replace '{{name}}' with '_{{name}}' to ignore the unused variable.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<template>
<li v-for="item in items">Static</li>
</template>

Correct:

<template>
<li v-for="item in items">{{ item.name }}</li>
</template>

vue/no-use-computed-property-like-method

Disallows unsafe, invalid, or misleading constructs. Upstream description: disallow use computed property like method

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Use {{ likeProperty }} instead of {{ likeMethod }}.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<script>
export default { computed: { fullName() { return 'Fast'; } }, mounted() { use(this.fullName()); } };
</script>

Correct:

<script>
export default { computed: { fullName() { return 'Fast'; } }, mounted() { use(this.fullName); } };
</script>

vue/no-use-v-if-with-v-for

Disallows unsafe, invalid, or misleading constructs. Upstream description: disallow using v-if on the same element as v-for

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: This 'v-if' should be moved to the wrapper element.; The '{{iteratorName}}' {{kind}} inside 'v-for' directive should be replaced with a computed property that returns filtered array instead. You should not mix 'v-for' with 'v-if'.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<template>
<li v-for="item in items" v-if="item.visible">{{ item.name }}</li>
</template>

Correct:

<template>
<li v-for="item in visibleItems">{{ item.name }}</li>
</template>

vue/no-useless-template-attributes

Disallows unsafe, invalid, or misleading constructs. Upstream description: disallow useless attribute on <template>

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Unexpected useless attribute on '<template>'.; Unexpected useless directive on '<template>'.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<template>
<template v-if="ready" class="wrapper"><p>Text</p></template>
</template>

Correct:

<template>
<template v-if="ready"><p class="wrapper">Text</p></template>
</template>

vue/no-v-for-template-key-on-child

Disallows unsafe, invalid, or misleading constructs. Upstream description: disallow key of <template v-for> placed on child elements

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: '<template v-for>' key should be placed on the '<template>' tag.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<template>
<template v-for="item in items"><UserRow :key="item.id" /></template>
</template>

Correct:

<template>
<template v-for="item in items" :key="item.id"><UserRow /></template>
</template>

vue/no-watch-after-await

Disallows unsafe, invalid, or misleading constructs. Upstream description: disallow asynchronously registered watch

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: 'watch' is forbidden after an 'await' expression.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<script>import { watch } from 'vue';
export default { async setup() { await load(); watch(source, update); } };</script>

Correct:

<script>import { watch } from 'vue';
export default { async setup() { watch(source, update); await load(); } };</script>

vue/order-in-components

Checks the corresponding code constraint. Upstream description: enforce order of properties in components

• Effective severity and scope: warn: Vue SFC, UniApp NVue
• Autofix: Supported; review semantics and the diff before applying
• Rule source: Official documentation
• Common messages: The "{{name}}" property should be above the "{{firstUnorderedPropertyName}}" property on line {{line}}.; Manually move "{{name}}" property above "{{firstUnorderedPropertyName}}" property on line {{line}} (might break side effects).
• Example type: Direct code example for a third-party preset rule

Incorrect:

<script>
export default { methods: { save() {} }, props: { name: String }, data: () => ({ ready: false }) };
</script>

Correct:

<script>
export default { props: { name: String }, data: () => ({ ready: false }), methods: { save() {} } };
</script>

vue/prop-name-casing

Checks the corresponding code constraint. Upstream description: enforce specific casing for the Prop name in Vue components

• Effective severity and scope: warn: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Prop "{{name}}" is not in {{caseType}}.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<script>
export default { props: { user_name: String } };
</script>

Correct:

<script>
export default { props: { userName: String } };
</script>

vue/require-component-is

Requires the declarations, properties, or structures specified by this rule. Upstream description: require v-bind:is of <component> elements

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Expected '<component>' elements to have 'v-bind:is' attribute.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<template>
<component />
</template>

Correct:

<template>
<component :is="currentComponent" />
</template>

vue/require-prop-type-constructor

Requires the declarations, properties, or structures specified by this rule. Upstream description: require prop type to be a constructor

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Supported; review semantics and the diff before applying
• Rule source: Official documentation
• Common messages: The "{{name}}" property should be a constructor.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<script>
export default { props: { name: { type: 'string' } } };
</script>

Correct:

<script>
export default { props: { name: { type: String } } };
</script>

vue/require-prop-types

Requires the declarations, properties, or structures specified by this rule. Upstream description: require type definitions in props

• Effective severity and scope: warn: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Prop "{{name}}" should define at least its type.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<script>
export default { props: ['name'] };
</script>

Correct:

<script>
export default { props: { name: String } };
</script>

vue/require-render-return

Requires the declarations, properties, or structures specified by this rule. Upstream description: enforce render function to always return value

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Expected to return a value in render function.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<script>
export default { render() { createVNode('div'); } };
</script>

Correct:

<script>
export default { render() { return createVNode('div'); } };
</script>

vue/require-slots-as-functions

Requires the declarations, properties, or structures specified by this rule. Upstream description: enforce properties of $slots to be used as a function

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Property in '$slots' should be used as function.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<script>
export default { mounted() { const content = [this.$slots.default]; use(content); } };
</script>

Correct:

<script>
export default { mounted() { const content = [this.$slots.default?.()]; use(content); } };
</script>

vue/require-toggle-inside-transition

Requires the declarations, properties, or structures specified by this rule. Upstream description: require control the display of the content inside <transition>

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: The element inside '<transition>' is expected to have a {{allowedDirectives}} directive.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<template>
<Transition><div>Always visible</div></Transition>
</template>

Correct:

<template>
<Transition><div v-if="visible">Visible</div></Transition>
</template>

vue/require-v-for-key

Requires the declarations, properties, or structures specified by this rule. Upstream description: require v-bind:key with v-for directives

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Elements in iteration expect to have 'v-bind:key' directives.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<template>
<div v-for="item in items">{{ item.name }}</div>
</template>

Correct:

<template>
<div v-for="item in items" :key="item.id">{{ item.name }}</div>
</template>

vue/require-valid-default-prop

Requires the declarations, properties, or structures specified by this rule. Upstream description: enforce props default values to be valid

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Type of the default value for '{{name}}' prop must be a {{types}}.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<script>
export default { props: { items: { type: Array, default: [] } } };
</script>

Correct:

<script>
export default { props: { items: { type: Array, default: () => [] } } };
</script>

vue/return-in-computed-property

Checks the corresponding code constraint. Upstream description: enforce that a return statement is present in computed property

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Expected to return a value in computed function.; Expected to return a value in "{{name}}" computed property.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<script>
export default { computed: { label() { if (this.name) return this.name; } } };
</script>

Correct:

<script>
export default { computed: { label() { return this.name || 'Anonymous'; } } };
</script>

vue/return-in-emits-validator

Checks the corresponding code constraint. Upstream description: enforce that a return statement is present in emits validator

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Expected to return a true value in "{{name}}" emits validator.; Expected to return a boolean value in "{{name}}" emits validator.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<script setup>const emit = defineEmits({ save(payload) { validate(payload); } });</script>

Correct:

<script setup>const emit = defineEmits({ save(payload) { return validate(payload); } });</script>

vue/this-in-template

Checks the corresponding code constraint. Upstream description: disallow usage of this in template

• Effective severity and scope: warn: Vue SFC, UniApp NVue
• Autofix: Supported; review semantics and the diff before applying
• Rule source: Official documentation
• Common messages: Unexpected usage of 'this'.; Expected 'this'.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<template>
<p>{{ this.name }}</p>
</template>

Correct:

<template>
<p>{{ name }}</p>
</template>

vue/use-v-on-exact

Checks the corresponding code constraint. Upstream description: enforce usage of exact modifier on v-on

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Consider to use '.exact' modifier.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<template>
<button @click="select" @click.ctrl="selectMultiple">Select</button>
</template>

Correct:

<template>
<button @click.exact="select" @click.ctrl.exact="selectMultiple">Select</button>
</template>

vue/v-bind-style

Checks the corresponding code constraint. Upstream description: enforce v-bind directive style

• Effective severity and scope: warn: Vue SFC, UniApp NVue
• Autofix: Supported; review semantics and the diff before applying
• Rule source: Official documentation
• Common messages: Expected 'v-bind' before ':'.; Unexpected 'v-bind' before ':'.; Expected 'v-bind:' instead of '.'.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<template>
<UserCard v-bind:name="name" />
</template>

Correct:

<template>
<UserCard :name="name" />
</template>

vue/v-on-event-hyphenation

Checks the corresponding code constraint. Upstream description: enforce v-on event naming style on custom components in template

• Effective severity and scope: warn: Vue SFC, UniApp NVue
• Autofix: Supported; review semantics and the diff before applying
• Rule source: Official documentation
• Common messages: v-on event '{{text}}' must be hyphenated.; v-on event '{{text}}' can't be hyphenated.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<template>
<UserCard @saveItem="save" />
</template>

Correct:

<template>
<UserCard @save-item="save" />
</template>

vue/v-on-style

Checks the corresponding code constraint. Upstream description: enforce v-on directive style

• Effective severity and scope: warn: Vue SFC, UniApp NVue
• Autofix: Supported; review semantics and the diff before applying
• Rule source: Official documentation
• Common messages: Expected '@' instead of 'v-on:'.; Expected 'v-on:' instead of '@'.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<template>
<button v-on:click="save">Save</button>
</template>

Correct:

<template>
<button @click="save">Save</button>
</template>

vue/v-slot-style

Checks the corresponding code constraint. Upstream description: enforce v-slot directive style

• Effective severity and scope: warn: Vue SFC, UniApp NVue
• Autofix: Supported; review semantics and the diff before applying
• Rule source: Official documentation
• Common messages: Expected '#{{argument}}' instead of '{{actual}}'.; Expected 'v-slot:{{argument}}' instead of '{{actual}}'.; Expected 'v-slot' instead of '{{actual}}'.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<template>
<template v-slot:header>Title</template>
</template>

Correct:

<template>
<template #header>Title</template>
</template>

vue/valid-attribute-name

Validates the relevant syntax, properties, or arguments. Upstream description: require valid attribute names

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Attribute name {{name}} is not valid.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<template>
<div bad"name="value" />
</template>

Correct:

<template>
<div data-name="value" />
</template>

vue/valid-define-emits

Validates the relevant syntax, properties, or arguments. Upstream description: enforce valid defineEmits compiler macro

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: 'defineEmits' has both a type-only emit and an argument.; 'defineEmits' is referencing locally declared variables.; 'defineEmits' has been called multiple times.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<script setup>defineEmits(['save']);
defineEmits(['cancel']);</script>

Correct:

<script setup>const emit = defineEmits(['save', 'cancel']);</script>

vue/valid-define-options

Validates the relevant syntax, properties, or arguments. Upstream description: enforce valid defineOptions compiler macro

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: 'defineOptions' is referencing locally declared variables.; 'defineOptions' has been called multiple times.; Options are not defined.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<script setup>const componentName = getComponentName();
defineOptions({ name: componentName });</script>

Correct:

<script setup>defineOptions({ name: 'UserCard' });</script>

vue/valid-define-props

Validates the relevant syntax, properties, or arguments. Upstream description: enforce valid defineProps compiler macro

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: 'defineProps' has both a type-only props and an argument.; 'defineProps' is referencing locally declared variables.; 'defineProps' has been called multiple times.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<script setup>defineProps(['name']);
defineProps(['age']);</script>

Correct:

<script setup>const props = defineProps(['name', 'age']);</script>

vue/valid-next-tick

Validates the relevant syntax, properties, or arguments. Upstream description: enforce valid nextTick function calls

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Supported; review semantics and the diff before applying
• Rule source: Official documentation
• Common messages: 'nextTick' is a function.; Await the Promise returned by 'nextTick' or pass a callback function.; Add missing 'await' statement.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<script>
export default { mounted() { this.$nextTick(); } };
</script>

Correct:

<script>
export default { mounted() { this.$nextTick(() => updateLayout()); } };
</script>

vue/valid-template-root

Validates the relevant syntax, properties, or arguments. Upstream description: enforce valid template root

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: The template root with 'src' attribute is required to be empty.; The template requires child element.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<template></template>

Correct:

<template><main>Content</main></template>

vue/valid-v-bind

Validates the relevant syntax, properties, or arguments. Upstream description: enforce valid v-bind directives

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: 'v-bind' directives don't support the modifier '{{name}}'.; 'v-bind' directives require an attribute value.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<template>
<div v-bind:class />
</template>

Correct:

<template>
<div :class="classes" />
</template>

vue/valid-v-cloak

Validates the relevant syntax, properties, or arguments. Upstream description: enforce valid v-cloak directives

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: 'v-cloak' directives require no argument.; 'v-cloak' directives require no modifier.; 'v-cloak' directives require no attribute value.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<template>
<div v-cloak="ready" />
</template>

Correct:

<template>
<div v-cloak />
</template>

vue/valid-v-else

Validates the relevant syntax, properties, or arguments. Upstream description: enforce valid v-else directives

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: 'v-else' directives require being preceded by the element which has a 'v-if' or 'v-else-if' directive.; 'v-else' and 'v-if' directives can't exist on the same element. You may want 'v-else-if' directives.; 'v-else' and 'v-else-if' directives can't exist on the same element.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<template>
<p v-else="ready">Fallback</p>
</template>

Correct:

<template>
<p v-if="ready">Ready</p><p v-else>Fallback</p>
</template>

vue/valid-v-else-if

Validates the relevant syntax, properties, or arguments. Upstream description: enforce valid v-else-if directives

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: 'v-else-if' directives require being preceded by the element which has a 'v-if' or 'v-else-if' directive.; 'v-else-if' and 'v-if' directives can't exist on the same element.; 'v-else-if' and 'v-else' directives can't exist on the same element.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<template>
<p v-else-if>Loading</p>
</template>

Correct:

<template>
<p v-if="ready">Ready</p><p v-else-if="loading">Loading</p>
</template>

vue/valid-v-for

Validates the relevant syntax, properties, or arguments. Upstream description: enforce valid v-for directives

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: Custom elements in iteration require 'v-bind:key' directives.; Expected 'v-bind:key' directive to use the variables which are defined by the 'v-for' directive.; 'v-for' directives require no argument.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<template>
<li v-for>Item</li>
</template>

Correct:

<template>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</template>

vue/valid-v-html

Validates the relevant syntax, properties, or arguments. Upstream description: enforce valid v-html directives

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: 'v-html' directives require no argument.; 'v-html' directives require no modifier.; 'v-html' directives require that attribute value.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<template>
<div v-html />
</template>

Correct:

<template>
<div v-html="sanitizedHtml" />
</template>

vue/valid-v-if

Validates the relevant syntax, properties, or arguments. Upstream description: enforce valid v-if directives

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: 'v-if' and 'v-else' directives can't exist on the same element. You may want 'v-else-if' directives.; 'v-if' and 'v-else-if' directives can't exist on the same element.; 'v-if' directives require no argument.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<template>
<p v-if>Ready</p>
</template>

Correct:

<template>
<p v-if="ready">Ready</p>
</template>

vue/valid-v-is

Validates the relevant syntax, properties, or arguments. Upstream description: enforce valid v-is directives

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: 'v-is' directives require no argument.; 'v-is' directives require no modifier.; 'v-is' directives require that attribute value.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<template>
<div v-is />
</template>

Correct:

<template>
<component :is="currentComponent" />
</template>

vue/valid-v-memo

Validates the relevant syntax, properties, or arguments. Upstream description: enforce valid v-memo directives

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: 'v-memo' directives require no argument.; 'v-memo' directives require no modifier.; 'v-memo' directives require that attribute value.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<template>
<div v-memo />
</template>

Correct:

<template>
<div v-memo="[count]" />
</template>

vue/valid-v-model

Validates the relevant syntax, properties, or arguments. Upstream description: enforce valid v-model directives

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: 'v-model' directives aren't supported on <{{name}}> elements.; 'v-model' directives don't support 'file' input type.; 'v-model' directives require no argument.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<template>
<input v-model:color="color" />
</template>

Correct:

<template>
<input v-model="color" />
</template>

vue/valid-v-on

Validates the relevant syntax, properties, or arguments. Upstream description: enforce valid v-on directives

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: 'v-on' directives don't support the modifier '{{modifier}}'.; Avoid using JavaScript keyword as "v-on" value: {{value}}.; 'v-on' directives require a value or verb modifier (like 'stop' or 'prevent').
• Example type: Direct code example for a third-party preset rule

Incorrect:

<template>
<button v-on>Save</button>
</template>

Correct:

<template>
<button @click="save">Save</button>
</template>

vue/valid-v-once

Validates the relevant syntax, properties, or arguments. Upstream description: enforce valid v-once directives

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: 'v-once' directives require no argument.; 'v-once' directives require no modifier.; 'v-once' directives require no attribute value.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<template>
<p v-once:label>Static</p>
</template>

Correct:

<template>
<p v-once>Static</p>
</template>

vue/valid-v-pre

Validates the relevant syntax, properties, or arguments. Upstream description: enforce valid v-pre directives

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: 'v-pre' directives require no argument.; 'v-pre' directives require no modifier.; 'v-pre' directives require no attribute value.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<template>
<p v-pre="enabled">{{ raw }}</p>
</template>

Correct:

<template>
<p v-pre>{{ raw }}</p>
</template>

vue/valid-v-show

Validates the relevant syntax, properties, or arguments. Upstream description: enforce valid v-show directives

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: 'v-show' directives require no argument.; 'v-show' directives require no modifier.; 'v-show' directives require that attribute value.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<template>
<p v-show>Visible</p>
</template>

Correct:

<template>
<p v-show="visible">Visible</p>
</template>

vue/valid-v-slot

Validates the relevant syntax, properties, or arguments. Upstream description: enforce valid v-slot directives

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: 'v-slot' directive must be owned by a custom element, but '{{name}}' is not.; Named slots must use '<template>' on a custom element.; Default slot must use '<template>' on a custom element when there are other named slots.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<template>
<div #header>Title</div>
</template>

Correct:

<template>
<UserCard><template #header>Title</template></UserCard>
</template>

vue/valid-v-text

Validates the relevant syntax, properties, or arguments. Upstream description: enforce valid v-text directives

• Effective severity and scope: error: Vue SFC, UniApp NVue
• Autofix: Unsupported or not declared upstream
• Rule source: Official documentation
• Common messages: 'v-text' directives require no argument.; 'v-text' directives require no modifier.; 'v-text' directives require that attribute value.
• Example type: Direct code example for a third-party preset rule

Incorrect:

<template>
<p v-text />
</template>

Correct:

<template>
<p v-text="message" />
</template>