Vue.js style guide
Linting
We default to eslint-vue-plugin, with the plugin:vue/recommended.
Please check this rules for more documentation.
Basic Rules
- The service has it's own file
- The store has it's own file
- Use a function in the bundle file to instantiate the Vue component:
```javascript // bad class { init() { new Component({}) } }
// good document.addEventListener('DOMContentLoaded', () => new Vue({ el: '#element', components: { componentName }, render: createElement => createElement('component-name'), })); ```
- Do not use a singleton for the service or the store
```javascript // bad class Store { constructor() { if (!this.prototype.singleton) { // do something } } }
// good class Store { constructor() { // do something } } ```
- Use
.vuefor Vue templates. Do not use%templatein HAML.
Naming
- Extensions: Use
.vueextension for Vue components. Do not use.jsas file extension (#34371). - Reference Naming: Use PascalCase for their instances:
```javascript // bad import cardBoard from 'cardBoard.vue'
components: { cardBoard, };
// good import CardBoard from 'cardBoard.vue'
components: { CardBoard, }; ```
- Props Naming: Avoid using DOM component prop names.
- Props Naming: Use kebab-case instead of camelCase to provide props in templates.
```javascript
// bad
// good
// bad
// good
Alignment
-
Follow these alignment styles for the template method:
-
With more than one attribute, all attributes should be on a new line:
```javascript // bad
// good
```
-
The tag can be inline if there is only one attribute:
```javascript // good
// good
// bad
```
Quotes
- Always use double quotes
"inside templates and single quotes'for all other JS.
``javascript
// bad
template:
`
// good
template: <button :class="style">Button</button>
```
Props
- Props should be declared as an object
```javascript // bad props: ['foo']
// good props: { foo: { type: String, required: false, default: 'bar' } } ```
- Required key should always be provided when declaring a prop
```javascript // bad props: { foo: { type: String, } }
// good props: { foo: { type: String, required: false, default: 'bar' } } ```
- Default key should be provided if the prop is not required. Note: There are some scenarios where we need to check for the existence of the property. On those a default key should not be provided.
```javascript // good props: { foo: { type: String, required: false, } }
// good props: { foo: { type: String, required: false, default: 'bar' } }
// good props: { foo: { type: String, required: true } } ```
Data
datamethod should always be a function
```javascript // bad data: { foo: 'foo' }
// good data() { return { foo: 'foo' }; } ```
Directives
- Shorthand
@is preferable overv-on
```javascript
// bad
// good
- Shorthand
:is preferable overv-bind
```javascript
// bad
// good
- Shorthand
#is preferable overv-slot
```javascript // bad
// good ```
Closing tags
- Prefer self closing component tags
```javascript
// bad
// good
Component usage within templates
- Prefer a component's kebab-cased name over other styles when using it in a template
```javascript
// bad
// good
Ordering
- Tag order in
.vuefile
```
// ...
// We don't use scoped styles but there are few instances of this ```
- Properties in a Vue Component: Check order of properties in components rule.
:key
When using v-for you need to provide a unique :key attribute for each item.
- If the elements of the array being iterated have an unique
idit is advised to use it:
```html <div v-for="item in items" :key="item.id"
<!-- content -->