# sfc-loader **Repository Path**: cbjwwwcode/sfc-loader ## Basic Information - **Project Name**: sfc-loader - **Description**: No description available - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-01-07 - **Last Updated**: 2025-01-11 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # vue3-sfc-loader 根据开源项目 vue3-sfc-loader 修改优化使用, 分开打包含有jsx版本和未含有jsx版本用法和vue3-sfc-loader一样,window全局变量改成了 Vue3SfcRender ## Example ```html

``` ### 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)