vue-tel-input
vue-tel-input copied to clipboard
Does not work with Quasar.js SSR mode
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.