Vue3-sfc-loader - Load .vue files directly from your html, without build step

Show & Tell
#1

I am pleased to announce that I am working on vue3-sfc-loader : https://github.com/FranckFreiburger/vue3-sfc-loader

I will be happy to have your feedback !

short 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(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 { 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>
3 Likes
How to use @vue/compiler-sfc?
#2

My first impression is that it works very well for a small project where we wanted to integrate Vue in a Java / JSP / FreeMarker application, where your solution seems far easier than trying to add an NPM / Webpack environment to it, so thanks a lot for this! The nice thing is that whenever we do move on to a full Vue application, the Vue components that we’re creating now should be usable there as well.

1 Like
#3

Thanks.

It looks like the key part after loading the compiler module is to use it here

loadModule('./myComponent.vue)

For interest, here is something from the Vue 2 docs which could be relevant here on what code looks like with and without the compiler.

Compiler

If you need to compile templates on the client (e.g. passing a string to the template option, or mounting to an element using its in-DOM HTML as the template), you will need the compiler and thus the full build:

// this requires the compiler
new Vue({
  template: '<div>{{ hi }}</div>'
})

// this does not
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})