`petite-vue/no-unsupported-directive`

Disallow directives that petite-vue does not support

Default severity: error
Presets: none
Automatic fix: None; review the suggested change
Applies to: HTML documents detected as petite-vue; ordinary Vue SFCs are outside this rule's scope.
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": {
        "petite-vue/no-unsupported-directive": "error"
      }
    },
  },
});

vp run lint

Bad

v-memo, v-slot:header, and the custom v-my-directive are absent from petite-vue’s supported directive list. The petite-vue script marks this HTML as the relevant dialect.

<!doctype html>
<html><body>
<div v-memo="[a, b]"></div>
<template v-slot:header></template>
<div v-my-directive></div>
<script src="https://unpkg.com/petite-vue" init></script>
</body></html>

Good

The replacement uses supported v-scope, v-effect, v-if, v-bind, and v-on syntax instead of relying on unsupported directives.

<!doctype html>
<html><body>
<div v-scope="{ count: 0 }" v-effect="console.log(count)"></div>
<div v-if="ok" v-bind:title="title" @click="count++"></div>
<script src="https://unpkg.com/petite-vue" init></script>
</body></html>

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

Implementation · All rules