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.2.16
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 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)
You can build your own version and easily customize browser support
Properly reports template, styles or script errors through the log callback
Support custom CSS, HTML and Script language, see pug example

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"></script>
  <script>

    const options = {

      moduleCache: {
        vue: Vue
      },

      getFile(path) {

        return fetch(path).then(res => res.ok ? res.text() : Promise.reject(res));
      },

      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 minified version at :

jsDelivr CDN: https://cdn.jsdelivr.net/npm/vue3-sfc-loader
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

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 ?

ask here: https://stackoverflow.com/questions/ask?tags=vue3-sfc-loader (see previous questions)

Previous version (for vue2)

see http-vue-loader

Keywords

FAQs

What is vue3-sfc-loader?

Is vue3-sfc-loader popular?

Is vue3-sfc-loader well maintained?

Package last updated on 07 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