🚀 DAY 1 OF LAUNCH WEEK: Reachability for Ruby Now in Beta.Learn more →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

vue3-sfc-loader

Package Overview
Dependencies
Maintainers
1
Versions
43
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue3-sfc-loader

Single File Component loader

Source
npmnpm
Version
0.9.2
Version published
Maintainers
1
Created
Source

vue3-sfc-loader

API | FAQ | 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
  • esm and umd bundles available (example)
  • Embedded ES6 modules support ( including import() )
  • TypeScript support, JSX support
  • Custom CSS, HTML and Script language Support, see pug and stylus examples
  • SFC Custom Blocks support
  • Properly reports template, style or script errors through the log callback
  • Focuses on component compilation. Network, styles injection and cache are up to you (see example below)
  • 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 {
          getContentData: asBinary => asBinary ? res.arrayBuffer() : 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 bundle version bundle minified+brotli size bundle minified+gzip size bundle minified size

browser support


Vue3

esm version: dist/vue3-sfc-loader.esm.js
umd version: dist/vue3-sfc-loader.js


Vue2

esm version: dist/vue2-sfc-loader.esm.js
umd version: dist/vue2-sfc-loader.js

Build your own version

Example: enable IE11 support
npx webpack --config ./build/webpack.config.js --mode=production --env targetsBrowsers="> 1%, last 8 versions, Firefox ESR, not dead, IE 11" check

see package.json "build" script
see browserslist queries

preliminary steps:

  • clone vue3-sfc-loader
  • (install yarn: npm install --global yarn)
  • run yarn install

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

Tweet

Financial contributors

Many thanks to people that support this project !

Keywords

vue
vuejs
vue3
component-loader
nobuild

FAQs

Package last updated on 22 Jan 2024

Did you know?

Socket

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

Related posts

Reachability for Ruby Now in Beta

Product

Reachability for Ruby Now in Beta

Reachability analysis for Ruby is now in beta, helping teams identify which vulnerabilities are truly exploitable in their applications.

By Oskar Haarklou Veileborg  -  Nov 17, 2025
npm Malware Campaign Uses Adspect Cloaking to Deliver Malicious Redirects

Research

/

Security News

npm Malware Campaign Uses Adspect Cloaking to Deliver Malicious Redirects

Malicious npm packages use Adspect cloaking and fake CAPTCHAs to fingerprint visitors and redirect victims to crypto-themed scam sites.

By Olivia Brown  -  Nov 17, 2025