SystemJS plugin to async and dynamic load and parse .vue single file components
- Real time integration
- Don't need build to use
- Used as SystemJS 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
- Parse Jade and other templates
- Scoped css
https://github.com/dohzoh/systemjs-vue-inbrowser/raw/develop/dist/plugin-vue-inbrowser.js
https://github.com/dohzoh/systemjs-vue-inbrowser/raw/develop/dist/plugin-vue-inbrowser.min.js
- Responsive ChessGrid Component using VueJS and SystemJS
- Vue Router + Vuetify JS Example in browser without webpack
app.js
component.vue
index.html
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Simple Vue</title>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.0.20/browser.min.js"></script>
<script src="https://unpkg.com/systemjs/dist/system.js"></script>
<script src="./app.js"></script>
</html>Create your component: ( component.vue )
<template>
<div>
{{text}}
</div>
</template>
<script>
export default {
data: function() {
return { text: "Ok" };
}
};
</script>Create your app code: ( app.js )
System.config({
map: {
Vue: "https://unpkg.com/vue",
vue: "/src/plugin-vue-inbrowser.min.js",
"plugin-babel": "https://unpkg.com/systemjs-plugin-babel/plugin-babel.js",
"systemjs-babel-build": "https://unpkg.com/systemjs-plugin-babel/systemjs-babel-browser.js"
},
meta: {
"*.vue": { loader: "vue" }
},
transpiler: "plugin-babel"
});
System["import"]("Vue").then(function (Vue) {
var app = new Vue({
el: "#app",
components: {
myComponent: function () { return System["import"]("./component.vue"); }
}
});
});