Custom fieldtype label showing in CP, but not the component itself.

[anakadote]

I just upgraded a Statamic v3.4 website to v4.14 (fwiw) and am now trying to create a custom fieldtype. I have followed the instructions but have an issue where my custom fieldtype is displaying in the CP, but only the label. I have ensured that my Vue component has content to display. I can see in Chrome devtools that the component is hidden (it displays as <!---->)

Is there something obvious that I'm missing?

[duncanmcclean]

Are you running your addon's watcher (npm run dev or npm run build) so changes to your Vue components get recompiled?

[anakadote]

@duncanmcclean yep, and I can even run code in the mounted() hook:

<template>
    <div>
        Hello World
    </div>
</template>

<script>
export default {
    mixins: [Fieldtype],
    data() {
        return {}
    },
    mounted() {
        console.log('hello, world')
    }
};
</script>

[anakadote]

I tried a bunch of different things to no avail, but was finally able to get my component to show up by inlining in:

<script>
export default {
    mixins: [Fieldtype],
    template: `<div>Hello World</div>`
};
</script>

[laborb-hs]

I recently had the same problem in an older statamic project.
It was still working with webpack and the project was upgraded to vue 3.x at some time.
So the CP fieldtype was not properly compiled for use in the still-vue-v2 control panel.

The solution was to upgrade the project to vite and then separate the compiling vue2 for cp and vue3 for frontend, as the documentation suggests.

In my case the inline templating was not resolving the issue.

Link to the docs: https://statamic.dev/extending/control-panel#using-vite