Vue3 Single File Component loader.
Load .vue files dynamically at runtime from your html/js. No node.js environment, no (webpack) build step needed.
- 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()) - SFC Custom Blocks support
- Support custom CSS, HTML and Script language, see pug and stylus examples
- 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
<html> <body> <div id="app"></div> <script src="https://unpkg.com/vue@next"></script> <script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader/dist/vue3-sfc-loader.js"></script> <script> const options = { moduleCache: { vue: Vue }, async getFile(url) { const res = await fetch(url); if ( !res.ok ) throw Object.assign(new Error(url+' '+res.statusText), { res }); return await res.text(); }, 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>see examples
https://codepen.io/franckfreiburger/project/editor/AqPyBr
loadModule(path: string, options: Options): Promise<Module>
latest minified version at :
- jsDelivr CDN: https://cdn.jsdelivr.net/npm/vue3-sfc-loader/dist/vue3-sfc-loader.js
- UNPKG CDN: https://unpkg.com/vue3-sfc-loader
npm install vue3-sfc-loader(./node_modules/vue3-sfc-loader/dist/vue3-sfc-loader.js)
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
vue3-sfc-loader.js = Webpack( @vue/compiler-sfc + @babel )
- load the
.vuefile - 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
see http-vue-loader 💤
