Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

vue3-sfc-loader

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue3-sfc-loader

Vue3 Single File Component loader

0.5.0
Source
npm

Version published: 4 years ago

Weekly downloads: 3.5K; increased by23.06%

Maintainers: 1

Weekly downloads

Created: 4 years ago

Source

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/vue@next"></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 .vue file
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

:speech_balloon: ask in Discussions tab

Keywords

FAQs

What is vue3-sfc-loader?

Is vue3-sfc-loader popular?

Is vue3-sfc-loader well maintained?

Package last updated on 19 Mar 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

vue3-sfc-loader