Vue.js plugin that allows you to bundle CSS with your components

vue-css

The Vue.js plugin created by @nxtchg, vue-css is made for storing relevant CSS along with .vue components, allowing you to bundle CSS file with your components

Vue components should be stand-alone units with everything relevant embedded inside. Unfortunately, Vue doesn't support embedded styles. You can use Webpack or Browserify, but if you don't want to, then there is no suitable solution. This plugin inserts itself on top of Vue.component() and if there is a "style" member present in component's definition, it adds it to the page. All CSS selectors are prefixed with the name of the component to avoid conflicts.

The CSS selectors are prefixed with the name of the component, for example:

Vue.component('my-component',
{
    template: '<div class="my-component"><span>Hello</span>, <p class="this-too">world!</p></div>',

    style:    'span, .this-too{ font-color: red }'
});

The above configuration will add .my-component span, .my-component .this-too{ font-color: red } to the page.

Usage

The plugin can be used just by adding the 'vue-css.js' file into your project.

That’s it give vue-css a try if you are looking for an alternative way to support embedded styles in your projects.