Package Exports

vue3-sfc-loader

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue3-sfc-loader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue3-sfc-loader

API | Examples | dist | Roadmap

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 and Vue 2 (see dist/)
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>