edgardleal / Require Vuejs
Licence: mit
RequireJS plugin to async and dynamic load and parse .vue components
Stars: ✭ 143
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Require Vuejs
Angular Async Loader
Load modules and components asynchronously for angular 1.x application.
Stars: ✭ 137 (-4.2%)
Mutual labels: requirejs, amd, async
Vue Nuggets
E-commerce UI Nuggets based on Vue
Stars: ✭ 84 (-41.26%)
Mutual labels: vue-components, vuejs2
Vue Particles
Vue.js component for particles backgrounds ✨
Stars: ✭ 1,220 (+753.15%)
Mutual labels: vue-components, vuejs2
Nextcloud Vue
🍱 Vue.js components for Nextcloud app development ✌
Stars: ✭ 89 (-37.76%)
Mutual labels: vue-components, vuejs2
Vue Cnode
基于vue2 + vue-router + vuet + ES6 + less + flex.css重写vue版cnode社区，使用webpack2打包
Stars: ✭ 1,134 (+693.01%)
Mutual labels: vue-components, vuejs2
Cordovue
A sample Apache Cordova application using VueJS.
Stars: ✭ 66 (-53.85%)
Mutual labels: vue-components, vuejs2
Xcui
🍴 A Vue.js 2.x desktop components colletion
Stars: ✭ 88 (-38.46%)
Mutual labels: vue-components, vuejs2
Conditioner
💆🏻 Frizz free, context-aware, JavaScript modules
Stars: ✭ 1,053 (+636.36%)
Mutual labels: requirejs, amd
Pd Select
vue components ,like ios 3D picker style,vue 3d 选择器组件,3D滚轮
Stars: ✭ 101 (-29.37%)
Mutual labels: vue-components, vuejs2
Vue Clazy Load
Component-based lazy (CLazy) load images in Vue.js 2
Stars: ✭ 106 (-25.87%)
Mutual labels: vue-components, vuejs2
Vueye Table
A data table created using Vue.js
Stars: ✭ 64 (-55.24%)
Mutual labels: vue-components, vuejs2
Vuex Flash
VueJs Flash Message Component within Vuex
Stars: ✭ 54 (-62.24%)
Mutual labels: vue-components, vuejs2
Forge
A Generic Low-Code Framework Built on a Config-Driven Tree Walker
Stars: ✭ 70 (-51.05%)
Mutual labels: async, dynamic
Vue Social Sharing
A renderless Vue.js component for sharing links to social networks, compatible with SSR
Stars: ✭ 1,071 (+648.95%)
Mutual labels: vue-components, vuejs2
Vue Flashcard
Rich flashcard component for vue js 2 🎉
Stars: ✭ 114 (-20.28%)
Mutual labels: vue-components, vuejs2
Vue Lottie
Render After Effects animations on Vue based on Bodymovin
Stars: ✭ 1,037 (+625.17%)
Mutual labels: vue-components, vuejs2
Vue Image Loader
Vue progressive image loader plugin like Medium
Stars: ✭ 47 (-67.13%)
Mutual labels: vue-components, vuejs2
Vue Multi Select
This component gives you a multi/single select with the power of Vuejs components.
Stars: ✭ 92 (-35.66%)
Mutual labels: vue-components, vuejs2
Vue Generator
A CLI generator for Vue components, views and store modules
Stars: ✭ 111 (-22.38%)
Mutual labels: vue-components, vuejs2
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
License
Code of Conduct
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].