{"id":13824642,"url":"https://github.com/FranckFreiburger/vue3-sfc-loader","last_synced_at":"2025-07-08T19:32:39.436Z","repository":{"id":37848756,"uuid":"314497229","full_name":"FranckFreiburger/vue3-sfc-loader","owner":"FranckFreiburger","description":"Single File Component loader for Vue2 and Vue3. Load .vue files directly from your HTML. No node.js environment, no build step.","archived":false,"fork":false,"pushed_at":"2024-09-27T10:48:21.000Z","size":2369,"stargazers_count":1188,"open_issues_count":9,"forks_count":126,"subscribers_count":30,"default_branch":"main","last_synced_at":"2024-11-19T15:05:20.494Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/FranckFreiburger.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":null,"patreon":null,"open_collective":"vue3-sfc-loader","ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2020-11-20T08:52:04.000Z","updated_at":"2024-11-18T07:59:55.000Z","dependencies_parsed_at":"2024-11-19T23:45:39.244Z","dependency_job_id":"f9105623-6a3e-44b2-918d-e4e364554a66","html_url":"https://github.com/FranckFreiburger/vue3-sfc-loader","commit_stats":{"total_commits":789,"total_committers":7,"mean_commits":"112.71428571428571","dds":"0.22179974651457546","last_synced_commit":"4d9f9caa4ff8f7c4709786a1f755d79c515032fe"},"previous_names":[],"tags_count":47,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FranckFreiburger%2Fvue3-sfc-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FranckFreiburger%2Fvue3-sfc-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FranckFreiburger%2Fvue3-sfc-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FranckFreiburger%2Fvue3-sfc-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FranckFreiburger","download_url":"https://codeload.github.com/FranckFreiburger/vue3-sfc-loader/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225457823,"owners_count":17477359,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2024-08-04T09:01:06.430Z","updated_at":"2024-11-20T02:30:57.540Z","avatar_url":"https://github.com/FranckFreiburger.png","language":"JavaScript","funding_links":["https://opencollective.com/vue3-sfc-loader"],"categories":["Tools","JavaScript"],"sub_categories":[],"readme":"# vue3-sfc-loader\n\n###### [API](docs/api/README.md#loadmodule) | [FAQ](docs/faq.md) | [Examples](docs/examples.md) | [dist](#dist) | [Roadmap](../../issues/1)\n\nVue3/Vue2 Single File Component loader.  \nLoad .vue files dynamically at runtime from your html/js. No node.js environment, no (webpack) build step needed.  \n\n\n## Key Features\n\n * Supports Vue 3 and Vue 2 (see [dist/](#dist))\n * Only requires Vue runtime-only build\n * **esm** and **umd** bundles available ([example](docs/examples.md#using-esm-version))\n * Embedded ES6 modules support ( including `import()` )\n  * TypeScript support, JSX support\n * 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\n * SFC Custom Blocks support\n * Properly reports template, style or script errors through the [log callback](docs/api/interfaces/options.md#log)\n * Focuses on component compilation. Network, styles injection and cache are up to you (see [example below](#example))\n * Easily [build your own version](#build-your-own-version) and customize browsers you need to support\n\n\n## Example\n\n```html\n\u003chtml\u003e\n\u003cbody\u003e\n  \u003cdiv id=\"app\"\u003e\u003c/div\u003e\n  \u003cscript src=\"https://unpkg.com/vue@latest\"\u003e\u003c/script\u003e\n  \u003cscript src=\"https://cdn.jsdelivr.net/npm/vue3-sfc-loader/dist/vue3-sfc-loader.js\"\u003e\u003c/script\u003e\n  \u003cscript\u003e\n\n    const options = {\n      moduleCache: {\n        vue: Vue\n      },\n      async getFile(url) {\n        \n        const res = await fetch(url);\n        if ( !res.ok )\n          throw Object.assign(new Error(res.statusText + ' ' + url), { res });\n        return {\n          getContentData: asBinary =\u003e asBinary ? res.arrayBuffer() : res.text(),\n        }\n      },\n      addStyle(textContent) {\n\n        const style = Object.assign(document.createElement('style'), { textContent });\n        const ref = document.head.getElementsByTagName('style')[0] || null;\n        document.head.insertBefore(style, ref);\n      },\n    }\n\n    const { loadModule } = window['vue3-sfc-loader'];\n\n    const app = Vue.createApp({\n      components: {\n        'my-component': Vue.defineAsyncComponent( () =\u003e loadModule('./myComponent.vue', options) )\n      },\n      template: '\u003cmy-component\u003e\u003c/my-component\u003e'\n    });\n\n    app.mount('#app');\n\n  \u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### More Examples\n\n  see [all examples](docs/examples.md)\n\n\n## Try It Online\n\n  https://codepen.io/franckfreiburger/project/editor/AqPyBr\n\n\n## Public API documentation\n\n  **[loadModule](docs/api/README.md#loadmodule)**(`path`: string, `options`: [Options](/docs/api/README.md#options)): `Promise\u003cVueComponent\u003e`\n\n\n## dist/\n\n  [![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)\n  [\u003c!--update-min-br-size--\u003e![bundle minified+brotli size](https://img.shields.io/badge/min%2Bbr-385kB-blue)\u003c!--/update-min-br-size--\u003e](#dist)\n  [\u003c!--update-min-gz-size--\u003e![bundle minified+gzip size](https://img.shields.io/badge/min%2Bgz-488kB-blue)\u003c!--/update-min-gz-size--\u003e](#dist)\n  [\u003c!--update-min-size--\u003e![bundle minified size](https://img.shields.io/badge/min-1794kB-blue)\u003c!--/update-min-size--\u003e](#dist)\n  \n  [![browser support](https://img.shields.io/github/package-json/browserslist/FranckFreiburger/vue3-sfc-loader)](https://github.com/browserslist/browserslist#query-composition)\n\n  [![](https://data.jsdelivr.com/v1/package/npm/vue3-sfc-loader/badge)](https://www.jsdelivr.com/package/npm/vue3-sfc-loader)\n\n\u003c!--  \n  [![Vue3 compiler-sfc dependency version](https://img.shields.io/github/package-json/dependency-version/FranckFreiburger/vue3-sfc-loader/dev/@vue/compiler-sfc?label=embeds%20Vue3%20%40vue%2Fcompiler-sfc)](https://github.com/vuejs/vue-next/tree/master/packages/compiler-sfc)\n  [![Vue2 vue-template-compiler dependency version](https://img.shields.io/github/package-json/dependency-version/FranckFreiburger/vue3-sfc-loader/dev/vue-template-compiler?label=embeds%20Vue2%20vue-template-compiler)](https://github.com/vuejs/vue-next/tree/master/packages/compiler-sfc)\n--\u003e\n  \u003cbr\u003e\n\n\n  ![Vue3](https://img.shields.io/github/package-json/dependency-version/FranckFreiburger/vue3-sfc-loader/dev/@vue/compiler-sfc?label=For%20Vue%203)\n  - `npm install vue3-sfc-loader`\n  - [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\n  - [UNPKG](https://unpkg.com/browse/vue3-sfc-loader/dist/) CDN: https://unpkg.com/vue3-sfc-loader\n\n  **esm version**: `dist/vue3-sfc-loader.esm.js`  \n  **umd version**: `dist/vue3-sfc-loader.js`  \n  \n  \u003cbr\u003e\n\n  ![Vue2](https://img.shields.io/github/package-json/dependency-version/FranckFreiburger/vue3-sfc-loader/dev/vue-template-compiler?label=For%20Vue%202)\n  - `npm install vue3-sfc-loader` (use 'vue3-sfc-loader/dist/vue2-sfc-loader.js')\n  - [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\n  - [UNPKG](https://unpkg.com/browse/vue3-sfc-loader/dist/) CDN: https://unpkg.com/vue3-sfc-loader/dist/vue2-sfc-loader.js\n  \n  **esm version**: `dist/vue2-sfc-loader.esm.js`  \n  **umd version**: `dist/vue2-sfc-loader.js`  \n\n\n\n## Build your own version\n\n  Example: enable IE11 support  \n  `npx webpack --config ./build/webpack.config.js --mode=production --env targetsBrowsers=\"\u003e 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)\n\n  _see [`package.json`](https://github.com/FranckFreiburger/vue3-sfc-loader/blob/main/package.json) \"build\" script_  \n  _see [browserslist queries](https://github.com/browserslist/browserslist#queries)_  \n\n  **preliminary steps:**  \n  1. clone `vue3-sfc-loader`\n  1. (install yarn: `npm install --global yarn`)\n  1. run `yarn install`\n\n## How It Works\n\n  [`vue3-sfc-loader.js`](https://unpkg.com/vue3-sfc-loader/dist/vue3-sfc-loader.report.html) = `Webpack`( `@vue/compiler-sfc` + `@babel` )\n\n\n### more details\n\n  1. load the `.vue` file\n  1. parse and compile template, script and style sections (`@vue/compiler-sfc`)\n  1. transpile script and compiled template to es5 (`@babel`)\n  1. parse scripts for dependencies (`@babel/traverse`)\n  1. recursively resolve dependencies\n  1. merge all and return the component\n\n\n## Any Questions\n\n  \u003c!--  ask here: https://stackoverflow.com/questions/ask?tags=vue3-sfc-loader (see [previous questions](https://stackoverflow.com/questions/tagged/vue3-sfc-loader)) --\u003e\n  [:speech_balloon: ask in Discussions tab](https://github.com/FranckFreiburger/vue3-sfc-loader/discussions?discussions_q=category%3AQ%26A)\n\n\n#\n\n[![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!\u0026url=https://github.com/FranckFreiburger/vue3-sfc-loader\u0026via=F_Freiburger\u0026hashtags=vue,vue3,developers)\n\n\n\n# Financial contributors\n\nMany thanks to people that support this project !\n\n[![](https://opencollective.com/vue3-sfc-loader/tiers/backer.svg?avatarHeight=64)](https://opencollective.com/vue3-sfc-loader)\n\n\n\n\u003c!---\n\nconst Fs = require('fs');\nconst Path = require('path');\n\nconst { blockList, replaceBlock } = require('./evalHtmlCommentsTools.js');\n\nfunction fileSize(filename) {\n\n  try {\n\n    return Fs.statSync(Path.join(__dirname, filename)).size;\n  } catch {\n\n    return -1;\n  }\n\n}\n\nconst version = process.argv[3];\n\nlet result = ctx.wholeContent;\n\nresult = replaceBlock(result, 'update-min-br-size', content =\u003e content.replace(/-(.*?)-/, '-' + Math.floor(fileSize('../dist/vue3-sfc-loader.js.br')/1024) + 'kB' + '-'));\nresult = replaceBlock(result, 'update-min-gz-size', content =\u003e content.replace(/-(.*?)-/, '-' + Math.floor(fileSize('../dist/vue3-sfc-loader.js.gz')/1024) + 'kB' + '-'));\nresult = replaceBlock(result, 'update-min-size', content =\u003e content.replace(/-(.*?)-/, '-' + Math.floor(fileSize('../dist/vue3-sfc-loader.js')/1024) + 'kB' + '-'));\n\nresult;\n\n---\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FFranckFreiburger%2Fvue3-sfc-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FFranckFreiburger%2Fvue3-sfc-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FFranckFreiburger%2Fvue3-sfc-loader/lists"}