Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/franckfreiburger/vue3-sfc-loader
Single File Component loader for Vue2 and Vue3. Load .vue files directly from your HTML. No node.js environment, no build step.
https://github.com/franckfreiburger/vue3-sfc-loader
babel component-loader easy-to-use html http-vue-loder nobuild sfc single-file-component vue vue2 vue2-sfc-loader vue3 vue3-sfc-loader vuejs
Last synced: about 1 month ago
JSON representation
Single File Component loader for Vue2 and Vue3. Load .vue files directly from your HTML. No node.js environment, no build step.
- Host: GitHub
- URL: https://github.com/franckfreiburger/vue3-sfc-loader
- Owner: FranckFreiburger
- License: mit
- Created: 2020-11-20T08:52:04.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-09-27T10:48:21.000Z (about 2 months ago)
- Last Synced: 2024-10-11T09:01:42.753Z (about 1 month ago)
- Topics: babel, component-loader, easy-to-use, html, http-vue-loder, nobuild, sfc, single-file-component, vue, vue2, vue2-sfc-loader, vue3, vue3-sfc-loader, vuejs
- Language: JavaScript
- Homepage:
- Size: 2.26 MB
- Stars: 1,153
- Watchers: 30
- Forks: 121
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# vue3-sfc-loader
###### [API](docs/api/README.md#loadmodule) | [FAQ](docs/faq.md) | [Examples](docs/examples.md) | [dist](#dist) | [Roadmap](../../issues/1)
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/](#dist))
* Only requires Vue runtime-only build
* **esm** and **umd** bundles available ([example](docs/examples.md#using-esm-version))
* Embedded ES6 modules support ( including `import()` )
* TypeScript support, JSX support
* Custom CSS, HTML and Script language Support, see [pug](docs/examples.md#using-another-template-language-pug) and [stylus](docs/examples.md#using-another-style-language-stylus) examples
* SFC Custom Blocks support
* Properly reports template, style or script errors through the [log callback](docs/api/interfaces/options.md#log)
* Focuses on component compilation. Network, styles injection and cache are up to you (see [example below](#example))
* Easily [build your own version](#build-your-own-version) and customize browsers you need to support## Example
```html
const options = {
moduleCache: {
vue: Vue
},
async getFile(url) {
const res = await fetch(url);
if ( !res.ok )
throw Object.assign(new Error(res.statusText + ' ' + url), { res });
return {
getContentData: asBinary => asBinary ? res.arrayBuffer() : 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');
```
### More Examples
see [all examples](docs/examples.md)
## Try It Online
https://codepen.io/franckfreiburger/project/editor/AqPyBr
## Public API documentation
**[loadModule](docs/api/README.md#loadmodule)**(`path`: string, `options`: [Options](/docs/api/README.md#options)): `Promise`
## dist/
[![latest bundle version](https://img.shields.io/npm/v/vue3-sfc-loader?label=latest%20version)](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/main/CHANGELOG.md)
[![bundle minified+brotli size](https://img.shields.io/badge/min%2Bbr-385kB-blue)](#dist)
[![bundle minified+gzip size](https://img.shields.io/badge/min%2Bgz-488kB-blue)](#dist)
[![bundle minified size](https://img.shields.io/badge/min-1794kB-blue)](#dist)
[![browser support](https://img.shields.io/github/package-json/browserslist/FranckFreiburger/vue3-sfc-loader)](https://github.com/browserslist/browserslist#query-composition)[![](https://data.jsdelivr.com/v1/package/npm/vue3-sfc-loader/badge)](https://www.jsdelivr.com/package/npm/vue3-sfc-loader)
![Vue3](https://img.shields.io/github/package-json/dependency-version/FranckFreiburger/vue3-sfc-loader/dev/@vue/compiler-sfc?label=For%20Vue%203)
- `npm install vue3-sfc-loader`
- [jsDelivr](https://www.jsdelivr.com/package/npm/vue3-sfc-loader?path=dist) CDN: https://cdn.jsdelivr.net/npm/vue3-sfc-loader/dist/vue3-sfc-loader.js
- [UNPKG](https://unpkg.com/browse/vue3-sfc-loader/dist/) CDN: https://unpkg.com/vue3-sfc-loader**esm version**: `dist/vue3-sfc-loader.esm.js`
**umd version**: `dist/vue3-sfc-loader.js`
![Vue2](https://img.shields.io/github/package-json/dependency-version/FranckFreiburger/vue3-sfc-loader/dev/vue-template-compiler?label=For%20Vue%202)
- `npm install vue3-sfc-loader` (use 'vue3-sfc-loader/dist/vue2-sfc-loader.js')
- [jsDelivr](https://www.jsdelivr.com/package/npm/vue3-sfc-loader?path=dist) CDN: https://cdn.jsdelivr.net/npm/vue3-sfc-loader/dist/vue2-sfc-loader.js
- [UNPKG](https://unpkg.com/browse/vue3-sfc-loader/dist/) 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](https://browsersl.ist/#q=%3E+1%25%2C+last+8+versions%2C+Firefox+ESR%2C+not+dead%2C+IE+11)_see [`package.json`](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/main/package.json) "build" script_
_see [browserslist queries](https://github.com/browserslist/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`](https://unpkg.com/vue3-sfc-loader/dist/vue3-sfc-loader.report.html) = `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](https://github.com/FranckFreiburger/vue3-sfc-loader/discussions?discussions_q=category%3AQ%26A)#
[![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Load%20.vue%20files%20dynamically%20from%20your%20html%2Fjs%20without%20any%20build%20step%20!&url=https://github.com/FranckFreiburger/vue3-sfc-loader&via=F_Freiburger&hashtags=vue,vue3,developers)
# Financial contributors
Many thanks to people that support this project !
[![](https://opencollective.com/vue3-sfc-loader/tiers/backer.svg?avatarHeight=64)](https://opencollective.com/vue3-sfc-loader)