November Perfect Moustache
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

steal-vue

0.0.6 • Public • Published

Build Status npm version

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.

{
  "steal": {
    "plugins": [
      "steal-vue",
      "steal-css",
      "steal-less"
    ]
  }
}

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.
import AppHello from './Hello.vue';
import Vue from 'vue/dist/vue';
 
// Register it as a global component
Vue.component('app-hello', AppHello);
 
var app = new Vue({
  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

Keywords

none

install

npm i steal-vue

Downloadsweekly downloads

10

version

0.0.6

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability