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

I am pleased to announce that I am working on vue3-sfc-loader :

I will be happy to have your feedback !

short example:

  <div id="app"></div>
  <script src=""></script>
  <script src=""></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>'


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


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


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.


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)