require-vuejs
A plugin to integrate Require.js and Vue.js
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 extencion
- Support .html and .vue files
- CSS inside component file
What this library can’t do
- Parse Jade and other templates
- Scoped css
CDN
Developent ( 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 Instalation 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" }); }); Licence
MIT