require-vuejs

RequireJS plugin to async and dynamic load and parse .vue single file components

This library has only 4Kb ( minified ).

What this library can do

Real time integration
Don't need build to use
Used as RequireJS plugin
You can use syntax detection from your IDE
Suport for single file component
Work with or without extension
Support .html and .vue files
CSS inside component file

What this library can't do

Parse Jade and other templates
Scoped css

CDN

Development ( last version )

https://raw.githack.com/edgardleal/require-vuejs/master/dist/require-vuejs.js

For production usage: ( Fast CDN, long age cache and minified )

https://raw.githack.com/edgardleal/require-vuejs/master/dist/require-vuejs.min.js

Installation from NPM repository

npm install require-vuejs

Usage

This example on Codepen

File structure

app.js
component.vue
index.html

Source code example

index.html

    <!DOCTYPE html>
    <html>
        <head>
        <meta charset="utf-8" />
            <title>Require Vue</title>
        </head>
        <body>
            <div id="app">
                <my-component></my-component>
        </div>
            <script data-main="app" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.3/require.min.js" ></script>
        </body>
    </html>

Create your component: ( component.vue )

    <template>
      <div>
          {{text}}
      </div>

    </template>

    <script>
      define(["Vue"], function(Vue) {
          Vue.component("my-component", {
              template: template, // the variable template will be injected 
              data: function() {
                  return {"text": "Ok"};
              }
          });
        });
    </script>

Create your app code: ( app.js )

    requirejs.config({
        paths: {
            "Vue": "https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.min",
            "vue": "https://rawgit.com/edgardleal/require-vue/master/dist/require-vuejs"
        },
        shim: {
            "Vue": {"exports": "Vue"}
        }
    });

    // to use component in your code with RequireJS: 
    // put a reference to your component file with or without extencion after 'vue!' 
    require(["Vue", "vue!component"], function(Vue){
        var app = new Vue({
            el: "#app"
        });
    });

Optimize ( r.js )

Create a build file to r.js. In this example we are using a file named build.js:

    ({
        baseUrl: ".",
        paths: {
            "Vue": "https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue",
            "vue": "require-vuejs" // full path to require-vuejs library file 
        },
        name: "app",
        out: "main-built.js"
    })

After create the file build.js with your build configuration execute this command:

    r.js -o build.js

Contributing

CONTRIBUTING

License

MIT

Code of Conduct

https://js.foundation/conduct/

edgardleal / require-vuejs

readme