Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/edgardleal/require-vuejs
RequireJS plugin to async and dynamic load and parse .vue components
https://github.com/edgardleal/require-vuejs
amd async dynamic javascript require requirejs requirejs-plugin vue vue-components vuejs vuejs2
Last synced: about 19 hours ago
JSON representation
RequireJS plugin to async and dynamic load and parse .vue components
- Host: GitHub
- URL: https://github.com/edgardleal/require-vuejs
- Owner: edgardleal
- License: mit
- Created: 2017-03-07T00:47:47.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2023-04-03T16:39:38.000Z (almost 2 years ago)
- Last Synced: 2025-02-13T18:14:59.651Z (8 days ago)
- Topics: amd, async, dynamic, javascript, require, requirejs, requirejs-plugin, vue, vue-components, vuejs, vuejs2
- Language: JavaScript
- Homepage: https://edgardleal.github.io/require-vuejs/
- Size: 474 KB
- Stars: 149
- Watchers: 14
- Forks: 30
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# require-vuejs
> RequireJS plugin to async and dynamic load and parse .vue single file components
[](https://www.codacy.com/app/edgardleal/require-vuejs?utm_source=github.com&utm_medium=referral&utm_content=edgardleal/require-vuejs&utm_campaign=badger)
[](https://travis-ci.org/edgardleal/require-vuejs)
[](https://codecov.io/gh/edgardleal/require-vuejs)
[](https://codeclimate.com/github/edgardleal/require-vuejs)
[](https://nodei.co/npm/require-vuejs/)
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](https://vuejs.org/v2/guide/single-file-components.html)
* 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](https://www.npmjs.com/package/require-vuejs)
`npm install require-vuejs`
## Usage
This example on [Codepen](http://codepen.io/edgardleal/pen/XMaeNP/)
### File structure
app.js
component.vue
index.html
### Source code example
index.html
```html
Require Vue
```
---
Create your component: ( component.vue )
```html
{{text}}
define(["Vue"], function(Vue) {
Vue.component("my-component", {
template: template, // the variable template will be injected
data: function() {
return {"text": "Ok"};
}
});
});
```
---
Create your app code: ( app.js )
```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`:
```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:
```bash
r.js -o build.js
```
## Contributing
[CONTRIBUTING](https://github.com/edgardleal/require-vuejs/blob/master/CONTRIBUTING.md)
## License
[MIT](https://github.com/edgardleal/require-vuejs/blob/master/LICENSE)
## Code of Conduct
[https://js.foundation/conduct/](https://js.foundation/conduct/)