Ecosystem rules

Every rule on this page includes its purpose, prerequisites, configuration, and complete Bad/Good examples. Highlighted lines show what changes; copying an example gives you the complete source. Each rule also states its current support limits.

All rules · Rule Options · ESLint migration map · Project checks · Attributes across components

ecosystem/nuxt-prefer-nuxt-link

Prefer NuxtLink for internal application links

Bad · Good

Default severity: warning
Presets: nuxt
Automatic fix: None; review the suggested change
Applies to: Vue SFC templates and blocks, with script context where the rule requires it
Options: No rule-specific options. Severity and preset selection are configurable.

Configuration (Vite+)

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

export default defineConfig({
  lint: {
    vize: {
      "preset": "incremental",
      "rules": {
        "ecosystem/nuxt-prefer-nuxt-link": "warn"
      }
    },
  },
});

vp run lint

Bad

The internal settings destination uses a plain anchor in a Nuxt application.

<template>
  <a href="/settings">Settings</a>
</template>

Good

NuxtLink handles the same internal destination through the Nuxt router.

<template>
  <NuxtLink to="/settings">Settings</NuxtLink>
</template>

Good avoids this rule's finding under the configuration above; other rules may still report diagnostics.

Implementation · All rules

ecosystem/pinia-prefer-store-to-refs

Prefer storeToRefs() when destructuring Pinia stores

Bad · Good

Default severity: warning
Presets: ecosystem
Automatic fix: None; review the suggested change
Applies to: JS/TS scripts in Vue SFCs; examples show the relevant Options API or script setup form
Options: No rule-specific options. Severity and preset selection are configurable.

Configuration (Vite+)

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

export default defineConfig({
  lint: {
    vize: {
      "preset": "incremental",
      "rules": {
        "ecosystem/pinia-prefer-store-to-refs": "warn"
      }
    },
  },
});

vp run lint

Bad

Destructuring name directly from the store separates the value from its reactive store access.

<script setup lang="ts">
const { name } = useUserStore();
</script>

Good

The store remains intact and storeToRefs creates a reactive reference for name.

<script setup lang="ts">
const store = useUserStore();
const { name } = storeToRefs(store);
</script>

Good avoids this rule's finding under the configuration above; other rules may still report diagnostics.

Implementation · All rules

ecosystem/router-link-require-to

Require a to target on RouterLink and NuxtLink components

Bad · Good

Default severity: error
Presets: ecosystem
Automatic fix: None; review the suggested change
Applies to: Vue SFC templates and blocks, with script context where the rule requires it
Options: No rule-specific options. Severity and preset selection are configurable.

A single SFC root link may inherit its target from parent attributes. This example uses a nested link, whose target must be explicit.

Configuration (Vite+)

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

export default defineConfig({
  lint: {
    vize: {
      "preset": "incremental",
      "rules": {
        "ecosystem/router-link-require-to": "error"
      }
    },
  },
});

vp run lint

Bad

The nested RouterLink has no to destination; it cannot rely on root attribute fallthrough.

<template>
<nav><RouterLink>Settings</RouterLink></nav>
</template>

Good

to="/settings" explicitly supplies the nested link destination.

<template>
<nav><RouterLink to="/settings">Settings</RouterLink></nav>
</template>

Good avoids this rule's finding under the configuration above; other rules may still report diagnostics.

Implementation · All rules

ecosystem/void-link-require-href

Require href on Void Vue Link components

Bad · Good

Default severity: error
Presets: ecosystem
Automatic fix: None; review the suggested change
Applies to: Vue SFC templates and blocks, with script context where the rule requires it
Options: No rule-specific options. Severity and preset selection are configurable.

Configuration (Vite+)

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

export default defineConfig({
  lint: {
    vize: {
      "preset": "incremental",
      "rules": {
        "ecosystem/void-link-require-href": "error"
      }
    },
  },
});

vp run lint

Bad

The Link imported from @void/vue omits its href destination.

<script setup>
import { Link } from "@void/vue";
</script>

<template>
  <Link>Settings</Link>
</template>

Good

The same imported Link receives the settings destination through href.

<script setup>
import { Link } from "@void/vue";
</script>

<template>
  <Link href="/settings">Settings</Link>
</template>

Good avoids this rule's finding under the configuration above; other rules may still report diagnostics.

Implementation · All rules

ecosystem/void-link-valid-method

Validate static Void Vue Link method props

Bad · Good

Default severity: warning
Presets: ecosystem
Automatic fix: None; review the suggested change
Applies to: Vue SFC templates and blocks, with script context where the rule requires it
Options: No rule-specific options. Severity and preset selection are configurable.

Configuration (Vite+)

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

export default defineConfig({
  lint: {
    vize: {
      "preset": "incremental",
      "rules": {
        "ecosystem/void-link-valid-method": "warn"
      }
    },
  },
});

vp run lint

Bad

The DELETE action requests prefetching, although prefetch is intended for navigation requests.

<script setup>
import { Link } from "@void/vue";
</script>

<template>
  <Link href="/posts/1" method="DELETE" prefetch>Delete</Link>
</template>

Good

Removing prefetch keeps the DELETE action without prefetching that non-GET request.

<script setup>
import { Link } from "@void/vue";
</script>

<template>
  <Link href="/posts/1" method="DELETE">Delete</Link>
</template>

Good avoids this rule's finding under the configuration above; other rules may still report diagnostics.

Implementation · All rules

ecosystem/vue-i18n-no-missing-key

Report static vue-i18n keys that are absent from local SFC messages

Bad · Good

Default severity: warning
Presets: ecosystem
Automatic fix: None; review the suggested change
Applies to: Vue SFC templates and blocks, with script context where the rule requires it
Options: No rule-specific options. Severity and preset selection are configurable.

Configuration (Vite+)

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

export default defineConfig({
  lint: {
    vize: {
      "preset": "incremental",
      "rules": {
        "ecosystem/vue-i18n-no-missing-key": "warn"
      }
    },
  },
});

vp run lint

Bad

The template requests auth.missing, but the local English messages declare only auth.login.

<template>{{ $t("auth.missing") }}</template>

<i18n lang="json">
{ "en": { "auth": { "login": "Log in" } } }
</i18n>

Good

The template requests the auth.login key that exists in the local messages.

<template>{{ $t("auth.login") }}</template>

<i18n lang="json">
{ "en": { "auth": { "login": "Log in" } } }
</i18n>

Good avoids this rule's finding under the configuration above; other rules may still report diagnostics.

Implementation · All rules

ecosystem/vue-router-prefer-named-link

Prefer named route objects over static path strings in RouterLink

Bad · Good

Default severity: warning
Presets: ecosystem
Automatic fix: None; review the suggested change
Applies to: Vue SFC templates and blocks, with script context where the rule requires it
Options: No rule-specific options. Severity and preset selection are configurable.

Configuration (Vite+)

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

export default defineConfig({
  lint: {
    vize: {
      "preset": "incremental",
      "rules": {
        "ecosystem/vue-router-prefer-named-link": "warn"
      }
    },
  },
});

vp run lint

Bad

The RouterLink destination is a literal path rather than a named route.

<template>
  <RouterLink to="/settings">Settings</RouterLink>
</template>

Good

The bound route object identifies the destination by its settings route name.

<template>
  <RouterLink :to="{ name: 'settings' }">Settings</RouterLink>
</template>

Good avoids this rule's finding under the configuration above; other rules may still report diagnostics.

Implementation · All rules

ecosystem/vue-router-prefer-named-push

Prefer named route objects for Vue Router programmatic navigation

Bad · Good

Default severity: warning
Presets: ecosystem
Automatic fix: None; review the suggested change
Applies to: JS/TS scripts in Vue SFCs; examples show the relevant Options API or script setup form
Options: No rule-specific options. Severity and preset selection are configurable.

Configuration (Vite+)

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

export default defineConfig({
  lint: {
    vize: {
      "preset": "incremental",
      "rules": {
        "ecosystem/vue-router-prefer-named-push": "warn"
      }
    },
  },
});

vp run lint

Bad

router.push receives a path string that is tied to the current URL spelling.

<script setup lang="ts">
router.push("/settings");
</script>

Good

router.push receives a route object with the stable settings name.

<script setup lang="ts">
router.push({ name: "settings" });
</script>

Good avoids this rule's finding under the configuration above; other rules may still report diagnostics.

Implementation · All rules

ecosystem/vue-test-utils-no-html-snapshot

Avoid snapshotting wrapper.html() in Vue Test Utils tests

Bad · Good

Default severity: warning
Presets: ecosystem
Automatic fix: None; review the suggested change
Applies to: JS/TS scripts in Vue SFCs; examples show the relevant Options API or script setup form
Options: No rule-specific options. Severity and preset selection are configurable.

Configuration (Vite+)

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

export default defineConfig({
  lint: {
    vize: {
      "preset": "incremental",
      "rules": {
        "ecosystem/vue-test-utils-no-html-snapshot": "warn"
      }
    },
  },
});

vp run lint

Bad

The assertion snapshots the complete wrapper HTML instead of checking the expected behavior.

<script setup lang="ts">
expect(wrapper.html()).toMatchSnapshot();
</script>

Good

The assertion checks that the rendered text contains Saved.

<script setup lang="ts">
expect(wrapper.text()).toContain("Saved");
</script>

Good avoids this rule's finding under the configuration above; other rules may still report diagnostics.

Implementation · All rules

nuxt/no-nuxt-config-test-key

Disallow setting test key in Nuxt config

Bad · Good

Default severity: error
Presets: nuxt
Automatic fix: None; review the suggested change
Applies to: Nuxt configuration files (nuxt.config.ts)
Options: No rule-specific options. Severity and preset selection are configurable.

Configuration (Vite+)

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

export default defineConfig({
  lint: {
    vize: {
      "preset": "incremental",
      "rules": {
        "nuxt/no-nuxt-config-test-key": "error"
      }
    },
  },
});

vp run lint

Bad

The exported Nuxt config sets the identifier key test to the boolean true, the obsolete config shape this rule rejects.

nuxt.config.ts

export default defineNuxtConfig({ test: true });

Good

The empty config removes that boolean test property. This example does not forbid a test configuration object.

nuxt.config.ts

export default defineNuxtConfig({});

Good avoids this rule's finding under the configuration above; other rules may still report diagnostics.

Implementation · All rules

nuxt/no-page-meta-runtime-values

Disallow runtime context values inside definePageMeta at the eager level, which is extracted into a separate chunk at build time and runs before component setup

Bad · Good

Default severity: error
Presets: nuxt
Automatic fix: None; review the suggested change
Applies to: JS/TS scripts in Vue SFCs; examples show the relevant Options API or script setup form
Options: No rule-specific options. Severity and preset selection are configurable.

Configuration (Vite+)

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

export default defineConfig({
  lint: {
    vize: {
      "preset": "incremental",
      "rules": {
        "nuxt/no-page-meta-runtime-values": "error"
      }
    },
  },
});

vp run lint

Bad

useRoute() is evaluated immediately while building the definePageMeta object, although the macro hoists that metadata outside the setup runtime context.

<script setup lang="ts">
definePageMeta({ title: useRoute() });
</script>

Good

validate receives a callback, so its useRoute().params.id access is deferred until the callback runs. The rule distinguishes deferred function bodies from eager metadata values.

<script setup lang="ts">
definePageMeta({ validate: () => Boolean(useRoute().params.id) });
</script>

Good avoids this rule's finding under the configuration above; other rules may still report diagnostics.

Implementation · All rules

nuxt/nuxt-config-keys-order

Prefer recommended order of Nuxt config properties

Bad · Good

Default severity: error
Presets: nuxt
Automatic fix: Available for supported findings
Applies to: Nuxt configuration files (nuxt.config.ts)
Options: No rule-specific options. Severity and preset selection are configurable.

Configuration (Vite+)

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

export default defineConfig({
  lint: {
    vize: {
      "preset": "incremental",
      "rules": {
        "nuxt/nuxt-config-keys-order": "error"
      }
    },
  },
});

vp run lint

Bad

The config places ssr before modules, reversing their order in the rule’s recommended Nuxt config key sequence.

nuxt.config.ts

export default defineNuxtConfig({ ssr: true, modules: [] });

Good

Putting modules before ssr preserves both values while satisfying the prescribed order; the repair changes layout rather than either option’s meaning.

nuxt.config.ts

export default defineNuxtConfig({ modules: [], ssr: true });

Good avoids this rule's finding under the configuration above; other rules may still report diagnostics.

Implementation · All rules

nuxt/prefer-import-meta

Prefer using import.meta.* over process.*

Bad · Good

Default severity: error
Presets: nuxt
Automatic fix: Available for supported findings
Applies to: JS/TS scripts in Vue SFCs; examples show the relevant Options API or script setup form
Options: No rule-specific options. Severity and preset selection are configurable.

Configuration (Vite+)

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

export default defineConfig({
  lint: {
    vize: {
      "preset": "incremental",
      "rules": {
        "nuxt/prefer-import-meta": "error"
      }
    },
  },
});

vp run lint

Bad

process.client uses a legacy Nuxt environment flag that the rule asks to migrate to import.meta.

<script setup lang="ts">
if (process.client) console.log("browser");
</script>

Good

import.meta.client keeps the browser-only branch explicit using the replacement environment flag.

<script setup lang="ts">
if (import.meta.client) console.log("browser");
</script>

Good avoids this rule's finding under the configuration above; other rules may still report diagnostics.

Implementation · All rules