eslint-plugin-vue-root-class

Enforce a – configurable – class on Vue component root nodes.

Motivation

Consistently applying a class to components allows us to selectively administer styles and style resets/normalization (e.g. 1, 2) to the matching elements and their children.

Use

Prerequisites

This assumes you are already using eslint in your project.

Installation

• npm install --save-dev eslint-plugin-vue-root-class
• Mend the eslint configuration of your project (e.g. .eslintrc.js) to contain

{
    // ...
    plugins: [
        'vue-root-class'
    ],
    rules: {
        'vue-root-class/vue-root-class': [ 'error', { class: 'fancy' } ]
    }
}

🛈 Configuring the relevant class ("fancy" in the above example) is mandatory

Known limitations

This only works…

• with classes added through a vanilla class attribute (e.g. class="foo") or bound through an array as a literal (e.g. :class="[ 'foo' ]")
  💡 Eslint performs static analysis of your component source code, it does not run it. As a consequence it can only detect literal values, not values which would only be determined at runtime.
• if the relevant class is an attribute to the first element inside the template (ignores possible vue-magic [v-if, ...])
  💡 Inside eslint-plugin-vue there have been attempts to cater to a more liberal interpretation of a template "root element" but at this time there is no known need for the resulting complexity here.