RequireJS plugin to async and dynamic load and parse .vue single file components
This library has only 4Kb ( minified ).
- 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
- Parse Jade and other templates
- Scoped css
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
This example on Codepen
app.js component.vue index.html 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" }); });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