❤
npm
Sign UpSign In

require-vuejs

1.1.3 • Public • Published

require-vuejs

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

Codacy Badge Build Status codecov Code Climate

NPM

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://rawgit.com/edgardleal/require-vuejs/master/dist/require-vuejs.js

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

https://cdn.rawgit.com/edgardleal/require-vuejs/aeaff6db/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/

Readme

Keywords

Package Sidebar

Install

npm i require-vuejs

Repository

github.com/edgardleal/require-vuejs

Homepage

edgardleal.github.io/require-vuejs/

Weekly Downloads

38

Version

1.1.3

License

MIT

Unpacked Size

68.3 kB

Total Files

35

Last publish

Collaborators

  • edgardleal
Try on RunKit
Report malware