Usage with computed property and <component>

[titantwentyone]

First of all, apologies. I was going to post this on StackOverflow but the tag 'vue3-sfc-loader' has not been created and I didn't have enought reputation to create it. This felt like the next best place to ask (beg!) for help...

I'm starting a new project and decided to give Vue3 a bash. I've used http-vue-loader in a previous project and the author has kindly released vue3-sfc-loader to be used with Vue3. With the previosus library I was able to load up a Vue component dynamically:

<template>
  <div>
    <component :is="kitten"></component>
  </div>
</template>

<script>
module.exports = {
  name: 'app',
  computed: {
    kitten: function () {
      return window.httpVueLoader('components/my-kitten.vue');
    }
  }
};

</script>

I'm really unclear on how this would work with the new library. So far I have the following:

<template>
    <div>
        <component v-if="name" :is="currentLayout"></component>
        <p v-else>
            No Layout Selected
        </p>
    </div>
</template>

<script>
import { loadModule } from 'vue3-sfc-loader'
import { defineAsyncComponent } from 'vue'

export default {
    props: ['name'],
    computed: {
        currentLayout: function() {
            const options = {
                getFile(path) {
                    return fetch(path).then(res => res.ok ? res.text() : Promise.reject(res));
                },
                addStyle(textContent) {
                    const style = Object.assign(document.createElement('style'), { textContent });
                    const ref = document.head.getElementsByTagName('style')[0] || null;
                    document.head.insertBefore(style, ref);
                },
            };
            return defineAsyncComponent(() => loadModule('/theme/layouts/' + this.name + '.vue', options));
        }
    }
}
</script>

This results in an error:

Uncaught (in promise) Error: [object Response]
at eval (runtime-core.esm-bundler.js:3546)

To clarify my component, just for testing purposes, consists of a template:

<template>
    <h1>It Works!</h1>
</template>

Ultimately, I guess I'm unsure on how to handle the defineAsyncComponent.

I've experimented a bit and saw that amending the getFile method to return just res rather than res.text():

getFile(path) {
    return fetch(path).then(res => res.ok ? res : Promise.reject(res));
},

I got (possibly!) closer to where I want to be but with a new error:

Uncaught (in promise) TypeError: Unable to handle undefined files (/theme/layouts/homepage.vue), see additionalModuleHandlers
at eval (vue3-sfc-loader.js:22)
at Generator.next (<anonymous>)
at o (vue3-sfc-loader.js:22)

Any help appreciated!

[FranckFreiburger]

Hello titantwentyone,

The new github discussions tab is also a good place to ask questions (I will add this in the readme.md)!

getFile() must return a Promise to a file content (or a rejected Promise if something goes wrong).
If fetch(path) returns a rejected Promise, this mean that the file at path is not found, then you should check if the getFile(path) path argument points to an existing file:

                getFile(path) {
                    console.log('path:', path);
                    return fetch(path).then(res => res.ok ? res.text() : Promise.reject(res));
                },

[FranckFreiburger]

BTW, I just update getFile() in examples in order to get a more meaningful rejection :

      getFile(url) {

        return fetch(url).then(res => res.ok ? res.text() : Promise.reject( Object.assign(new Error(url+' '+res.statusText), { res }) ));
      },

[titantwentyone]

Thanks for getting back to me. I've been getting my head around defineAsyncComponent which is where my confusion was. My computed method only needs to return a string really. My other issue was getting hold of the main App object so assigned this to window.app and of course, failing to add a reference to Vue. (I've only delved into Vue a few times but planning on really understanding "the innards" this time - seeemed sensible to start with Vue3!). For reference, if anyone comes here for the same thing, my solution was:

<template>
    <div>
        <component v-if="name" :is="currentLayout"></component>
        <p v-else>
            No Layout Selected
        </p>
    </div>
</template>

<script>
import { loadModule } from 'vue3-sfc-loader'
import { defineAsyncComponent, createApp } from 'vue'
const Vue = require('vue');
import UI from '../components/ui.vue';

export default {
    props: ['name'],
    computed: {
        currentLayout: function() {
            const options = {
                moduleCache: {
                    vue: Vue,
                },
                getFile(path) {
                    return fetch(path).then(res => res.ok ? res.text() : Promise.reject(res));
                },
                addStyle(textContent) {
                    const style = Object.assign(document.createElement('style'), { textContent });
                    const ref = document.head.getElementsByTagName('style')[0] || null;
                    document.head.insertBefore(style, ref);
                },
            };

            window.app.component(this.name, defineAsyncComponent(() => loadModule('/theme/layouts/' + this.name + '.vue', options)));

            return this.name;
        }
    }
}
</script>

Hopefully you think this is okay but please tell me if there is a better way, Thanks again for your help.

[FranckFreiburger]

I think there is a reactivity issue with defineAsyncComponent(). this.name should be called in the computed's execution thread else the effect link between the computed function and the name update is lost.

try:

...
const name = this.name;
return defineAsyncComponent(() => loadModule('/theme/layouts/' + name + '.vue', options));

[FranckFreiburger]

Have a look at this example: https://github.com/FranckFreiburger/vue3-sfc-loader/blob/main/docs/examples.md#dynamic-component-is-special-attribute

[titantwentyone]

Ah yes! That's right. Seems to work initially then subsequent changes to "this.name" don't work in my example. This helps massively. Thank you.