Skip to content

Vue3 Single File Component loader. Load .vue files directly from your html/js. No node.js environment, no (webpack) build step.

License

Notifications You must be signed in to change notification settings

titantwentyone/vue3-sfc-loader

 
 

Repository files navigation

vue3-sfc-loader

Vue3 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

  • 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 example
  • 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 🧪

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

Public API 📖

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

dist/ 📦

latest bundle version bundle minified size bundle minified+zip size bundle minified+bz2 size Snyk Vulnerabilities for vue3-sfc-loader browser support compiler-sfc dependency version

latest minified version at :

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 🔍

  1. load the .vue file
  2. parse and compile template, script and style sections (@vue/compiler-sfc)
  3. transpile script and compiled template to es5 (@babel)
  4. parse scripts for dependencies (@babel/traverse)
  5. recursively resolve dependencies
  6. merge all and return the component

Any Questions

💬 ask in Discussions tab

Previous version (for vue2)

see http-vue-loader 💤

Tweet

About

Vue3 Single File Component loader. Load .vue files directly from your html/js. No node.js environment, no (webpack) build step.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 46.2%
  • JavaScript 45.7%
  • HTML 7.6%
  • Vue 0.5%