Skip to content
Biome
Docs Enterprise Playground
Blog

useVueBlockOrder (HTML)

Language HTML

Summary

Section titled “Summary”

How to configure

Section titled “How to configure”
biome.json
{
  "linter": {
    "rules": {
      "nursery": {
        "useVueBlockOrder": "error"
      }
    }
  }
}

Description

Section titled “Description”

Enforce the order of the top-level blocks in Vue components.

A Vue component file is made of top-level blocks, such as <script>, <template>, and <style>. Putting these blocks in the same order in every component makes components easier to read, because you always know where to look for each part.

By default, <script> and <template> blocks come first, in any order, followed by <style> blocks. Blocks whose tag name isn’t part of the configured order, such as a custom <docs> block, can appear anywhere.

Examples

Section titled “Examples”

Invalid

Section titled “Invalid”
<style></style>
<script></script>
code-block.vue:2:1 lint/nursery/useVueBlockOrder  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ The <script> block should be above the <style> block.
  
    1 │ <style></style>
  > 2 │ <script></script>
      │ ^^^^^^^^^^^^^^^^^
    3 │ 
  
  ℹ This <style> block should come after it.
  
  > 1 │ <style></style>
      │ ^^^^^^^^^^^^^^^
    2 │ <script></script>
    3 │ 
  
  ℹ Putting the blocks of every component in the same order makes components easier to read.
  
  ℹ This project puts top-level blocks in this order: <script> and <template> in any order, then <style>.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  
  ℹ Unsafe fix: Move the <script> block above the <style> block.
  
    1   │ - <style></style>
    2   │ - <script></script>
      1 │ + <script></script>
      2 │ + <style></style>
    3 3 │

Valid

Section titled “Valid”
<template></template>
<script></script>
<docs></docs>
<style></style>

Options

Section titled “Options”

order

Section titled “order”

Default: [["script", "template"], "style"]

The order of the top-level blocks. Each entry is either a tag name, or a list of tag names whose blocks may appear in any order relative to each other. If a tag name is listed more than once, its first position is used.

The following configuration puts <template> first, then <script>, then <style>:

biome.json
{
  "linter": {
    "rules": {
      "nursery": {
        "useVueBlockOrder": {
          "level": "on",
          "options": {
            "order": [
              "template",
              "script",
              "style"
            ]
          }
        }
      }
    }
  }
}

Invalid

Section titled “Invalid”
<script></script>
<template></template>
<style></style>
code-block.vue:2:1 lint/nursery/useVueBlockOrder  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ The <template> block should be above the <script> block.
  
    1 │ <script></script>
  > 2 │ <template></template>
      │ ^^^^^^^^^^^^^^^^^^^^^
    3 │ <style></style>
    4 │ 
  
  ℹ This <script> block should come after it.
  
  > 1 │ <script></script>
      │ ^^^^^^^^^^^^^^^^^
    2 │ <template></template>
    3 │ <style></style>
  
  ℹ Putting the blocks of every component in the same order makes components easier to read.
  
  ℹ This project puts top-level blocks in this order: <template>, then <script>, then <style>.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  
  ℹ Unsafe fix: Move the <template> block above the <script> block.
  
    1   │ - <script></script>
    2   │ - <template></template>
      1 │ + <template></template>
      2 │ + <script></script>
    3 3 │   <style></style>
    4 4 │

Valid

Section titled “Valid”
<template></template>
<script></script>
<style></style>
Section titled “Related links”

Sponsored by

Copyright (c) 2023-present Biome Developers and Contributors.