Note

This is a documentation for version 7.0.0-alpha.0.
To check version 6.2.2 go here. To check previous releases go here.

# vue/no-static-inline-styles

disallow static inline style attributes

# 📖 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.

<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>
Now loading...

# 🔧 Options

{
  "vue/no-static-inline-styles": ["error", {
    "allowBinding": false
  }]
}
  • allowBinding ... if true, allow binding static inline style. default false.

# "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>
Now loading...

# 📚 Further reading

# 🔍 Implementation

Last Updated: 12/26/2019, 5:08:45 AM