vue-scoped-css-mixin v0.0.4

Introduction

vue-scoped-css-mixin is a Vue 2 plugin that provides the ability to add scoped CSS rules to any Vue app or component without requiring any bundlers or build steps (though it should play nice with bundlers and build steps). Check out a demo here.

Usage

Install with:

npm install --save vue-scoped-css-mixin

Add the script to your page:

<!-- link to downloaded script -->
<script src="path/to/vue-scoped-css-mixin/index.js"></script>

<!-- or use the CDN -->
<script src="https://unpkg.com/vue-scoped-css-mixin@0.0.4/dist/vue-scoped-css-mixin.js"></script>

Or import it for use with Node and/or JS bundlers:

const Vue = require("vue")
const VueScopedCSSMixin = require("vue-scoped-css-mixin")

Then:

// Step 1) Tell Vue to use VueScopedCSSMixin.
Vue.use(VueScopedCSSMixin)

// Step 2) Add a "scopedCSS" property to any Vue app or component! That's it!
let app = new Vue({
  el: "#app",

  scopedCSS: `
    .red {
      color: red;
      font-weight: bold;
    }
  `,

  template: `
    <div class="red">
      This is red!
    </div>
  `,
})

Caveats

There is one caveat to the functionality provided by this plugin: Sometimes, the order of the CSS rules gets shuffled in flight. This, of course, undermines the "cascading" functionality of CSS. I'm trying to work on a solution. In the meantime, you may have to apply !important flags to some of your rules.