Vue

The Vue configuration has Vue.js-specific linting rules for component structure, data options, computed properties, and reserved keywords. It also includes overrides to prevent false positive linting errors in .vue files.

Installation

Add the Vue configuration to your biome.jsonc:

biome.jsonc

{
  "extends": ["ultracite/core", "ultracite/vue"]
}

Overview

This configuration adds rules specific to Vue.js development:

Component Naming: Enforce multi-word component names
Data Structure: Prevent improper data option declarations
Reserved Keywords: Disallow use of Vue reserved props and keys
Duplicate Keys: Prevent duplicate keys in component options
React-Specific Props: Disallow React-specific props in Vue components
Vue File Overrides: Relaxed rules for .vue files to handle Single File Component structure

Vue-Specific Rules

Nursery

Rule	Setting	Description
`noVueDataObjectDeclaration`	`error`	Prevent using object declaration for the `data` option in Vue components. The `data` option must be a function that returns an object.
`noVueDuplicateKeys`	`error`	Prevent duplicate keys in Vue component options. Keys in `data`, `computed`, `methods`, etc. must be unique.
`noVueReservedKeys`	`error`	Disallow Vue reserved keys like `$data`, `$props`, `$el`, etc. in component options.
`noVueReservedProps`	`error`	Disallow Vue reserved props like `key`, `ref`, and `is` as custom component props.
`useVueMultiWordComponentNames`	`error`	Enforce multi-word component names to avoid conflicts with HTML elements. Single-word names like `Button` or `Card` should be avoided.

Suspicious

Rule	Setting	Description
`noReactSpecificProps`	`error`	Disallow React-specific props like `className` and `htmlFor` in Vue. Use `class` and `for` instead.

Vue File Overrides

The following rules are disabled for .vue files to prevent false positives due to Biome's partial support for Vue Single File Components:

Correctness

Rule	Setting	Description
`noUnusedVariables`	`off`	Allow unused variables in `.vue` files. Variables in the script section may only be used in the template.
`noUnusedImports`	`off`	Allow unused imports in `.vue` files. Imports may only be used in the template section.

Style

Rule	Setting	Description
`useConst`	`off`	Allow `let` and `var` declarations in `.vue` files for reactive data patterns.
`useImportType`	`off`	Disable explicit import type requirements for better compatibility with Vue's build system.

On this page