vue-tel-input icon indicating copy to clipboard operation
vue-tel-input copied to clipboard

Does not work with Quasar.js SSR mode

Open NEOdinok opened this issue 9 months ago • 0 comments

I'm using Quasar.js version 2.12.0 with SSR mode

Here is my code for importing the component

<script setup lang="ts">
    import 'vue-tel-input/vue-tel-input.css';
    import { ref, onMounted, shallowRef, markRaw } from 'vue';

    const isClient = ref(false);
    const phone = ref('');
    const VueTelInput = shallowRef<any | null>(null); // Use shallowRef

    onMounted(async () => {
        isClient.value = true;
        const importedModule = await import('vue-tel-input');
        VueTelInput.value = markRaw(importedModule.default);
    });
</script>

Here is how it is used in the template

        <q-no-ssr>
            <component :is="VueTelInput" v-if="isClient" v-model="phone"></component>
        </q-no-ssr>

This is the only way i could import the component without 'document is not defined error' happening. Now my component looks commented in html like so:

An i get a warning saying: [Vue warn]: Component is missing template or render function.

NEOdinok avatar Oct 14 '23 15:10 NEOdinok