Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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.

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)