Any examples for vue2-sfc-loader?

[jangxx]

I can't seem to figure out how to use the vue2-sfc-loader. If I simply include https://cdn.jsdelivr.net/npm/vue3-sfc-loader/dist/vue2-sfc-loader.js, nothing seems to get added to the window object, so code like

const { loadModule } = window['vue3-sfc-loader'];

or

const { loadModule } = window['vue2-sfc-loader'];

just fails. Does the Vue 2 version work different from the Vue 3 version somehow? Unfortunately there are no example for the Vue 2 version, and I really don't want to dig through the minified source to try and find out how this is supposed to work, so it would be good if you could provide an example of how the Vue 2 version is supposed to be used.

[jangxx]

Okay never mind, I figured it out. But Vue 2 doesn't seem to use Vue.defineAsyncComponent, so it would still be good to have an example of how to use this library.

[jangxx]

It's as simple as

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

apparently. Sorry for the issue spam.

[FranckFreiburger]

You are right, here is an example : https://github.com/FranckFreiburger/vue3-sfc-loader/blob/main/docs/examples.md#vue2-basic-example

[jangxx]

You don't have to wait for the module to be ready though. You can simply specify a function as the component which returns a promise resolving to the component later: https://vuejs.org/v2/guide/components-dynamic-async.html#Async-Components

[FranckFreiburger]

Oh yeah, but I'm not sure it works for the main component

[jangxx]

I'm doing it right now and it works fine (not with createApp, but with new Vue({})), but you can of course always test it for yourself.

[Atom02]

I'm doing it right now and it works fine (not with createApp, but with new Vue({})), but you can of course always test it for yourself.

sorry bumping old thread.. but do you have example of working code? with vue2

[btstw]

You don't have to wait for the module to be ready though. You can simply specify a function as the component which returns a promise resolving to the component later: https://vuejs.org/v2/guide/components-dynamic-async.html#Async-Components

It works, thx!!!

const { loadModule, vueVersion } = window['vue2-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);
    },
    log(type, ...args) {
        console.log(type, ...args);
    }
}

Vue.component('my-component', () => loadModule('/components/my-component.vue', options));

[SharkFourSix]

const app = Vue.createApp({

Bump. Vue.createApp is for Vue 3