require-vuejs
v1.1.3
Published
A RequireJS plugin to load and parse VueJS components ( .vue )
Downloads
167
Readme
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://rawgit.com/edgardleal/require-vuejs/master/dist/require-vuejs.jsFor production usage: ( Fast CDN, long age cache and minified )
https://cdn.rawgit.com/edgardleal/require-vuejs/aeaff6db/dist/require-vuejs.min.jsInstallation from NPM repository
npm install require-vuejs
Usage
This example on Codepen
File structure
app.js
component.vue
index.htmlSource 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