Vc style

Dynamic style tag component for #VueJs making any property/value pairs inside of it observable

Version: 1.0.1 Updated: 11/06/2019

By: acidmartin License: MIT


Dynamic <style></style> tag component for VueJs making any property/value pairs inside of it observable. Developed by Martin Ivanov.


$ npm install vc-style --save


// in main.js, use globally
import VcStyle from 'vc-style'

// as a component in another component
import VcStyle from 'vc-style'

export default {
  name: 'app',
  components: {
  data () {
    return {
      color: '#fff',  
      bgColor: '#b00'

And then use like this:

  color: {{ color }};
  background: {{ bgColor }};

The above will render normal <style></style> tag with all property/value pairs observable:

  color: #fff;
  background: #b00;

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run all tests
npm test

For detailed explanation on how things work, checkout the guide and docs for vue-loader.


Developed by Martin Ivanov and available on BitBucket and on NPM. Check the demo here.

Categories: Vue js