How to inline the style tag in Vue

Karim Hossenbux — Fri, 30 Aug 2019 08:11:10 +0000

Let's say you want to target some pseudo element to give it like a dynamic color or something. But you have that color value that come from Vue...

You can't use CSS, you don't have access to the color value
You can't use v-bind:style on a pseudo element
Vue doesn't let you use <style></style> in your template tag, vue-loader or vue-template will filter out any style tag

Solution: Make a little component to output a style tag

main.js

Vue.component('v-style', {
  render: function (createElement) {
    return createElement('style', this.$slots.default)
  }
})

Component.vue (in your <template></template>)

<v-style type="text/css">
  .progress::-webkit-progress-value { background-color: {{ color }}!important; }
</v-style>

I had to use !important with this solution, I saw some people using a unique _uid to target the element properly using <component is="style">, but this one seems faster 👌

DEV Community: Karim Hossenbux

How to inline the style tag in Vue

Solution: Make a little component to output a style tag