Single File Component loader for Vue2 and Vue3. Load .vue files directly from your HTML. No node.js environment, no build step.
vue3-sfc-loader
API | FAQ | Examples | dist | Roadmap
Vue3/Vue2 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
* Supports Vue 3 and Vue 2 (see dist/) * 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>
<body>
<div id="app"></div>
</body>
</html>More Examples
see all examples
Try It Online
https://codepen.io/franckfreiburger/project/editor/AqPyBr
Public API documentation
loadModule(path: string, options: Options): Promise<VueComponent>
dist/
npm install vue3-sfc-loader - jsDelivr CDN: https://cdn.jsdelivr.net/npm/vue3-sfc-loader/dist/vue3-sfc-loader.js - UNPKG CDN: https://unpkg.com/vue3-sfc-loader
esm version: dist/vue3-sfc-loader.esm.js umd version: dist/vue3-sfc-loader.js
npm install vue3-sfc-loader (use 'vue3-sfc-loader/dist/vue2-sfc-loader.js') - jsDelivr CDN: https://cdn.jsdelivr.net/npm/vue3-sfc-loader/dist/vue2-sfc-loader.js - UNPKG CDN: https://unpkg.com/vue3-sfc-loader/dist/vue2-sfc-loader.js esm version: dist/vue2-sfc-loader.esm.js umd version: dist/vue2-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 yarn: npm install --global yarn) 1. run yarn install
How It Works
vue3-sfc-loader.js = Webpack( @vue/compiler-sfc + @babel )
more details
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 !
