ClientOnly component imported from vue-client-only module from npm is not working in server-side rendering with vue-server-renderer. I have added firebaseui component inside the client-only tags. I have also tried the older no-ssr component, but that also did not work. In the browseer it only shows null html comments in place of these components. Please help.
<template>
<v-container fluid>
<h3>Sign Up Page</h3>
<client-only>
<h2>Client Only Component</h2>
<div id="firebaseui-auth-container"></div>
</client-only>
</v-container>
</template>
<script>
import firebase from "firebase/app";
import ClientOnly from "vue-client-only";
if (process.browser || process.client) {
import("firebaseui").then(module => {
const firebaseui = module;
const ui = new firebaseui.auth.AuthUI(firebase.auth());
ui.start("#firebaseui-auth-container", {
signInOptions: [
{
provider: firebase.auth.GoogleAuthProvider.PROVIDER_ID
}
],
signInSuccessUrl: "/"
});
});
}
export default {
name: "Authentication",
components: {
ClientOnly
},
mounted() {}
};
</script>
In the browser :
