Only requires Vue3 runtime
Focuses on component compilation. Network, styles injection and cache are up to you (see example below)
Embedded ES6 modules support ( including import() )
Support custom CSS, HTML and Script language, see pug and stylus examples
Properly reports template, style or script errors through the log callback
You can build your own version and easily 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(url+' '+res.statusText), { 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 examples

Try It Online _{:test_tube:}

https://codepen.io/franckfreiburger/project/editor/AqPyBr

Public API _:book:

loadModule(path: string, options: Options): Promise<Module>

dist/ _:package:

latest minified 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 (here: ./node_modules/vue3-sfc-loader/dist/vue3-sfc-loader.js)

Build your own version _{:hammer_and_wrench:}

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 _:gear:

vue3-sfc-loader.js = Webpack( @vue/compiler-sfc + @babel )

more details _:mag:

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 _:question:

:speech_balloon: ask in Discussions tab

Previous version (for vue2)

see http-vue-loader _:zzz:

Keywords

FAQs

What is vue3-sfc-loader?

Is vue3-sfc-loader popular?

Is vue3-sfc-loader well maintained?

Package last updated on 14 Dec 2020

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