1

从 npm 的 vue-client-only 模块导入的 ClientOnly 组件在使用 vue-server-renderer 的服务器端渲染中不起作用。我在仅限客户端的标签中添加了 firebaseui 组件。我也尝试过较旧的 no-ssr 组件，但这也没有用。在浏览器中，它只显示空 html 注释来代替这些组件。请帮忙。

<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>

在浏览器中：

空 html 注释而不是 firebase ui 元素

4

0 回答 0