Package Exports
- vue3-sfc-loader
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue3-sfc-loader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
vue3-sfc-loader
Vue3 Single File Component loader.
Load .vue files dynamically at runtime from your html/js. No node.js environment, no (webpack) build step needed.
Key Features
- Only requires Vue3 runtime
- Focuses on component compilation. Network, styles injection and cache are up to you (see example below)
- Embedded ES6 modules support ( including
import()
) - Support custom CSS, HTML and Script language, see pug example
- Properly reports template, style or script errors through the log callback
- You can build your own version and easily customize browsers you need to support
Example
<html>
<body>
<div id="app"></div>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader"></script>
<script>
const options = {
moduleCache: {
vue: Vue
},
getFile(path) {
return fetch(path).then(res => res.ok ? res.text() : Promise.reject(res));
},
addStyle(textContent) {
const style = Object.assign(document.createElement('style'), { textContent });
const ref = document.head.getElementsByTagName('style')[0] || null;
document.head.insertBefore(style, ref);
},
}
const { loadModule } = window['vue3-sfc-loader'];
const app = Vue.createApp({
components: {
'my-component': Vue.defineAsyncComponent( () => loadModule('./myComponent.vue', options) )
},
template: '<my-component></my-component>'
});
app.mount('#app');
</script>
</body>
</html>
More Examples
see examples
Try It Online
https://codepen.io/franckfreiburger/project/editor/AqPyBr
Public API
loadModule(path
: string, options
: Options): Promise<Module>
dist/
latest minified version at :
- jsDelivr CDN: https://cdn.jsdelivr.net/npm/vue3-sfc-loader
- UNPKG CDN: https://unpkg.com/vue3-sfc-loader
npm install vue3-sfc-loader
(here:./node_modules/vue3-sfc-loader/dist/vue3-sfc-loader.js
)
Build your own version
webpack --config ./build/webpack.config.js --mode=production --env targetsBrowsers="> 1%, last 2 versions, Firefox ESR, not dead, not ie 11"
see package.json
"build" script
see browserslist queries
How It Works
vue3-sfc-loader.js
= Webpack
( @vue/compiler-sfc
+ @babel
)
more details
- load the
.vue
file - parse and compile template, script and style sections (
@vue/compiler-sfc
) - transpile script and compiled template to es5 (
@babel
) - parse scripts for dependencies (
@babel/traverse
) - recursively resolve dependencies
- merge all and return the component
Any Questions ?
ask here: https://stackoverflow.com/questions/ask?tags=vue3-sfc-loader (see previous questions)
Previous version (for vue2)
see http-vue-loader