Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/franckfreiburger/http-vue-loader
load .vue files from your html/js
https://github.com/franckfreiburger/http-vue-loader
http http-vue-loader loader promise vue vue-files vue-loader vuejs2
Last synced: 3 months ago
JSON representation
load .vue files from your html/js
- Host: GitHub
- URL: https://github.com/franckfreiburger/http-vue-loader
- Owner: FranckFreiburger
- License: mit
- Archived: true
- Created: 2017-02-02T16:01:15.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2021-08-05T04:07:27.000Z (over 3 years ago)
- Last Synced: 2024-05-28T18:36:17.256Z (7 months ago)
- Topics: http, http-vue-loader, loader, promise, vue, vue-files, vue-loader, vuejs2
- Language: JavaScript
- Homepage:
- Size: 91.8 KB
- Stars: 1,475
- Watchers: 38
- Forks: 273
- Open Issues: 42
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
### :tada: **http-vue-loader** evolved into [**vue3-sfc-loader**](https://github.com/FranckFreiburger/vue3-sfc-loader) that supports Vue2 and Vue3 :tada:
### (see the [announcement](https://github.com/FranckFreiburger/http-vue-loader/issues/127))
# http-vue-loader
Load .vue files directly from your html/js. No node.js environment, no build step.
## examples
`my-component.vue`
```vue
Hello {{who}}
module.exports = {
data: function() {
return {
who: 'world'
}
}
}
.hello {
background-color: #ffe;
}
```
`index.html`
```html
new Vue({
el: '#my-app',
components: {
'my-component': httpVueLoader('my-component.vue')
}
});
```
## More examples
using `httpVueLoader()`
```html
...
new Vue({
components: {
'my-component': httpVueLoader('my-component.vue')
},
...
```
or, using `httpVueLoader.register()`
```html
...
<script type="text/javascript">
httpVueLoader.register(Vue, 'my-component.vue');
new Vue({
components: [
'my-component'
]
},
...
```
or, using `httpVueLoader` as a plugin
```html
...
<script type="text/javascript">
Vue.use(httpVueLoader);
new Vue({
components: {
'my-component': 'url:my-component.vue'
},
...
```
or, using an array
```
new Vue({
components: [
'url:my-component.vue'
]
},
...
```
## Features
* `<template>`, `<script>` and `<style>` support the `src` attribute.
* `<style scoped>` is supported.
* `module.exports` may be a promise.
* Support of relative urls in `<template>` and `<style>` sections.
* Support custom CSS, HTML and scripting languages, eg. `<script lang="coffee">` (see VueLoader.langProcessor).
## Browser Support
 |  |  |  |  |  |
--- | --- | --- | --- | --- | --- |
Latest ✔ | Latest ✔ | ? | ? | Latest ✔ | 9+ ✔ |
## Requirements
* [Vue.js 2](https://vuejs.org/) ([compiler and runtime](https://vuejs.org/v2/guide/installation.html#Explanation-of-Different-Builds))
* [es6-promise](https://github.com/stefanpenner/es6-promise) (optional, except for IE, Chrome < 33, FireFox < 29, [...](http://caniuse.com/#search=promise) )
* webserver (optional)...
Since some browsers do not allow XMLHttpRequest to access local files (Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https),
you can start a small express server to run this example.
Run the following commands to start a basic web server:
```
npm install express
node -e "require('express')().use(require('express').static(__dirname, {index:'index.html'})).listen(8181)"
```
## API
##### httpVueLoader(`url`)
`url`: any url to a .vue file
##### httpVueLoader.register(`vue`, `url`)
`vue`: a Vue instance
`url`: any url to a .vue file
##### httpVueLoader.httpRequest(`url`)
This is the default httpLoader.
Use axios instead of the default http loader:
```Javascript
httpVueLoader.httpRequest = function(url) {
return axios.get(url)
.then(function(res) {
return res.data;
})
.catch(function(err) {
return Promise.reject(err.status);
});
}
```
##### httpVueLoader.langProcessor
This is an object that contains language processors related to the `lang` attribute of the `<script>` section.
The language is a simple function that accepts a script source as argument and returns a javascript script source.
Example - CoffeeScript:
```JavaScript
<script src="http://coffeescript.org/v1/browser-compiler/coffee-script.js">
httpVueLoader.langProcessor.coffee = function(scriptText) {
return window.CoffeeScript.compile(scriptText, {bare: true});
}
```
Then, in you `.vue` file:
```CoffeeScript
...
module.exports =
components: {}
data: ->
{}
computed: {}
methods: {}
...
```
Example - Stylus:
```JavaScript
httpVueLoader.langProcessor.stylus = function(stylusText) {
return new Promise(function(resolve, reject) {
stylus.render(stylusText.trim(), {}, function(err, css) {
if (err) reject(err);
resolve(css);
});
})
}
```
```stylus
...
border-radius()
-webkit-border-radius: arguments
-moz-border-radius: arguments
border-radius: arguments
form input
padding: 5px
border: 1px solid
border-radius: 5px
...
```
Sass (SCSS) example. Since `sass.compile()` is asynchronous, a promise needs to be returned:
```JavaScript
httpVueLoader.langProcessor.scss = function (scssText) {
return new Promise(function(resolve, reject) {
sass.compile(scssText, function (result) {
if ( result.status === 0 )
resolve(result.text)
else
reject(result)
});
});
}
// ....
```
```scss
...
<style lang="scss">
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
</style>
```
## How it works
1. http request the vue file
1. load the vue file in a document fragment
1. process each section (template, script and style)
1. return a promise to Vue.js (async components)
1. then Vue.js compiles and cache the component
## Notes
The aim of http-vue-loader is to quickly test .vue components without any compilation step.
However, for production, I recommend to use [webpack module bundler](https://webpack.github.io/docs/) with [vue-loader](https://github.com/vuejs/vue-loader),
[webpack-simple](https://github.com/vuejs-templates/webpack-simple) is a good minimalist webpack config you should look at.
BTW, see also [why Vue.js doesn't support templateURL](https://vuejs.org/2015/10/28/why-no-template-url/).
## Caveat
Due to the lack of suitable API in Google Chrome and Internet Explorer, syntax errors in the `<script>` section are only reported on FireFox.
## Credits
[Franck Freiburger](https://www.franck-freiburger.com)