http-vue-loader

Load .vue files directly from your html/js. No node.js environment, no build step.

examples

my-component.vue

<template>
	<div class="hello">Hello {{who}}</div>
</template>

<script>
module.exports = {
	data: function() {
		return {
			who: 'world'
		}
	}
}
</script>

<style>
.hello {
	background-color: #ffe;
}
</style>

myFile.html

using httpVueLoader()

...
<script type="text/javascript">

	new Vue({
		components: {
			'my-component': httpVueLoader('my-component.vue')
		},
		...

or, using httpVueLoaderRegister()

...
<script type="text/javascript">

	httpVueLoaderRegister(Vue, 'my-component.vue');

	new Vue({
		components: [
			'my-component'
		},
		...

Browser Support

Latest ✔	Latest ✔	?	?	Latest ✔	9+ ✔

Dependances

• Vue.js 2
• axios (Can easily be replaced by another lib)
• es6-promise (optional, except for IE)

API

httpVueLoader(url)

url: any url to a .vue file

httpVueLoaderRegister(vue, url)

vue: a Vue instance
url: any url to a .vue file

How it works

1. http request the vue file
2. load the vue file in a document fragment
3. process each section (template, script and style)
4. return a promise to Vue (async components)

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 with vue-loader, see also why Vue.js doesn't support templateURL.
Note also that http-vue-loader only supports text/x-template for <template>, text/javascript for <script> and text/css for <style>

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