FranckFreiburger / Vue3 Sfc Loader
Licence: mit
Vue3 Single File Component loader for Vue2 and Vue3. Load .vue files directly from your html/js. No node.js environment, no (webpack) build step.
Stars: ✭ 95
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vue3 Sfc Loader
Cordova Template Framework7 Vue Webpack
Framework7 - Vue - Webpack Cordova Template with Webpack Dev Server and Hot Module Replacement
Stars: ✭ 630 (+563.16%)
Mutual labels: babel, vue2
Hare
🐇 Application boilerplate based on Vue.js 2.x, Koa 2.x, Element-UI and Nuxt.js
Stars: ✭ 258 (+171.58%)
Mutual labels: babel, vue2
Webpack
🔥 A full-featured , A Weex and Vue.js project，which is an awesome solution for building Dingtalk microapp with extremely high performanece.
Stars: ✭ 81 (-14.74%)
Mutual labels: babel, vue2
Code2race
Solve the problem. 😊 If you like ❤ give us a star⭐. HACKTOBERFEST
Stars: ✭ 91 (-4.21%)
Mutual labels: babel
Awesome Coding Javascript
📌 持续构建个人的源码库（JavaScript 原生、常用库、数据结构、算法）
Stars: ✭ 88 (-7.37%)
Mutual labels: babel
React From Scratch
Building a Modern React App from Scratch in 2021
Stars: ✭ 87 (-8.42%)
Mutual labels: babel
Webpack Core Usage
webpack2完整系列课程，欢迎阅读。同时欢迎移步我的react全家桶文章全集: https://github.com/liangklfangl/react-article-bucket
Stars: ✭ 94 (-1.05%)
Mutual labels: babel
Perfectwindows
PerfectWindows 软件家族 - Windows 从未如此完美！
Stars: ✭ 1,326 (+1295.79%)
Mutual labels: easy-to-use
Babel Plugin React Persist
Automatically useCallback() & useMemo(); memoize inline functions
Stars: ✭ 91 (-4.21%)
Mutual labels: babel
Simpledialogfragments
A collection of easy to use and extendable DialogFragment's for Android
Stars: ✭ 94 (-1.05%)
Mutual labels: easy-to-use
Jsx Control Statements
Neater If and For for React JSX
Stars: ✭ 1,305 (+1273.68%)
Mutual labels: babel
Shortstack
🥞 minimal Rollup + PostCSS modern syntax starter template
Stars: ✭ 94 (-1.05%)
Mutual labels: babel
One Vue
仿韩寒「ONE · 一个」，基于vue2.0+混合式开发的一款跨终端、高性能、用户体验高的移动端App! 学习Vue的同学可以看下，感谢 Star 和 Fork!!
Stars: ✭ 93 (-2.11%)
Mutual labels: vue2
vue3-sfc-loader
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 (
dist/vue3-sfc-loader.js) and Vue 2 (dist/vue2-sfc-loader.js) - Only requires Vue runtime-only build
- Focuses on component compilation. Network, styles injection and cache are up to you (see example below)
- Embedded ES6 modules support ( including
import()) - SFC Custom Blocks support
- JSX support
- Custom CSS, HTML and Script language Support, see pug and stylus examples
- Properly reports template, style or script errors through the log callback
- Easily build your own version and customize browsers you need to support
Example
<html>
<body>
<div id="app"></div>
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader/dist/vue3-sfc-loader.js"></script>
<script>
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 await 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');
</script>
</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/
latest minified Vue3 version at :
- jsDelivr CDN: https://cdn.jsdelivr.net/npm/vue3-sfc-loader/dist/vue3-sfc-loader.js
- UNPKG CDN: https://unpkg.com/vue3-sfc-loader
-
npm install vue3-sfc-loader(./node_modules/vue3-sfc-loader/dist/vue3-sfc-loader.js)
latest minified Vue2 version at :
- 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
-
npm install vue3-sfc-loader(./node_modules/vue3-sfc-loader/dist/vue2-sfc-loader.js)
Build your own version
webpack --config ./build/webpack.config.js --mode=production --env targetsBrowsers="> 1%, last 2 versions, Firefox ESR, not dead, not ie 11"
see package.json "build" script
see browserslist queries
How It Works
vue3-sfc-loader.js = Webpack( @vue/compiler-sfc + @babel )
more details
- load the
.vuefile - parse and compile template, script and style sections (
@vue/compiler-sfc) - transpile script and compiled template to es5 (
@babel) - parse scripts for dependencies (
@babel/traverse) - recursively resolve dependencies
- merge all and return the component
Any Questions
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].