# 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

Guide - Class and Style Bindings / Binding Inline Styles (opens new window)

# 🚀 Version

This rule was introduced in eslint-plugin-vue v7.0.0

# 🔍 Implementation

← vue/no-restricted-v-bind vue/no-template-target-blank →