Regras Vue

Cada regra Vue reúne nesta página sua finalidade, configuração e exemplos incorreto e correto. As linhas destacadas mostram a alteração; o código copiado preserva o conteúdo completo.

Todas as regras · Opções das regras · Mapa de migração do ESLint · Verificações do projeto · Atributos entre componentes

vue/a11y-img-alt

Exigir o atributo alt nas imagens para garantir acessibilidade

Incorreto · Correto

Severidade padrão: warning
Predefinições: none
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/a11y-img-alt": "warn"
      }
    },
  },
});

vp run lint

Incorreto

Nem a imagem estática nem a imagem de origem dinâmica fornecem um atributo alt.

<template>
<img src="/photo.jpg" />
<img :src="photo" />
</template>

Correto

Imagens informativas recebem um texto alt descritivo; imagens decorativas recebem um alt vazio; a imagem dinâmica vincula sua descrição.

<template>
<!-- Informative image -->
<img src="/photo.jpg" alt="Team photo from company retreat" />

<!-- Decorative image (empty alt) -->
<img src="/decoration.svg" alt="" />

<!-- Dynamic alt -->
<img :src="photo" :alt="photoDescription" />
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/attribute-hyphenation

Aplicar um padrão de nomes de atributos em componentes personalizados

Incorreto · Correto

Severidade padrão: warning
Predefinições: happy-path, nuxt, ecosystem, opinionated
Correção automática: Disponível para os diagnósticos compatíveis
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Consulte as opções tipadas e os valores padrão.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/attribute-hyphenation": "warn"
      }
    },
  },
});

vp run lint

Incorreto

O atributo do componente usa a grafia camelCase firstName.

<template>
<UserCard firstName="Ada" />
</template>

Correto

A grafia first-name segue a convenção configurada de atributos de componente separados por hífen.

<template>
<UserCard first-name="Ada" />
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/attribute-order

Aplicar uma ordem consistente aos atributos

Incorreto · Correto

Severidade padrão: warning
Predefinições: happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/attribute-order": "warn"
      }
    },
  },
});

vp run lint

Incorreto

O manipulador de evento aparece antes da diretiva estrutural v-if e do atributo comum id.

<template>
  <div @click="onClick" v-if="show" id="main"></div>
</template>

Correto

v-if vem primeiro, seguido de id e do manipulador de evento, conforme a ordem da regra.

<template>
  <div v-if="show" id="main" @click="onClick"></div>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/component-definition-name-casing

Exigir PascalCase ou kebab-case nos nomes de definição de componentes

Incorreto · Correto

Severidade padrão: warning
Predefinições: happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

O nome de arquivo do componente é verificado. PascalCase e kebab-case são aceitos; o uso misturado de maiúsculas e minúsculas é reportado.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/component-definition-name-casing": "warn"
      }
    },
  },
});

vp run lint

Incorreto

O nome de arquivo myComponent.vue mistura uma inicial minúscula com uma letra maiúscula interna, em vez de usar PascalCase ou kebab-case.

myComponent.vue

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

Correto

Renomear o arquivo para MyComponent.vue aplica PascalCase; o conteúdo do template permanece igual.

MyComponent.vue

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

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/component-name-in-template-casing

Aplicar um padrão específico de maiúsculas e minúsculas aos nomes de componentes nos templates

Incorreto · Correto

Severidade padrão: warning
Predefinições: nuxt, opinionated
Correção automática: Disponível para os diagnósticos compatíveis
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Consulte as opções tipadas e os valores padrão.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/component-name-in-template-casing": "warn"
      }
    },
  },
});

vp run lint

Incorreto

O componente é escrito em kebab-case e camelCase, embora a convenção seja PascalCase.

<script setup>
import MyComponent from "./MyComponent.vue";
</script>
<template>
  <my-component />
  <myComponent />
</template>

Correto

MyComponent usa PascalCase; a sintaxe nativa de slot permanece em minúsculas.

<script setup>
import MyComponent from "./MyComponent.vue";
</script>
<template>
  <MyComponent />
  <RouterView />
  <slot />
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/html-button-has-type

Exigir um type explícito e válido nos elementos button

Incorreto · Correto

Severidade padrão: warning
Predefinições: nuxt, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/html-button-has-type": "warn"
      }
    },
  },
});

vp run lint

Incorreto

Um botão omite type e outro fornece o tipo foo, que não é aceito.

<template>
<button>Click</button>
<button type="foo">Click</button>
</template>

Correto

Os botões especificam button, submit ou reset; um type vinculado é tratado como dinâmico.

<template>
<button type="button">Click</button>
<button type="submit">Save</button>
<button type="reset">Reset</button>
<button :type="dynamicType">Click</button>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/html-quotes

Aplicar um padrão de aspas aos atributos HTML

Incorreto · Correto

Severidade padrão: warning
Predefinições: happy-path, nuxt, ecosystem, opinionated
Correção automática: Disponível para os diagnósticos compatíveis
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Consulte as opções tipadas e os valores padrão.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/html-quotes": "warn"
      }
    },
  },
});

vp run lint

Incorreto

Os atributos usam aspas simples ou nenhuma aspa, em vez da convenção de aspas duplas.

<template>
  <div class='foo'></div>
  <div class=foo></div>
  <div v-if='ready'></div>
</template>

Correto

Tanto os atributos comuns quanto as expressões de diretivas usam aspas duplas.

<template>
  <div class="foo"></div>
  <div v-if="ready"></div>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/html-self-closing

Aplicar um padrão de tags com fechamento automático

Incorreto · Correto

Severidade padrão: warning
Predefinições: nuxt, opinionated
Correção automática: Disponível para os diagnósticos compatíveis
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Consulte as opções tipadas e os valores padrão.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/html-self-closing": "warn"
      }
    },
  },
});

vp run lint

Incorreto

O componente vazio usa uma tag de fechamento separada, enquanto os elementos vazios img e br omitem a grafia de fechamento automático configurada.

<template>
  <MyComponent></MyComponent>
  <img>
  <br>
</template>

Correto

O componente e os elementos vazios usam a sintaxe de fechamento automático; uma div com conteúdo mantém sua tag de fechamento.

<template>
  <MyComponent />
  <div></div>
  <div />
  <img />
  <br />
  <div>content</div>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/max-template-complexity

Limitar a complexidade do próprio template de um componente, tanto ciclomática quanto cognitiva

Incorreto · Correto

Severidade padrão: warning
Predefinições: none
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Bad tem complexidade ciclomática 13 e complexidade cognitiva 25 (limites: 11 e 16). Cada componente é medido separadamente; apenas templates HTML inline são suportados.

Veja o cálculo da complexidade e os limites dos componentes para conhecer as contribuições às duas pontuações do exemplo.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/max-template-complexity": "warn"
      }
    },
  },
});

vp run lint

Incorreto

As ramificações, o laço, o conteúdo de slot e as decisões em expressões escritos pelo componente pai produzem pontuações de 13 e 25, acima dos limites padrão de 11 e 16.

<script setup lang="ts">
defineProps<{ rows: Row[] }>();
</script>
<template>
  <section>
    <h1>{{ user ? user.name : 'Guest' }}</h1>
    <DataTable :rows="rows">
      <template #cell="{ row, column }">
        <span v-if="column.key === 'status'" :class="row.active ? 'on' : 'off'">{{ row.status ?? 'unknown' }}</span>
        <a v-else-if="column.key === 'link' && row.url" :href="row.url">{{ row.label }}</a>
        <template v-else>
          <em v-for="tag in row.tags" :key="tag">
            <b v-if="tag.pinned || tag.starred">{{ tag.hot ? '!' : '' }}</b>
          </em>
        </template>
      </template>
    </DataTable>
    <p v-if="!rows.length && !loading">No data</p>
  </section>
</template>

Correto

O template pai delega a renderização a RowList e mantém um v-if; suas próprias pontuações são 2 e 1.

<template>
  <RowList v-if="ready" :rows="rows" />
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/multi-word-component-names

Exigir nomes de componentes com mais de uma palavra

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, nuxt, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

A ocorrência diagnosticada é o nome de arquivo. Renomeie o mesmo componente; alterar uma tag filha não corrige o problema.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/multi-word-component-names": "error"
      }
    },
  },
});

vp run lint

Incorreto

Item.vue dá ao componente um nome de uma única palavra.

Item.vue

<template><p>Item</p></template>

Correto

TodoItem.vue dá ao mesmo template um nome de componente com mais de uma palavra.

TodoItem.vue

<template><p>Item</p></template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/mustache-interpolation-spacing

Aplicar espaçamento consistente dentro das interpolações com chaves duplas

Incorreto · Correto

Severidade padrão: warning
Predefinições: happy-path, nuxt, ecosystem, opinionated
Correção automática: Disponível para os diagnósticos compatíveis
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Consulte as opções tipadas e os valores padrão.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/mustache-interpolation-spacing": "warn"
      }
    },
  },
});

vp run lint

Incorreto

A interpolação de texto não tem um espaço junto a um ou a ambos os delimitadores.

<template>
  <div>{{text}}</div>
  <div>{{ text}}</div>
  <div>{{text }}</div>
</template>

Correto

Espaços separam a expressão dos delimitadores de abertura e fechamento das chaves duplas.

<template>
  <div>{{ text }}</div>
  <div>{{ foo.bar }}</div>
  <div>{{ foo + bar }}</div>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/no-array-index-key

Proibir o uso direto da variável de índice de v-for como :key

Incorreto · Correto

Severidade padrão: warning
Predefinições: nuxt, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-array-index-key": "warn"
      }
    },
  },
});

vp run lint

Incorreto

A chave da lista é seu índice atual, então a identidade do item muda quando a lista é reordenada.

<template>
<li v-for="(item, index) in items" :key="index">{{ item.name }}</li>
</template>

Correto

A chave vem de item.id, preservando a identidade de cada item quando sua posição muda.

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

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/no-bare-strings-in-template

Proibir texto legível por pessoas diretamente no template quando ele deve ser internacionalizado

Incorreto · Correto

Severidade padrão: warning
Predefinições: none
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-bare-strings-in-template": "warn"
      }
    },
  },
});

vp run lint

Incorreto

O texto visível e os atributos de identificação incorporam strings sem tradução diretamente no template.

<template>
<div>hello</div>
<img alt="a cat" />
<input placeholder="Search" />
<button title="Close">x</button>
</template>

Correto

O conteúdo traduzível chama $t; os exemplos com pontuação e apenas números são exceções permitidas.

<template>
<div>{{ $t('hello') }}</div>
<img :alt="$t('cat')" />
<div>-</div>
<div>123</div>
<button :title="$t('close')">{{ $t('x') }}</button>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/no-boolean-attr-value

Proibir valores explícitos em atributos HTML booleanos

Incorreto · Correto

Severidade padrão: warning
Predefinições: nuxt, opinionated
Correção automática: Disponível para os diagnósticos compatíveis
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-boolean-attr-value": "warn"
      }
    },
  },
});

vp run lint

Incorreto

Os atributos booleanos disabled e checked contêm valores de string redundantes.

<template>
  <input disabled="disabled" />
  <input checked="checked" />
  <button disabled="true">Save</button>
</template>

Correto

A presença de cada atributo booleano expressa o mesmo estado ativado, sem um valor.

<template>
  <input disabled />
  <input checked />
  <button disabled>Save</button>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/no-child-content

Proibir conteúdo filho ao usar v-html ou v-text

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-child-content": "error"
      }
    },
  },
});

vp run lint

Incorreto

v-text substitui o conteúdo do parágrafo, então o texto alternativo escrito no template não pode ser preservado por essa diretiva.

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

Correto

Remover o texto filho deixa v-text como a única fonte de conteúdo do parágrafo.

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

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/no-deprecated-filter

Proibir a sintaxe obsoleta de filtros do Vue 2 com o operador de barra vertical

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-deprecated-filter": "error"
      }
    },
  },
});

vp run lint

Incorreto

A barra vertical usa a sintaxe de filtros removida do Vue para aplicar capitalize.

<template>
{{ message | capitalize }}
</template>

Correto

Chamar capitalize(message) aplica a transformação como uma expressão comum.

<template>
{{ capitalize(message) }}
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/no-deprecated-functional-template

Proibir o atributo functional no <template> de um SFC

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-deprecated-functional-template": "error"
      }
    },
  },
});

vp run lint

Incorreto

O template do SFC tem o atributo functional removido e lê o antigo contexto props.

<template functional>
  <div>{{ props.msg }}</div>
</template>

Correto

O template comum omite functional e lê diretamente a variável msg exposta pelo componente.

<template>
  <div>{{ msg }}</div>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/no-deprecated-html-element-is

Proibir o atributo is em elementos HTML nativos

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-deprecated-html-element-is": "error"
      }
    },
  },
});

vp run lint

Incorreto

Uma div nativa usa o antigo atributo is sem prefixo para solicitar um componente Vue.

<template>
  <div is="MyComponent" />
</template>

Correto

Um componente dinâmico usa :is; a forma no elemento nativo usa explicitamente o prefixo vue:.

<template>
  <component :is="MyComponent" />
  <div is="vue:MyComponent" />
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/no-deprecated-inline-template

Proibir o atributo obsoleto inline-template

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-deprecated-inline-template": "error"
      }
    },
  },
});

vp run lint

Incorreto

Card usa o atributo obsoleto inline-template para o conteúdo fornecido.

<template>
<Card inline-template><p>Details</p></Card>
</template>

Correto

O mesmo conteúdo é passado normalmente, sem o atributo inline-template.

<template>
<Card><p>Details</p></Card>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

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

Proibir a prop tag em <router-link>

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-deprecated-router-link-tag-prop": "error"
      }
    },
  },
});

vp run lint

Incorreto

RouterLink usa a prop tag removida para solicitar um elemento button.

<template>
  <router-link to="/home" tag="button">Home</router-link>
</template>

Correto

O slot fornece navigate a um botão escrito explicitamente no template.

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

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/no-deprecated-scope-attribute

Proibir o atributo obsoleto scope em <template>

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-deprecated-scope-attribute": "error"
      }
    },
  },
});

vp run lint

Incorreto

O template do slot declara props pelo atributo obsoleto scope.

<template>
<Card><template scope="props">{{ props.name }}</template></Card>
</template>

Correto

A diretiva do slot padrão declara a mesma variável props pela sintaxe atual de slots.

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

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/no-deprecated-slot-attribute

Proibir o atributo obsoleto slot

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-deprecated-slot-attribute": "error"
      }
    },
  },
});

vp run lint

Incorreto

O slot header é selecionado pelo antigo atributo slot.

<template>
  <Foo>
    <template slot="header"><h1>Title</h1></template>
    <div :slot="name">Title</div>
  </Foo>
</template>

Correto

v-slot:header seleciona explicitamente o slot header com a diretiva atual.

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

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/no-deprecated-slot-scope-attribute

Proibir o atributo obsoleto slot-scope

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-deprecated-slot-scope-attribute": "error"
      }
    },
  },
});

vp run lint

Incorreto

O template recebe as props do slot pelo atributo obsoleto slot-scope.

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

Correto

A diretiva #default recebe essas props sem slot-scope.

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

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/no-deprecated-v-bind-sync

Proibir o modificador obsoleto .sync em v-bind

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-deprecated-v-bind-sync": "error"
      }
    },
  },
});

vp run lint

Incorreto

As vinculações usam o modificador .sync removido, inclusive em combinação com .camel.

<template>
<MyComponent :title.sync="title" />
<MyComponent v-bind:title.sync="title" />
<MyComponent :title.sync.camel="title" />
</template>

Correto

Use uma vinculação comum unidirecional de title ou v-model:title quando for necessário um canal de atualização.

<template>
<MyComponent :title="title" />
<MyComponent v-model:title="title" />
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/no-deprecated-v-is

Proibir a diretiva obsoleta v-is

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-deprecated-v-is": "error"
      }
    },
  },
});

vp run lint

Incorreto

v-is foi descontinuada no Vue 3.1; o exemplo ainda a usa para trocar o componente renderizado.

<template>
<tr v-is="'MyRow'"></tr>
</template>

Correto

O atributo is com o prefixo vue:, ou <component :is>, seleciona o componente em seu lugar.

<template>
<tr is="vue:MyRow"></tr>
<component :is="MyRow" />
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

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

Proibir o modificador obsoleto .native em v-on

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-deprecated-v-on-native-modifier": "error"
      }
    },
  },
});

vp run lint

Incorreto

Os manipuladores do componente usam o modificador de evento .native removido.

<template>
<MyComponent @click.native="handler" />
<MyComponent v-on:click.native="handler" />
<MyComponent @click.native.stop="handler" />
</template>

Correto

Os manipuladores omitem .native e preservam outros modificadores de evento, como .stop.

<template>
<MyComponent @click="handler" />
<MyComponent @click.stop="handler" />
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

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

Proibir modificadores numéricos obsoletos de keyCode em v-on

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, nuxt, ecosystem, opinionated
Correção automática: Disponível para os diagnósticos compatíveis
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Seleção de modificadores numéricos e correções

O primeiro modificador numérico cujo nome começa com um inteiro decimal determina o diagnóstico. @keyup.13.27="submit" reporta apenas 13 e oferece @keyup.enter.27="submit"; outra passagem de correção pode substituir 27 por escape. @keyup.13suffix="submit" também se torna @keyup.enter="submit". Os valores de 0 a 9 são isentos, portanto @keyup.0.13="submit" não gera diagnóstico desta regra. Valores desconhecidos, como 999, são reportados sem correção. A isenção existente para Vue 2 e petite-vue continua em vigor.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-deprecated-v-on-number-modifiers": "error"
      }
    },
  },
});

vp run lint

Incorreto

Os manipuladores de teclado identificam as teclas pelos códigos numéricos removidos 13 e 27.

<template>
<input @keyup.13="submit" />
<input v-on:keyup.27="cancel" />
<input @keyup.13.stop="submit" />
</template>

Correto

Os manipuladores usam os modificadores de tecla nomeados enter e esc.

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

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/no-dupe-v-else-if

Proibir condições duplicadas em cadeias de v-if / v-else-if

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-dupe-v-else-if": "error"
      }
    },
  },
});

vp run lint

Incorreto

O else-if repete a condição ready já testada pelo primeiro ramo, tornando esse ramo posterior inacessível.

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

Correto

O segundo ramo testa loading, um estado distinto que pode alcançar o else-if.

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

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/no-duplicate-attributes

Proibir atributos duplicados no mesmo elemento

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-duplicate-attributes": "error"
      }
    },
  },
});

vp run lint

Incorreto

O mesmo botão declara class duas vezes, em vez de usar um único valor combinado de class.

<template>
  <button class="primary" class="large">Save</button>
</template>

Correto

Os dois nomes de classe aparecem em um único atributo class.

<template>
  <button class="primary large">Save</button>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/no-empty-component-block

Proibir blocos vazios em SFCs

Incorreto · Correto

Severidade padrão: warning
Predefinições: nuxt, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-empty-component-block": "warn"
      }
    },
  },
});

vp run lint

Incorreto

Os blocos template, script e style não contêm conteúdo significativo.

<template></template>

<script></script>

<style>
</style>

Correto

Cada bloco mantido contém marcação, declarações de script ou declarações de estilo de fato.

<template>
  <div>Hello</div>
</template>

<script setup>
const message = "Hello";
</script>

<style scoped>
.button { color: red; }
</style>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/no-inline-style

Desencorajar o uso de atributos de estilo inline

Incorreto · Correto

Severidade padrão: warning
Predefinições: nuxt, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-inline-style": "warn"
      }
    },
  },
});

vp run lint

Incorreto

O atributo style estático incorpora a declaração de cor no elemento.

<template>
  <div style="color: red">Text</div>
</template>

Correto

Classes expressam a cor fixa; a largura dependente de ratio permanece como uma vinculação dinâmica de estilo, fora da verificação de atributos estáticos.

<template>
  <div class="text-red">Text</div>
  <span :class="{ 'text-red': isRed }">Text</span>
  <div :style="{ width: `${ratio}%` }">Text</div>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/no-invalid-html-attribute

Proibir valores estáticos inválidos para atributos HTML

Incorreto · Correto

Severidade padrão: warning
Predefinições: happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-invalid-html-attribute": "warn"
      }
    },
  },
});

vp run lint

Incorreto

A âncora usa stylesheet como valor de rel, embora esse valor pertença a elementos link de folhas de estilo.

<template>
<a href="/guide" rel="stylesheet">Guide</a>
</template>

Correto

A âncora usa help, um valor de rel apropriado para um recurso de ajuda vinculado.

<template>
<a href="/guide" rel="help">Guide</a>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/no-lone-template

Proibir elementos <template> desnecessários

Incorreto · Correto

Severidade padrão: warning
Predefinições: happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-lone-template": "warn"
      }
    },
  },
});

vp run lint

Incorreto

O template interno não tem uma diretiva nem uma função de slot que lhe dê uma finalidade estrutural.

<template>
<div><template><p>Details</p></template></div>
</template>

Correto

Remover o invólucro desnecessário deixa o parágrafo diretamente dentro da div.

<template>
<div><p>Details</p></div>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/no-multi-spaces

Proibir vários espaços consecutivos

Incorreto · Correto

Severidade padrão: warning
Predefinições: happy-path, nuxt, ecosystem, opinionated
Correção automática: Disponível para os diagnósticos compatíveis
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-multi-spaces": "warn"
      }
    },
  },
});

vp run lint

Incorreto

Dois espaços separam os atributos ou o nome do elemento e o primeiro atributo.

<template>
  <div  class="panel"></div>
  <div class="panel"  id="main"></div>
</template>

Correto

Espaços únicos separam os mesmos atributos.

<template>
  <div class="panel"></div>
  <div class="panel" id="main"></div>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/no-multiple-objects-in-class

Proibir vários objetos literais dentro de uma vinculação de array em :class

Incorreto · Correto

Severidade padrão: warning
Predefinições: nuxt, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-multiple-objects-in-class": "warn"
      }
    },
  },
});

vp run lint

Incorreto

Um array de classes contém dois objetos literais no nível superior que podem ser combinados.

<template>
<div :class="[{ a }, { b }]"></div>
<div :class="[{ active: isActive }, { error: hasError }]"></div>
</template>

Correto

Um único objeto contém as condições das classes; arrays com um objeto e uma string ou com entradas não literais continuam permitidos.

<template>
<div :class="{ a, b }"></div>
<div :class="[{ active: isActive }, 'static']"></div>
<div :class="[foo, bar]"></div>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/no-multiple-template-root

Proibir vários nós raiz em um template

Incorreto · Correto

Severidade padrão: error
Predefinições: none
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Ative apenas quando houver um contrato de raiz única. O Vue 3 normalmente suporta fragmentos.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-multiple-template-root": "error"
      }
    },
  },
});

vp run lint

Incorreto

A convenção opcional de raiz única encontra dois parágrafos irmãos na raiz do template.

<template>
<p>First</p>
<p>Second</p>
</template>

Correto

Uma section envolve os parágrafos em uma única raiz; ative essa convenção apenas quando houver um contrato de raiz única.

<template>
<section><p>First</p><p>Second</p></section>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/no-mutating-props

Proibir a mutação de props de componentes

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Consulte as opções tipadas e os valores padrão.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-mutating-props": "error"
      }
    },
  },
});

vp run lint

Incorreto

Incrementar props.count escreve diretamente em um valor fornecido pelo componente pai.

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

props.count++;
</script>

Correto

O componente emite update:count com o próximo valor, deixando o pai responsável por atualizar a prop.

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

function increment() {
  emit("update:count", props.count + 1);
}
</script>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/no-negated-v-if-condition

Proibir uma condição negada em v-if quando a cadeia tiver v-else

Incorreto · Correto

Severidade padrão: warning
Predefinições: nuxt, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-negated-v-if-condition": "warn"
      }
    },
  },
});

vp run lint

Incorreto

Os ramos emparelhados v-if e v-else começam com uma condição negada.

<template>
<div v-if="!ok">A</div>
<div v-else>B</div>
</template>

Correto

Uma condição positiva ok vem primeiro; ao inverter uma condição, coloque primeiro o ramo originalmente oposto. Um v-if negado isolado e comparações !== continuam permitidos.

<template>
<div v-if="ok">B</div>
<div v-else>A</div>

<div v-if="!ok">A</div>

<div v-if="a !== b">A</div>
<div v-else>B</div>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/no-non-component-keep-alive-child

Proibir invólucros de elementos comuns diretamente abaixo de <KeepAlive>

Incorreto · Correto

Severidade padrão: warning
Predefinições: essential, happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-non-component-keep-alive-child": "warn"
      }
    },
  },
});

vp run lint

Incorreto

KeepAlive envolve condicionalmente uma div nativa, em vez de armazenar UserCard diretamente em cache.

<template>
  <KeepAlive>
    <div v-if="ready">
      <UserCard />
    </div>
  </KeepAlive>
</template>

Correto

O primeiro exemplo torna UserCard o filho condicional. O invólucro com v-show ilustra uma estrutura fora desta verificação de filhos condicionais, sem prometer que o invólucro nativo seja armazenado em cache.

<template>
  <KeepAlive>
    <UserCard v-if="ready" />
  </KeepAlive>
  <KeepAlive>
    <div v-show="opened">
      <UserCard />
    </div>
  </KeepAlive>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/no-preprocessor-lang

Desencorajar o uso de preprocessadores CSS em favor de CSS moderno

Incorreto · Correto

Severidade padrão: warning
Predefinições: nuxt, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-preprocessor-lang": "warn"
      }
    },
  },
});

vp run lint

Incorreto

O bloco style seleciona SCSS com lang. Isso descreve a convenção pretendida de não usar preprocessadores; o processamento atual de SFCs não emite esta regra.

<template><p>Notice</p></template>
<style lang="scss">
.notice { color: red; }
</style>

Correto

As mesmas declarações CSS omitem o lang do preprocessador. Essa é a correção da convenção, e não uma diferença executável de diagnósticos entre Bad/Good hoje.

<template><p>Notice</p></template>
<style>
.notice { color: red; }
</style>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/no-reserved-component-names

Proibir o uso de nomes reservados como nomes de componentes

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-reserved-component-names": "error"
      }
    },
  },
});

vp run lint

Incorreto

O nome de componente button entra em conflito com o nome de um elemento HTML nativo.

<script>
export default {
  name: "button",
};
</script>

Correto

AppButton é um nome de componente da aplicação e não reutiliza o nome nativo button.

<script setup lang="ts">
defineOptions({ name: "AppButton" });
</script>

<template>
  <Transition>
    <AppButton />
  </Transition>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/no-root-v-if

Proibir v-if no único elemento raiz de um template

Incorreto · Correto

Severidade padrão: warning
Predefinições: nuxt, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-root-v-if": "warn"
      }
    },
  },
});

vp run lint

Incorreto

A própria raiz do componente aparece e desaparece sob v-if.

<template>
  <div v-if="show">content</div>
</template>

Correto

Uma div externa estável permanece como raiz, enquanto o parágrafo aninhado recebe a condição de visibilidade.

<template>
  <div>
    <p v-if="show">content</p>
  </div>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/no-script-non-standard-lang

Desencorajar valores não padronizados de lang em scripts

Incorreto · Correto

Severidade padrão: warning
Predefinições: nuxt, opinionated
Correção automática: Não implementada no lint de SFC
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Suporte atual: no-sfc-finding

Esta entrada do catálogo atualmente não emite uma ocorrência específica da regra pelo lint de SFCs. O par Bad/Good descreve a convenção pretendida, e não uma ocorrência executável. Ativar o ID não fornece a verificação de SFC ausente.

ID configurado (sem diagnóstico de SFC atualmente)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-script-non-standard-lang": "warn"
      }
    },
  },
});

vp run lint

Incorreto

O script usa sintaxe CoffeeScript com lang=coffee. O processamento atual de SFCs não emite esta regra do catálogo para essa linguagem.

<script lang="coffee">
count = 0
</script>
<template><p>Notice</p></template>

Correto

O script usa uma declaração TypeScript comum com lang=ts, ilustrando a convenção de linguagem pretendida.

<script lang="ts">
const count = 0;
</script>
<template><p>Notice</p></template>

O exemplo correto ilustra a convenção pretendida; o fluxo atual de SFC não emite o diagnóstico específico da regra para nenhum dos exemplos.

Implementação · Todas as regras

vue/no-src-attribute

Desencorajar o atributo src em blocos de SFCs

Incorreto · Correto

Severidade padrão: warning
Predefinições: nuxt, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-src-attribute": "warn"
      }
    },
  },
});

vp run lint

Incorreto

Os blocos do SFC delegam o conteúdo de template, script e style a arquivos src.

<template src="./template.html"></template>
<script src="./script.ts"></script>
<style src="./style.css"></style>

Correto

Cada bloco do SFC contém seu próprio conteúdo, sem um atributo src externo.

<template>
  <p>Hello</p>
</template>

<script setup lang="ts">
const label = "Hello";
</script>

<style scoped>
p {
  color: red;
}
</style>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/no-static-inline-styles

Proibir atributos estáticos de estilo inline

Incorreto · Correto

Severidade padrão: warning
Predefinições: none
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-static-inline-styles": "warn"
      }
    },
  },
});

vp run lint

Incorreto

O parágrafo contém a declaração de cor constante no atributo style.

<template>
<p style="color: red">Notice</p>
</template>

Correto

Uma classe notice e uma folha de estilo com escopo mantêm a cor constante fora do atributo no template.

<template><p class="notice">Notice</p></template>
<style scoped>.notice { color: red; }</style>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/no-template-key

Proibir o atributo key em <template>

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-template-key": "error"
      }
    },
  },
});

vp run lint

Incorreto

Um invólucro template sem laço tem uma key, embora não seja o limite da iteração com chave.

<template>
<template :key="section"><div>Details</div></template>
</template>

Correto

A key pertence a uma iteração template v-for, na qual identifica cada fragmento repetido.

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

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/no-template-lang

Desencorajar o atributo lang no bloco template

Incorreto · Correto

Severidade padrão: warning
Predefinições: nuxt, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-template-lang": "warn"
      }
    },
  },
});

vp run lint

Incorreto

O template seleciona Pug por meio de lang. Essa é uma convenção pretendida de usar apenas HTML; o processamento atual de SFCs não gera diagnósticos para este ID do catálogo.

<template lang="pug">
p Notice
</template>

Correto

Um template HTML comum omite lang e usa o parágrafo diretamente. Isso ilustra a convenção sem afirmar que há uma ocorrência diagnosticada atualmente em SFCs.

<template>
<p>Notice</p>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/no-template-shadow

Proibir nomes de variáveis que ocultam variáveis de um escopo externo

Incorreto · Correto

Severidade padrão: warning
Predefinições: happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

A verificação compara as vinculações de v-for, v-slot (incluindo #name) e slots com escopo da sintaxe legada dentro do template. Ela reporta o identificador que oculta uma vinculação anterior, incluindo declarações no mesmo elemento, na ordem dos atributos. Elementos irmãos têm escopos independentes. Chaves de propriedades e referências em valores padrão não são declarações, e v-pre torna sua subárvore inerte.

Nomes do script e de propriedades do componente estão fora da verificação atual: uma única vinculação no template não produz um aviso apenas porque uma vinculação no script tem o mesmo nome. Os intervalos de diagnóstico abrangem o identificador como foi escrito no código-fonte, incluindo grafias com escapes e entidades HTML.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-template-shadow": "warn"
      }
    },
  },
});

vp run lint

Incorreto

O v-for interno declara item novamente e oculta a variável item externa dentro do laço aninhado.

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

Correto

O laço interno declara child, deixando item disponível para a linha externa e child para a linha aninhada.

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

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/no-template-target-blank

Proibir target="_blank" sem rel="noopener noreferrer"

Incorreto · Correto

Severidade padrão: warning
Predefinições: happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-template-target-blank": "warn"
      }
    },
  },
});

vp run lint

Incorreto

O link externo abre um novo contexto de navegação sem a proteção rel esperada.

<template>
<a href="https://example.com" target="_blank">x</a>
</template>

Correto

O mesmo link inclui noopener noreferrer junto de target=_blank.

<template>
<a href="https://example.com" target="_blank" rel="noopener noreferrer">x</a>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/no-textarea-mustache

Proibir interpolação com chaves duplas em <textarea>

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-textarea-mustache": "error"
      }
    },
  },
});

vp run lint

Incorreto

O textarea coloca message em uma interpolação filha, em vez de vincular seu valor.

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

Correto

v-model vincula o valor editável do textarea a message.

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

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/no-undefined-refs

Proibir referências a variáveis não definidas nos templates

Incorreto · Correto

Severidade padrão: warning
Predefinições: none
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-undefined-refs": "warn"
      }
    },
  },
});

vp run lint

Incorreto

O template lê missing, embora o script declare apenas message.

<script setup>const message = "Hello";</script>
<template>{{ missing }}</template>

Correto

A interpolação lê a variável message existente.

<script setup>const message = "Hello";</script>
<template>{{ message }}</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/no-unsafe-url

Alertar sobre vinculações de URL potencialmente inseguras

Incorreto · Correto

Severidade padrão: warning
Predefinições: essential, happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-unsafe-url": "warn"
      }
    },
  },
});

vp run lint

Incorreto

O destino da âncora começa com o esquema executável javascript:.

<template>
<a href="javascript:alert(1)">Continue</a>
</template>

Correto

A âncora usa o destino local comum de navegação /next.

<template>
<a href="/next">Continue</a>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/no-unsandboxed-iframe

Exigir um atributo sandbox nos elementos iframe

Incorreto · Correto

Severidade padrão: warning
Predefinições: happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-unsandboxed-iframe": "warn"
      }
    },
  },
});

vp run lint

Incorreto

O frame incorporado não tem um atributo sandbox que limite suas capacidades.

<template>
<iframe src="/embed"></iframe>
</template>

Correto

sandbox aplica restrições; allow-scripts habilita explicitamente essa única capacidade quando necessário.

<template>
<iframe src="/embed" sandbox></iframe>
<iframe src="/embed" sandbox="allow-scripts"></iframe>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/no-unused-components

Proibir o registro de componentes não usados nos templates

Incorreto · Correto

Severidade padrão: warning
Predefinições: essential, happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-unused-components": "warn"
      }
    },
  },
});

vp run lint

Incorreto

UserAvatar é importado como componente, mas o template nunca o renderiza.

<script setup lang="ts">
import UserAvatar from "./UserAvatar.vue";
</script>

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

Correto

O template renderiza o UserAvatar importado e passa a variável user.

<script setup lang="ts">
import UserAvatar from "./UserAvatar.vue";
</script>

<template>
  <UserAvatar :user="user" />
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/no-unused-properties

Proibir propriedades não usadas definidas em defineProps

Incorreto · Correto

Severidade padrão: warning
Predefinições: happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-unused-properties": "warn"
      }
    },
  },
});

vp run lint

Incorreto

O componente declara description como prop, mas renderiza apenas title.

<script setup lang="ts">
defineProps<{ title: string; description: string }>();
</script>

<template>
  <h1>{{ title }}</h1>
</template>

Correto

As duas props declaradas são referenciadas pelo template.

<script setup lang="ts">
defineProps<{ title: string; description: string }>();
</script>

<template>
  <h1>{{ title }}</h1>
  <p>{{ description }}</p>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/no-unused-refs

Reportar refs de template (ref="x") nunca referenciadas em <script>

Incorreto · Correto

Severidade padrão: warning
Predefinições: nuxt, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-unused-refs": "warn"
      }
    },
  },
});

vp run lint

Incorreto

O template declara o nome de ref unused sem uma variável de referência correspondente no script.

<template><input ref="unused" /></template>
<script setup>
const x = 1
</script>

Correto

A ref de template inputEl tem uma variável ref de mesmo nome em script setup.

<template><input ref="inputEl" /></template>
<script setup>
import { ref } from 'vue'
const inputEl = ref(null)
</script>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/no-unused-setup-bindings

Proibir variáveis de script setup que nunca são lidas

Incorreto · Correto

Severidade padrão: warning
Predefinições: none
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-unused-setup-bindings": "warn"
      }
    },
  },
});

vp run lint

Incorreto

A variável message de script setup nunca é lida pelo template.

<script setup>const message = "Hello";</script>
<template><p>Welcome</p></template>

Correto

O parágrafo interpola message, usando a variável declarada.

<script setup>const message = "Hello";</script>
<template><p>{{ message }}</p></template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/no-unused-vars

Proibir definições de variáveis não usadas nas diretivas v-for e v-slot

Incorreto · Correto

Severidade padrão: warning
Predefinições: essential, happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-unused-vars": "warn"
      }
    },
  },
});

vp run lint

Incorreto

O laço declara um index não usado e o slot declara foo sem referenciá-lo.

<template>
  <li v-for="(item, index) in items" :key="item.id">{{ item.name }}</li>
  <template v-slot="{ foo }">
    <span>Hello</span>
  </template>
</template>

Correto

Os exemplos usam index ou o marcam como intencionalmente não usado por meio de _index, e o slot renderiza data. Chaves de índice são apenas um exemplo de uso aqui, e não uma recomendação para manter a identidade estável dos itens.

<template>
  <li v-for="(item, index) in items" :key="index">{{ item.name }}</li>
  <li v-for="(item, _index) in items" :key="item.id">{{ item.name }}</li>
  <template v-slot="{ data }">
    <span>{{ data }}</span>
  </template>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

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

Proibir v-else-if ou v-else no mesmo elemento que v-for

Incorreto · Correto

Severidade padrão: warning
Predefinições: happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-use-v-else-with-v-for": "warn"
      }
    },
  },
});

vp run lint

Incorreto

O ramo else e a iteração v-for estão associados ao mesmo parágrafo.

<template>
<p v-if="ready">Ready</p>
<p v-else v-for="item in items" :key="item.id">{{ item.name }}</p>
</template>

Correto

Um template separado contém v-else, e seu parágrafo filho contém v-for.

<template>
<p v-if="ready">Ready</p>
<template v-else><p v-for="item in items" :key="item.id">{{ item.name }}</p></template>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

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

Proibir v-if no mesmo elemento que v-for

Incorreto · Correto

Severidade padrão: warning
Predefinições: essential, happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-use-v-if-with-v-for": "warn"
      }
    },
  },
});

vp run lint

Incorreto

O mesmo elemento de lista combina v-if e v-for e testa a visibilidade por meio da variável do laço.

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

Correto

Uma coleção computada filtra os itens visíveis antes que o template itere sobre eles.

<script setup lang="ts">
const visibleItems = computed(() => items.filter((item) => item.visible));
</script>

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

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/no-useless-mustaches

Proibir interpolação com chaves duplas cuja expressão seja uma string literal constante

Incorreto · Correto

Severidade padrão: warning
Predefinições: nuxt, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-useless-mustaches": "warn"
      }
    },
  },
});

vp run lint

Incorreto

A interpolação contém apenas uma string constante e não precisa avaliar uma expressão.

<template>
<div>{{ 'x' }}</div>
<div>{{ "x" }}</div>
<div>{{ `x` }}</div>
</template>

Correto

O texto literal é escrito diretamente; expressões com variáveis, strings de template interpoladas e espaços separadores intencionais continuam sendo casos de interpolação.

<template>
<div>x</div>
<div>{{ x }}</div>
<div>{{ `pre-${x}` }}</div>
<span>A</span> {{ " " }} <span>B</span>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/no-useless-template-attributes

Proibir atributos sem efeito em elementos <template>

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-useless-template-attributes": "error"
      }
    },
  },
});

vp run lint

Incorreto

O template condicional tem uma class, mas esse invólucro estrutural não renderiza um elemento DOM para recebê-la.

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

Correto

A class passa para o parágrafo que é realmente renderizado, enquanto v-if permanece no template estrutural.

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

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/no-useless-v-bind

Proibir um v-bind cujo valor seja uma string literal simples

Incorreto · Correto

Severidade padrão: warning
Predefinições: nuxt, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-useless-v-bind": "warn"
      }
    },
  },
});

vp run lint

Incorreto

A vinculação foo avalia uma string constante entre aspas ou uma string de template sem interpolação.

<template>
<div :foo="'bar'"></div>
<div :foo="`bar`"></div>
</template>

Correto

O valor constante vira um atributo estático; valores com variáveis e interpolações mantêm sua vinculação.

<template>
<div foo="bar"></div>
<div :foo="bar"></div>
<div :foo="`pre-${bar}`"></div>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

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

Proibir key no filho de um <template v-for>

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-v-for-template-key-on-child": "error"
      }
    },
  },
});

vp run lint

Incorreto

O parágrafo filho tem a key, enquanto a própria iteração template não tem chave.

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

Correto

A key passa para template v-for, identificando o fragmento repetido completo.

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

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/no-v-html

Alertar sobre v-html para prevenir vulnerabilidades XSS

Incorreto · Correto

Severidade padrão: warning
Predefinições: essential, happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-v-html": "warn"
      }
    },
  },
});

vp run lint

Incorreto

v-html interpreta content como HTML, em vez de texto comum.

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

Correto

A interpolação com chaves duplas exibe content como texto escapado, em vez de injetar HTML.

<template>
  <article>{{ content }}</article>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/no-v-text

Proibir a diretiva v-text; preferir interpolação com chaves duplas

Incorreto · Correto

Severidade padrão: warning
Predefinições: nuxt, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-v-text": "warn"
      }
    },
  },
});

vp run lint

Incorreto

O conteúdo da div é fornecido pela diretiva v-text.

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

Correto

A interpolação com chaves duplas expressa a mesma vinculação de texto diretamente no conteúdo do elemento.

<template>
<div>{{ message }}</div>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

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

Proibir v-text / v-html em elementos de componente

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-v-text-v-html-on-component": "error"
      }
    },
  },
});

vp run lint

Incorreto

A tag do componente recebe v-html ou v-text, que substitui o conteúdo do elemento em vez de fornecer slots ao componente.

<template>
  <MyComponent v-html="content" />
  <MyComponent v-text="content" />
</template>

Correto

Elementos HTML nativos podem receber as diretivas; MyComponent recebe seu conteúdo pelo slot padrão.

<template>
  <div v-html="content"></div>
  <component is="div" v-html="content" />
  <MyComponent>{{ content }}</MyComponent>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/permitted-contents

Aplicar as regras do modelo de conteúdo HTML

Incorreto · Correto

Severidade padrão: error
Predefinições: happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/permitted-contents": "error"
      }
    },
  },
});

vp run lint

Incorreto

Os exemplos colocam conteúdo em bloco dentro de p, omitem o corpo da tabela, aninham controles interativos ou colocam uma div diretamente dentro de ul.

<template>
  <p><div>block in a paragraph</div></p>
  <table><tr><td>row without tbody</td></tr></table>
  <a href="#"><button type="button">nested control</button></a>
  <ul><div>not a list item</div></ul>
</template>

Correto

Os exemplos usam conteúdo inline no parágrafo, um tbody explícito e filhos li. O componente personalizado MyItem não é tratado como um filho nativo conhecido de ul.

<template>
  <p><span>inline in a paragraph</span></p>
  <table><tbody><tr><td>cell</td></tr></tbody></table>
  <ul><li>list item</li><MyItem /></ul>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/prefer-props-shorthand

Recomendar sintaxe abreviada para props (Vue 3.4+)

Incorreto · Correto

Severidade padrão: warning
Predefinições: nuxt, opinionated
Correção automática: Disponível para os diagnósticos compatíveis
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/prefer-props-shorthand": "warn"
      }
    },
  },
});

vp run lint

Incorreto

Cada vinculação repete o nome da variável correspondente, inclusive o equivalente camelCase de um argumento separado por hífen.

<template>
  <MyComponent :foo="foo" />
  <MyComponent :user-name="userName" />
  <span :style="style" />
  <div :aria-label="ariaLabel" />
</template>

Correto

A forma abreviada de vinculação de mesmo nome do Vue 3.4+ remove as expressões repetidas; uma variável de origem diferente, como bar, permanece explícita.

<template>
  <MyComponent :foo />
  <MyComponent :user-name />
  <span :style />
  <div :aria-label />
  <MyComponent :foo="bar" />
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/prefer-true-attribute-shorthand

Preferir a forma abreviada para um atributo booleano vinculado a true

Incorreto · Correto

Severidade padrão: warning
Predefinições: nuxt, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/prefer-true-attribute-shorthand": "warn"
      }
    },
  },
});

vp run lint

Incorreto

Um atributo booleano nativo disabled vincula o valor constante true.

<template>
<input :disabled="true" />
</template>

Correto

O atributo nativo usa sua forma booleana abreviada. Vinculações false e props de componentes mantêm seus valores explícitos.

<template>
<input disabled />
<input :disabled="false" />
<MyComponent :visible="true" />
<MyComponent :visible="isVisible" />
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/prop-name-casing

Aplicar um padrão de maiúsculas e minúsculas aos nomes de props declaradas

Incorreto · Correto

Severidade padrão: warning
Predefinições: happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Verifica os nomes de props declaradas, e não o padrão de maiúsculas e minúsculas dos atributos passados a um filho.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/prop-name-casing": "warn"
      }
    },
  },
});

vp run lint

Incorreto

O nome de prop declarado user_name usa uma grafia separada por sublinhado.

<script setup lang="ts">
defineProps<{ user_name: string }>();
</script>
<template><p>{{ user_name }}</p></template>

Correto

A declaração e sua referência no template usam o nome camelCase userName.

<script setup lang="ts">
defineProps<{ userName: string }>();
</script>
<template><p>{{ userName }}</p></template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/require-component-is

Exigir v-bind:is em elementos <component>

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/require-component-is": "error"
      }
    },
  },
});

vp run lint

Incorreto

O <component> dinâmico não tem um destino is, então o Vue não pode escolher um componente para renderizar.

<template>
  <component />
</template>

Correto

:is="currentComponent" fornece a seleção do componente; a vinculação pode mudar durante a execução.

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

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/require-component-registration

Exigir importação ou registro explícito de componentes

Incorreto · Correto

Severidade padrão: warning
Predefinições: opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Consulte as opções tipadas e os valores padrão.

Liste nomes explícitos de componentes fornecidos por plugins da aplicação ou pelo previewSetup do Musea. Grafias PascalCase e kebab-case são aceitas; expressões regulares não são interpretadas. As opções não ativam a regra. Camadas posteriores substituem a lista; uma lista vazia remove os nomes herdados.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/require-component-registration": "warn"
      },
      "ruleOptions": {
        "vue/require-component-registration": {
          "globals": [
            "MyButton",
            "MyIcon"
          ]
        }
      }
    },
  },
});

vp run lint

Incorreto

MissingWidget não está registrado nem incluído na lista configurada de componentes globais permitidos.

<template>
<MissingWidget />
</template>

Correto

MyButton consta na opção globals do exemplo. Essa opção isenta um componente global conhecido; ela não o registra nem o importa.

<template>
<MyButton />
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/require-scoped-style

Exigir o atributo scoped nas tags style

Incorreto · Correto

Severidade padrão: warning
Predefinições: happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/require-scoped-style": "warn"
      }
    },
  },
});

vp run lint

Incorreto

O estilo .button não tem escopo e pode afetar elementos correspondentes fora deste componente.

<style>
.button {
  color: red;
}
</style>

Correto

Adicionar scoped aplica o escopo de componente do Vue ao mesmo seletor e às mesmas declarações.

<style scoped>
.button {
  color: red;
}
</style>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/require-toggle-inside-transition

Exigir uma alternância no elemento envolvido por <transition>

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/require-toggle-inside-transition": "error"
      }
    },
  },
});

vp run lint

Incorreto

O filho estático dentro de <Transition> não tem visibilidade condicional nem seleção dinâmica para provocar uma mudança de entrada ou saída.

<template>
<transition>
  <div>content</div>
</transition>
</template>

Correto

v-if="show" altera a existência do filho, fornecendo um limite de entrada ou saída à transição.

<template>
<transition>
  <div v-if="show">content</div>
</transition>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/require-v-for-key

Exigir v-bind:key nas diretivas v-for

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/require-v-for-key": "error"
      }
    },
  },
});

vp run lint

Incorreto

Cada <li> repetido não tem uma chave que identifique seu item correspondente durante atualizações da lista.

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

Correto

:key="item.id" dá a cada nó repetido a identidade do item, em vez de sua posição atual.

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

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/scoped-event-names

Recomendar nomes de eventos com escopo no formato context:event

Incorreto · Correto

Severidade padrão: warning
Predefinições: nuxt, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/scoped-event-names": "warn"
      }
    },
  },
});

vp run lint

Incorreto

playAudio, pauseAudio e reloadAudio codificam seu escopo como sufixos camelCase, em vez de seguir a convenção de eventos separados por dois-pontos da regra.

<template>
  <AudioPlayer
    @playAudio="play"
    @pauseAudio="pause"
    @reloadAudio="reload"
  />
</template>

Correto

audio:play, audio:pause e audio:reload compartilham um escopo explícito audio:. O componente emissor deve usar os mesmos nomes.

<template>
  <AudioPlayer
    @audio:play="play"
    @audio:pause="pause"
    @audio:reload="reload"
  />
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/sfc-element-order

Aplicar uma ordem consistente aos elementos de nível superior dos SFCs

Incorreto · Correto

Severidade padrão: warning
Predefinições: happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Consulte as opções tipadas e os valores padrão.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/sfc-element-order": "warn"
      }
    },
  },
});

vp run lint

Incorreto

O bloco style precede o bloco script, contrariando a ordem configurada dos blocos do SFC.

<style scoped>
.panel {
  color: red;
}
</style>
<script setup lang="ts">
const label = "Save";
</script>

Correto

Os blocos seguem script → template → style. Projetos podem escolher outra ordem pela opção tipada desta regra.

<script setup lang="ts">
const label = "Save";
</script>

<template>
  <p>{{ label }}</p>
</template>

<style scoped>
p {
  color: red;
}
</style>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/single-style-block

Recomendar um único bloco style

Incorreto · Correto

Severidade padrão: warning
Predefinições: happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/single-style-block": "warn"
      }
    },
  },
});

vp run lint

Incorreto

O componente divide seus estilos com escopo de panel e title entre dois blocos style.

<style scoped>
.panel {
  color: red;
}
</style>

<style scoped>
.title {
  color: blue;
}
</style>

Correto

Os dois seletores mantêm o escopo em um único bloco style, atendendo à convenção de bloco único sem remover nenhum estilo.

<style scoped>
.panel {
  color: red;
}
.title {
  color: blue;
}
</style>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/slot-name-casing

Exigir kebab-case nos slots nomeados usados por v-slot

Incorreto · Correto

Severidade padrão: warning
Predefinições: nuxt, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/slot-name-casing": "warn"
      }
    },
  },
});

vp run lint

Incorreto

O slot nomeado mySlot usa camelCase onde a regra exige um nome separado por hífen.

<template>
<MyCard><template #mySlot>Content</template></MyCard>
</template>

Correto

#my-slot usa kebab-case. Renomeie o ponto de inserção do slot correspondente para o mesmo nome.

<template>
<MyCard><template #my-slot>Content</template></MyCard>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/this-in-template

Proibir this. nas expressões do template

Incorreto · Correto

Severidade padrão: warning
Predefinições: happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/this-in-template": "warn"
      }
    },
  },
});

vp run lint

Incorreto

As expressões do template acessam explicitamente this.message, this.className e this.handleClick, embora o Vue exponha essas variáveis diretamente.

<template>
<div>{{ this.message }}</div>
<div :class="this.className"></div>
<button @click="this.handleClick()"></button>
</template>

Correto

Use message, className e handleClick diretamente. A string literal 'this.is.a.string' permanece igual porque não é um acesso a membro.

<template>
<div>{{ message }}</div>
<div :class="className"></div>
<button @click="handleClick()"></button>
<div>{{ 'this.is.a.string' }}</div>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/use-unique-element-ids

Exigir IDs de elementos únicos por meio de useId(), em vez de literais estáticos

Incorreto · Correto

Severidade padrão: warning
Predefinições: nuxt, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/use-unique-element-ids": "warn"
      }
    },
  },
});

vp run lint

Incorreto

O ID literal email é reutilizado por todas as instâncias deste componente, o que pode direcionar seu rótulo ao elemento errado quando várias instâncias são renderizadas.

<template>
  <label for="email">Email</label>
  <input id="email" />
</template>

Correto

useId() produz o emailId da instância; vincule o mesmo valor ao for do rótulo e ao id do input.

<script setup>
import { useId } from "vue";

const emailId = useId();
</script>

<template>
  <label :for="emailId">Email</label>
  <input :id="emailId" />
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/use-v-on-exact

Exigir o modificador .exact em v-on quando houver manipuladores baseados em modificadores

Incorreto · Correto

Severidade padrão: warning
Predefinições: essential, happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Quando os manipuladores se sobrepõem

A regra compara listeners do mesmo evento em um elemento nativo. Ela ignora eventos de componentes personalizados, a menos que ambos os listeners usem .native. Nomes de eventos diferentes e filtros de teclado sem teclas em comum não entram em conflito.

Os modificadores de sistema indicam teclas que precisam estar pressionadas, então @keydown.alt.shift também aceita Ctrl+Alt+Shift. Se um segundo manipulador usar @keydown.alt.ctrl.shift, adicione .exact ao manipulador mais abrangente para manter essas ações separadas. .exact permite os modificadores de sistema declarados e rejeita teclas Ctrl, Shift, Alt ou Meta adicionais.

Vários modificadores de teclado são alternativas: @keydown.up.down aceita qualquer uma das duas teclas de seta. Ele pode se sobrepor a @keydown.ctrl.down em Ctrl+SetaParaBaixo. A regra reporta a chave da diretiva que precisa de .exact, excluindo sua expressão de manipulador.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/use-v-on-exact": "warn"
      }
    },
  },
});

vp run lint

Incorreto

O manipulador de clique comum também pode executar em Ctrl-clique, sobrepondo-se ao manipulador separado .ctrl.

<template>
  <button type="button" @click="handleClick" @click.ctrl="handleCtrlClick">
    Save
  </button>
</template>

Correto

.exact limita o manipulador de clique comum a cliques sem teclas modificadoras; o manipulador específico de Ctrl permanece separado.

<template>
  <button
    type="button"
    @click.exact="handleClick"
    @click.ctrl="handleCtrlClick"
  >
    Save
  </button>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/v-bind-style

Aplicar um padrão de sintaxe à diretiva v-bind

Incorreto · Correto

Severidade padrão: warning
Predefinições: happy-path, nuxt, ecosystem, opinionated
Correção automática: Disponível para os diagnósticos compatíveis
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Consulte as opções tipadas e os valores padrão.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/v-bind-style": "warn"
      }
    },
  },
});

vp run lint

Incorreto

v-bind:class usa a forma longa onde o padrão de vinculação configurado exige a forma abreviada com dois-pontos.

<template>
  <div v-bind:class="panelClass"></div>
</template>

Correto

:class mantém a mesma expressão com a forma abreviada exigida; esta regra trata da grafia, e não do tipo do valor.

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

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/v-on-event-hyphenation

Exigir hífens nos nomes de eventos personalizados em v-on de componentes

Incorreto · Correto

Severidade padrão: warning
Predefinições: happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Consulte as opções tipadas e os valores padrão.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/v-on-event-hyphenation": "warn"
      }
    },
  },
});

vp run lint

Incorreto

O listener do componente personalizado usa @myEvent em vez de um nome de evento separado por hífen.

<template>
<MyComponent @myEvent="handler" />
<MyComponent v-on:myEvent="handler" />
</template>

Correto

@my-event usa a grafia exigida para eventos personalizados. Os listeners em elementos nativos e os argumentos de evento dinâmicos mostrados abaixo ficam fora desta verificação.

<template>
<MyComponent @my-event="handler" />
<div @myEvent="handler" />
<MyComponent @[dynamicEvent]="handler" />
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/v-on-handler-style

Exigir manipuladores de v-on escritos como referência a método ou função inline

Incorreto · Correto

Severidade padrão: warning
Predefinições: nuxt, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/v-on-handler-style": "warn"
      }
    },
  },
});

vp run lint

Incorreto

Os manipuladores colocam mutações e várias instruções diretamente no atributo de evento.

<template>
<button @click="count++"></button>
<button @click="doThis(); doThat()"></button>
<button @click="foo = bar"></button>
</template>

Correto

Use uma referência a manipulador ou uma expressão de função, comum ou de seta, quando for necessária lógica inline. O limite da função torna explícita a forma do manipulador.

<template>
<button @click="handler"></button>
<button @click="foo.bar"></button>
<button @click="() => count++"></button>
<button @click="function () { count++ }"></button>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/v-on-style

Aplicar um padrão de sintaxe à diretiva v-on

Incorreto · Correto

Severidade padrão: warning
Predefinições: happy-path, nuxt, ecosystem, opinionated
Correção automática: Disponível para os diagnósticos compatíveis
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Consulte as opções tipadas e os valores padrão.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/v-on-style": "warn"
      }
    },
  },
});

vp run lint

Incorreto

v-on:click usa a forma longa de listener de evento onde a regra exige a forma abreviada.

<template>
  <div v-on:click="handleClick"></div>
</template>

Correto

@click mantém o mesmo manipulador e usa a forma abreviada configurada.

<template>
  <div @click="handleClick"></div>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/v-slot-style

Aplicar um padrão de sintaxe à diretiva v-slot

Incorreto · Correto

Severidade padrão: warning
Predefinições: happy-path, nuxt, ecosystem, opinionated
Correção automática: Disponível para os diagnósticos compatíveis
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Consulte as opções tipadas e os valores padrão.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/v-slot-style": "warn"
      }
    },
  },
});

vp run lint

Incorreto

O componente usa #default e o template usa v-slot:header, contrariando os padrões da regra para cada contexto.

<template>
  <MyComponent #default="props">{{ props.item }}</MyComponent>
  <MyComponent>
    <template v-slot:header>Header</template>
  </MyComponent>
</template>

Correto

Use v-slot para o slot padrão do componente e #header para o slot nomeado do template.

<template>
  <MyComponent v-slot="props">{{ props.item }}</MyComponent>
  <MyComponent>
    <template #header>Header</template>
  </MyComponent>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/valid-attribute-name

Exigir nomes de atributos válidos

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Diagnóstico do exemplo incorreto: parser/template

A grafia malformada de um atributo é diagnosticada por parser/template antes que esta regra defensiva veja um atributo. Portanto, Bad reporta parser/template; não promete uma ocorrência separada de vue/valid-attribute-name.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/valid-attribute-name": "error"
      }
    },
  },
});

vp run lint

Incorreto

A aspa dentro de my"attr torna o nome do atributo malformado. Este exemplo produz o diagnóstico parser/template do parser, sem prometer um diagnóstico separado da regra.

<template>
<div my"attr="value"></div>
</template>

Correto

my-attr é um nome de atributo bem formado, então o parser do template pode ler o atributo e seu valor.

<template>
<div my-attr="value"></div>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/valid-template-root

Exigir uma raiz <template> válida para a semântica de fragmentos do Vue 3

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/valid-template-root": "error"
      }
    },
  },
});

vp run lint

Incorreto

Um <template> aninhado comum ocupa a raiz do template sem uma diretiva que lhe dê uma função de renderização.

<template>
  <template>content</template>
</template>

Correto

A <div> é um elemento raiz renderizável. Este exemplo não impõe uma restrição universal de raiz única aos fragmentos do Vue 3.

<template>
  <div>content</div>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/valid-v-bind

Exigir diretivas v-bind válidas

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/valid-v-bind": "error"
      }
    },
  },
});

vp run lint

Incorreto

O v-bind sem argumento não tem uma expressão de objeto, e a forma com argumento vazio não tem um nome de atributo.

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

Correto

Forneça um atributo e uma expressão, vincule um objeto ou use a forma abreviada de mesmo nome do Vue 3.4+, como :loading.

<template>
  <div :class="panelClass"></div>
  <div v-bind="{ class: panelClass }"></div>
  <div :loading></div>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/valid-v-cloak

Exigir diretivas v-cloak válidas

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/valid-v-cloak": "error"
      }
    },
  },
});

vp run lint

Incorreto

v-cloak recebe um valor, argumento ou modificador, embora não aceite nenhum deles.

<template>
<div v-cloak="foo"></div>
<div v-cloak:arg></div>
<div v-cloak.mod></div>
</template>

Correto

Use v-cloak sozinho; CSS pode ocultar o elemento até que o Vue remova esse atributo após a montagem.

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

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/valid-v-else

Exigir diretivas v-else válidas

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, nuxt, ecosystem, opinionated
Correção automática: Disponível para os diagnósticos compatíveis
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/valid-v-else": "error"
      }
    },
  },
});

vp run lint

Incorreto

Os exemplos atribuem uma expressão a v-else, combinam-no com v-if ou omitem o ramo condicional adjacente que deve precedê-lo.

<template>
  <div v-else="ready"></div>
  <div v-else v-if="ready"></div>
  <div v-else></div>
</template>

Correto

Coloque v-else sozinho imediatamente após o ramo v-if correspondente.

<template>
  <div v-if="ready"></div>
  <div v-else></div>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/valid-v-else-if

Exigir diretivas v-else-if válidas

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/valid-v-else-if": "error"
      }
    },
  },
});

vp run lint

Incorreto

Os exemplos deixam v-else-if sem um ramo condicional anterior ou sem condição, ou lhe dão um argumento ou modificador.

<template>
<div v-else-if="foo"></div> <!-- without preceding v-if -->
<div v-if="foo"></div><div v-else-if></div>
<div v-if="foo"></div><div v-else-if:arg="bar"></div>
<div v-if="foo"></div><div v-else-if.mod="bar"></div>
</template>

Correto

Coloque v-else-if com uma condição imediatamente após o ramo v-if ou v-else-if que ele continua.

<template>
<div v-if="foo"></div>
<div v-else-if="bar"></div>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/valid-v-for

Exigir diretivas v-for válidas

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/valid-v-for": "error"
      }
    },
  },
});

vp run lint

Incorreto

Os laços omitem a expressão de iteração ou adicionam o modificador .stop, que não é aceito.

<template>
  <div v-for></div>
  <div v-for=""></div>
  <div v-for.stop="item in items"></div>
</template>

Correto

Use item in items ou (item, index) of items com uma expressão de iteração completa e as chaves mostradas.

<template>
  <div v-for="item in items" :key="item.id"></div>
  <div v-for="(item, index) of items" :key="index"></div>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/valid-v-html

Exigir diretivas v-html válidas

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/valid-v-html": "error"
      }
    },
  },
});

vp run lint

Incorreto

v-html não tem sua expressão ou usa um argumento ou modificador que esta diretiva não aceita.

<template>
<div v-html></div>
<div v-html:arg="foo"></div>
<div v-html.mod="foo"></div>
</template>

Correto

v-html="html" fornece uma expressão válida. A validade sintática não sanitiza HTML nem torna seguro conteúdo não confiável.

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

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/valid-v-if

Exigir diretivas v-if válidas

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/valid-v-if": "error"
      }
    },
  },
});

vp run lint

Incorreto

As condições omitem uma expressão ou combinam v-if com uma diretiva else no mesmo nó.

<template>
  <div v-if></div>
  <div v-if=""></div>
  <div v-if="ready" v-else></div>
</template>

Correto

Cada v-if tem uma condição não vazia, como ready ou count > 0, sem uma diretiva else incompatível.

<template>
  <div v-if="ready"></div>
  <div v-if="count > 0"></div>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/valid-v-is

Exigir diretivas v-is válidas

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/valid-v-is": "error"
      }
    },
  },
});

vp run lint

Incorreto

v-is tem um argumento ou modificador, não tem valor, ou está em um componente em vez de um elemento HTML nativo.

<template>
<tr v-is:arg="'MyRow'"></tr>
<tr v-is.mod="'MyRow'"></tr>
<tr v-is></tr>
<MyComponent v-is="'MyRow'" />
</template>

Correto

v-is com um valor em um elemento nativo como <tr> indica o componente a renderizar em seu lugar.

<template>
<tr v-is="'MyRow'"></tr>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/valid-v-memo

Exigir diretivas v-memo válidas

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/valid-v-memo": "error"
      }
    },
  },
});

vp run lint

Incorreto

v-memo sozinho não fornece ao Vue uma expressão de dependências para decidir quando reutilizar a subárvore.

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

Correto

v-memo="[valueA, valueB]" fornece o array de dependências usado para memorização.

<template>
  <div v-memo="[valueA, valueB]">{{ label }}</div>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/valid-v-model

Exigir diretivas v-model válidas

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/valid-v-model": "error"
      }
    },
  },
});

vp run lint

Incorreto

Uma <div> nativa não pode usar v-model como controle de formulário, e uma diretiva de input sem valor não tem uma expressão de destino gravável.

<template>
  <div v-model="value"></div>
  <input v-model />
</template>

Correto

Vincule o input, select, textarea ou componente personalizado às variáveis graváveis mostradas.

<template>
  <input v-model="value" />
  <select v-model="selected"></select>
  <textarea v-model="text"></textarea>
  <MyInput v-model="value" />
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/valid-v-on

Exigir diretivas v-on válidas

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Consulte as opções tipadas e os valores padrão.

Validação de modificadores

Modificadores não suportados são reportados individualmente no nome do modificador, inclusive na forma longa v-on:click, em argumentos de evento dinâmicos e na sintaxe de objeto de listeners. Os nomes aceitos correspondem aos do eslint-plugin-vue 10.9.2: modificadores de evento nativos do Vue, a tabela completa de aliases de teclas, qualquer ponto de código Unicode único e nomes com um prefixo inteiro decimal finito (conforme a semântica de Number.parseInt(name, 10) do JavaScript). Por exemplo, .13suffix é aceito por esta regra. Os diagnósticos de descontinuação de códigos numéricos de teclas e de migração de .native pertencem a regras separadas.

Apenas .stop e .prevent têm efeito sem um manipulador. Um modificador como .once, .enter ou um nome personalizado configurado ainda precisa de uma expressão de manipulador.

Projetos com tratamento personalizado de eventos podem adicionar nomes em vue.linter.ruleOptions:

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({}).withVue({
  linter: {
    rules: { "vue/valid-v-on": "error" },
    ruleOptions: { "vue/valid-v-on": { modifiers: ["custom"] } },
  },
});

Isso permite @click.custom="handler". Os nomes devem corresponder exatamente e diferenciam maiúsculas de minúsculas; as opções complementam os nomes nativos e não ativam uma regra desativada. Entradas de configuração com escopo específico podem substituir os nomes herdados por uma nova lista ou redefini-los com [].

A tabela de teclas é adaptada dos aliases de teclas do eslint-plugin-vue, licenciados sob a MIT. Seu código-fonte e sua licença são preservados junto à implementação.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/valid-v-on": "error"
      },
      "ruleOptions": {
        "vue/valid-v-on": {
          "modifiers": [
            "custom"
          ]
        }
      }
    },
  },
});

vp run lint

Incorreto

As formas de listener omitem um argumento de evento ou a expressão obrigatória de manipulador ou objeto.

<template>
  <div v-on></div>
  <div @></div>
  <div @click></div>
  <div @click.sync="handleClick"></div>
  <div @click.nativeish="handleClick"></div>
  <div @click.once></div>
</template>

Correto

Use um evento com seu manipulador ou passe um objeto de listeners para v-on sem argumento.

<template>
  <div @click="handleClick"></div>
  <form @submit.prevent></form>
  <input @keyup.page-down="handlePageDown" />
  <input @keyup.あ="handleKey" />
  <div v-on="{ click: handleClick }"></div>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/valid-v-once

Exigir diretivas v-once válidas

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/valid-v-once": "error"
      }
    },
  },
});

vp run lint

Incorreto

v-once tem um valor, argumento ou modificador, embora esta diretiva seja um marcador sem valor para renderização única.

<template>
<div v-once="foo"></div>
<div v-once:arg></div>
<div v-once.mod></div>
</template>

Correto

v-once sozinho marca a subárvore para renderização única, sem sintaxe não suportada.

<template>
<div v-once></div>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/valid-v-pre

Exigir diretivas v-pre válidas

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/valid-v-pre": "error"
      }
    },
  },
});

vp run lint

Incorreto

v-pre tem um argumento, modificador ou valor, embora esta diretiva seja um marcador sem valor que ignora a compilação.

<template>
<div v-pre:arg></div>
<div v-pre.mod></div>
<div v-pre="foo"></div>
</template>

Correto

v-pre sozinho deixa a subárvore sem compilar, então suas interpolações são exibidas como escritas.

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

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/valid-v-show

Exigir diretivas v-show válidas

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/valid-v-show": "error"
      }
    },
  },
});

vp run lint

Incorreto

v-show não tem sua expressão de visibilidade ou é colocado em um <template> que não tem um elemento DOM cujo display possa ser alterado.

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

Correto

Aplique a expressão de visibilidade a um elemento renderizado, como <div>.

<template>
  <div v-show="ready"></div>
  <div v-show="count > 0"></div>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/valid-v-slot

Exigir diretivas v-slot válidas

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Consulte as opções tipadas e os valores padrão.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/valid-v-slot": "error"
      }
    },
  },
});

vp run lint

Incorreto

A diretiva de slot está em uma <div> nativa ou entra em conflito com outras declarações de slots padrão ou nomeados.

<template>
  <div v-slot:header></div>
  <MyComponent v-slot v-slot:header />
  <template v-slot:header v-slot:footer />
</template>

Correto

Declare o slot padrão de um componente nele próprio, ou seu slot nomeado em um filho <template #header>.

<template>
  <MyComponent v-slot="{ item }">{{ item }}</MyComponent>
  <MyComponent>
    <template #header>Header</template>
  </MyComponent>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/valid-v-text

Exigir diretivas v-text válidas

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/valid-v-text": "error"
      }
    },
  },
});

vp run lint

Incorreto

v-text não tem sua expressão de texto ou usa um argumento ou modificador que não é aceito.

<template>
<div v-text></div>
<div v-text:arg="foo"></div>
<div v-text.mod="foo"></div>
</template>

Correto

v-text="msg" é sintaticamente válido. A regra de estilo separada vue/no-v-text ainda pode preferir interpolação.

<template>
<div v-text="msg"></div>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/warn-custom-block

Alertar sobre blocos personalizados em arquivos SFC

Incorreto · Correto

Severidade padrão: warning
Predefinições: nuxt, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/warn-custom-block": "warn"
      }
    },
  },
});

vp run lint

Incorreto

O SFC contém um bloco personalizado <i18n>, que precisa de uma integração externa além do processamento comum de template, script e style.

<i18n>
{ "en": { "hello": "Hello" } }
</i18n>

<template>
  <p>{{ hello }}</p>
</template>

Correto

O exemplo usa blocos padrão de template e script setup. Este aviso opcional de portabilidade não significa que todo bloco personalizado seja inválido no Vue.

<template>
  <p>{{ hello }}</p>
</template>

<script setup lang="ts">
const hello = "Hello";
</script>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

vue/warn-custom-directive

Alertar sobre diretivas personalizadas que precisam de registro

Incorreto · Correto

Severidade padrão: warning
Predefinições: nuxt, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/warn-custom-directive": "warn"
      }
    },
  },
});

vp run lint

Incorreto

v-focus, v-mask e v-click-outside exigem implementações de diretivas específicas do projeto, que esta convenção opcional sinaliza.

<template>
  <input v-focus />
  <input v-mask="'###-####'" />
  <div v-click-outside="handleClose"></div>
</template>

Correto

O exemplo usa as diretivas nativas v-if, v-model e v-on. Uma diretiva personalizada registrada corretamente ainda pode ser válida no Vue quando esta política estiver desativada.

<template>
  <div v-if="ready"></div>
  <input v-model="value" />
  <button type="button" @click="onClick">Save</button>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras