# vue3-sfc-loader
Vue3 Single File Component loader

## Description

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


## Example

```html
<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 { loadModule } = window['vue3-sfc-loader'];

    const options = {

      moduleCache: {
        vue: Vue
      },

      getFile(url) {

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

      addStyle(styleStr) {

        const style = document.createElement('style');
        style.textContent = styleStr;
        const ref = document.head.getElementsByTagName('style')[0] || null;
        document.head.insertBefore(style, ref);
      }

    }

    const app = Vue.createApp({
      components: {
        'my-component': Vue.defineAsyncComponent( () => loadModule('./myComponent.vue', options) )
      },
      template: '<my-component></my-component>'
    });

    app.mount('#app');

  </script>
</body>
</html>
```


## Try it

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


## dist

  latest minified version:
  - at jsDelivr CDN: https://cdn.jsdelivr.net/npm/vue3-sfc-loader
  - at UNPKG CDN: https://unpkg.com/vue3-sfc-loader

### Bundle size
- \~380 kB minified + bz2
- \~1600 kB minified


## Public API

  **[loadModule](docs/api/README.md#loadmodule)**(`path`: string, `options`: [Options](docs/api/interfaces/options.md)): Promise\<Module>


## 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_


### targetsBrowsers

  see [browserslist queries](https://github.com/browserslist/browserslist#queries)


## How it works

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


### More details

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


## Previous version (for vue2)

  see https://github.com/FranckFreiburger/http-vue-loader


## Any questions ?

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


## More examples

  see [examples](docs/examples.md)
