StealJS plugin for Vue.js Single File Components.
Steal (StealJS) is a module loader with sane defaults. With the steal-vue plugin, Steal can bundle Vue.js Single File Components with your application. In addition to CSS styles, it includes support for Less, and Sass styles by using the lang
attribute.
Install
npm install steal-vue --save
You'll want to also update your steal
config. Add steal-vue
to your list of plugins.
Don't forget to add the steal plugin for whichever type of styles you'll be using.
Use
After you've installed the plugin, you'll be able to load .vue
files. For example, given the following example component:
// Hello.vue<template> <p class="hello-less">{{message}}</p></template> <script>export default { name: 'hello-less', data () { return { message: 'Hello, Vue with Less!' } }, methods: { log (value) { console.log(value) } }}</script> <style lang="less">p { padding: 100px; &.hello-less { color: lightseagreen; font-weight: bold; }}</style>
You can use the above example .vue
component like this:
// Import the component like any JS file.;; // Register it as a global componentVue; var app = el: '#app' template: `<AppHello />` components: // Or pass it in as a local component AppHello ;
Demo
Run the (admittedly simple) demo by cloning this repo, running npm install
or yarn
, and starting an http-server in the root folder.
License
MIT