[Vue warn]: Component <Anonymous> is missing template or render function during SSR

[kurtobando]

Hello,

Im getting this warning below, during SSR with Laravel + InertiaJS + Vue app.

[Vue warn]: Component <Anonymous> is missing template or render function

So far, this is my code below:

<template>
    <inner-image-zoom
        :alt="name"
        :hide-hint="true"
        :src="imageSource"
        :zoom-preload="true"
     />
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import InnerImageZoom from 'vue-inner-image-zoom';

export default defineComponent({
    name: 'ImageZoom',
    components: {
        InnerImageZoom,
    },
    props: {
        imageSource: {
            required: true,
            type: String,
        },
        name: {
            required: true,
            type: String,
        },
    },
});
</script>

<style scoped></style>

Any recommendation what am i missing here?

[kurtobando]

Okay, i made it work;

Referrence; https://stackoverflow.com/questions/64409157/vue-js-component-is-missing-template-or-render-function

So the code;

<template>
    <inner-image-zoom
        v-if="isMounted"
        :alt="name"
        :hide-hint="true"
        :src="imageSource"
        :zoom-preload="true"
     />
</template>

<script setup>
import { onMounted, ref } from 'vue';
import InnerImageZoom from 'vue-inner-image-zoom';

const isMounted = ref(false);

onMounted(() => (isMounted.value = true));

defineProps({
    imageSource: {
        required: true,
        type: String,
    },
    name: {
        required: true,
        type: String,
    },
});
</script>

<style scoped></style>

Only display the component if isMounted returns true.

Im not sure if this is the best way, however, this no longer returns vue warning messages during SSR