JS.VUE.NO.STATIC.INLINE.STYLES

Rule Details

This rule reports static inline style bindings and style attributes. The styles reported in this rule mean that we recommend separating them into <style> tag.

{'vue/no-static-inline-styles': ['error']}

<template>
  <!-- GOOD -->
  <div :style="styleObject"></div>
  <div :style="{ backgroundImage: 'url('+img+')' }"></div>

  <!-- BAD -->
  <div style="color: pink;"></div>
  <div :style="{ color: 'pink' }"></div>
  <div :style="[ { color: 'pink' }, { 'font-size': '85%' } ]"></div>
  <div :style="{ backgroundImage, color: 'pink' }"></div>
</template>

Options

{
  "vue/no-static-inline-styles": ["error", {
    "allowBinding": false
  }]
}

• allowBinding ... if true, allow binding static inline style. default false.

"allowBinding": true

{'vue/no-static-inline-styles': ['error', {'allowBinding': true}]}

<template>
  <!-- GOOD -->
  <div :style="{ transform: 'scale(0.5)' }"></div>
  <div :style="[ { transform: 'scale(0.5)' }, { 'user-select': 'none' } ]"></div>

  <!-- BAD -->
  <div style="transform: scale(0.5);"></div>
</template>

Further Reading

• Guide - Class and Style Bindings / Binding Inline Styles (https://v3.vuejs.org/guide/class-and-style.html#binding-inline-styles)