vue3-sfc-loader

###### API | FAQ | Examples | dist | Roadmap

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 Vue runtime-only build
* esm and umd bundles available (example)
* Embedded ES6 modules support ( including import() )
* TypeScript support, JSX support
* Custom CSS, HTML and Script language Support, see pug and stylus examples
* SFC Custom Blocks support
* Properly reports template, style or script errors through the log callback
* Focuses on component compilation. Network, styles injection and cache are up to you (see example below)
* Easily build your own version and customize browsers you need to support

Example

``html

`

$3

see all examples

Try It Online

https://codepen.io/franckfreiburger/project/editor/AqPyBr

Public API documentation

loadModule(path: string, options: Options): Promise

dist/







!Vue3
- npm install @makerbi/vue3-sfc-loader
- jsDelivr CDN: https://cdn.jsdelivr.net/npm/@makerbi/vue3-sfc-loader/dist/vue3-sfc-loader.js
- UNPKG CDN: https://unpkg.com/@makerbi/vue3-sfc-loader

esm version: dist/vue3-sfc-loader.esm.js
umd version: dist/vue3-sfc-loader.js

Build your own version

Example: enable IE11 support
npx webpack --config ./build/webpack.config.js --mode=production --env targetsBrowsers="> 1%, last 8 versions, Firefox ESR, not dead, IE 11" check

_see package.json "build" script_
_see browserslist queries_

preliminary steps:
1. clone vue3-sfc-loader
1. (install pnpm: npm install --global pnpm)
1. run pnpm install

How It Works

vue3-sfc-loader.js = Webpack( @vue/compiler-sfc + @babel )

$3

1. load the .vue file
1. parse and compile template, script and style sections (@vue/compiler-sfc)
1. transpile script and compiled template to es5 (@babel)
1. parse scripts for dependencies (@babel/traverse`)
1. recursively resolve dependencies
1. merge all and return the component

Any Questions

:speech_balloon: ask in Discussions tab


#


Financial contributors

Many thanks to people that support this project !