Naughty Pinching Mannequins

    steal-vue

    0.1.1 • 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

    18

    Version

    0.1.1

    License

    MIT

    Unpacked Size

    32.5 kB

    Total Files

    10

    Last publish

    Collaborators

    • marshallswain