компонент не работает в Vue рендеринге на стороне сервера с использованием vue -server-renderer - PullRequest
Новая
       154

компонент не работает в Vue рендеринге на стороне сервера с использованием vue -server-renderer

0 голосов
/ 28 мая 2020

Компонент ClientOnly, импортированный из модуля vue -client-only из npm, не работает при рендеринге на стороне сервера с помощью 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>

В браузере:

null html комментарии вместо элемента пользовательского интерфейса firebase

...