vue 2 + webpack migration to vue 3 + vite (inline templates)

[MrPels]

So as the title say i am trying to migrate my code base over to vue 3 + vite. One of the biggest challenges is how inline templates has changed in vue 3, which is quite a challenge to say the least.

I have been following the migration guidelines from this article
https://v3-migration.vuejs.org/breaking-changes/inline-template-attribute.html
and are going with the "option 2" approach. (as option 1 does not seem to be working and all examples i can find on jsfiddle is broken).

Current status:

As far as i can gather from the migration guide the following example is how you now use what is considered inline templates.

HelloWorldSlotTemplate.Vue

<template>
    <slot 
    :combinedText="combinedText" 
    :changeText="changeText" 
    :logTest="logTest">
    </slot>
</template>
<script>
    import HelloWorld from './HelloWorld.vue';

    export default {
        components: {
            "hello" : HelloWorld
        },
        props: {
            extraText: {
                type: String,
                default: "I am extra!",
            },
        },
        data() {
            return {
                message: "Hello World!",
                changeText: false,
                clickCount: 0,
            }
        },
        methods: {
            logTest: function () {
                this.clickCount++;
                this.internalMethod();
            },
            internalMethod: function () {
                if(this.clickCount === 1){
                    alert('i am just an internal function! called the first time count increase!');
                }
            }
        },
        computed: {
            combinedText: function () {
                return this.message + " " + this.extraText + " " + this.clickCount;
            }
        },
        watch: {
            clickCount: function (val) {
                if(val === 5) {
                    alert('i have watched you click 5 times, show me another text!');
                    this.changeText = true;
                }
            }
        }
    };
</script>

You create a default slot in the template section, and expose what you want to render / call in the html. (you did not need to do this in vue 2 however, and all advice on this part is very welcome).

HelloWorld.Vue

<template>
    <h1>{{ message }}You like this text!</h1>
</template>
<script>
    export default {
        data() {
            return {
                message: "Hello World!",
            }
        },
    };
</script>

Then i use it on some html page like so:

<hello-world-slot-template v-slot="{ combinedText, changeText, logTest }">
            <h2 v-if="!changeText">Hello from inline template! {{ combinedText }}</h2>
            <h2 v-else>done!</h2>
            <button class="btn btn-primary" v-on:click="logTest">click</button>
            <hello></hello>
</hello-world-slot-template>

The problem i am experiencing is the locale registered component does not render but everything else does and i get a weird warning in my browser console.

[Vue warn]: Failed to resolve component: hello
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
at

I have tried what it suggest, but it does not work. I am wondering why it think of "hello" as a custom element, and not a vue component ?
My goal is to get it the local registered component to render, but i am not finding alot of examples on people using inline templates in generel in vue 3, so i am hoping someone with more vue 3 experience than me can enlighten me on the topic / problem.

The only note worthy thing to mention with my vite setup is i override "vue" with "vue.esm-bundler.js" to get the runtime compilation for templates. It enables me to mix and match static html with the vue code, which is a requirement due to some component needing to change their template sections html entirely based on brand specific project they are used in. And due to a lot of legacy css/html structure they deviate alot per project.

  resolve: {
    alias: {
      vue: 'vue/dist/vue.esm-bundler.js', 
    }
  },

If more information is needed i will be more than willing to provide it.

[Finn-paulsen]

Response #2

[canyon920]

vue-3 slot is :slot="slotname"

<hello-world v-slot="{ variable }" :slot="slotname">
            <h2 v-if="!changeText">Hello from inline template! {{ combinedText }}</h2>
            <h2 v-else>done!</h2>
            <button class="btn btn-primary" v-on:click="logTest">click</button>
            <hello></hello>
</hello-world>

nesty component two declaration your component is auto props