chore: playground fixes

Author: posva

Diff for: packages/nuxt/playground/pages/firestore-secure-doc.vue

@@ -3,14 +3,16 @@ import { doc, setDoc } from 'firebase/firestore'
 import { useCurrentUser, useFirestore, usePendingPromises } from 'vuefire'
 
 definePageMeta({
-  middleware: ['vuefire-auth']
+  middleware: ['vuefire-auth'],
 })
 
 const db = useFirestore()
 const user = useCurrentUser()
-const secretRef = computed(() => user.value ? doc(db, 'secrets', user.value.uid) : null)
+const secretRef = computed(() =>
+  user.value ? doc(db, 'secrets', user.value.uid) : null
+)
 
-const { data:secret, pending: isSecretLoading } = useDocument(secretRef)
+const { data: secret, pending: isSecretLoading } = useDocument(secretRef)
 
 const textSecret = ref('')
 function setSecret() {
@@ -22,22 +24,20 @@ function setSecret() {
 
 <template>
   <div>
-    <p v-if="!user">
-      Log in in the authentication page to test this.
-    </p>
-    <template v-else-if="secret">
+    <p v-if="!user">Log in in the authentication page to test this.</p>
+    <template v-else-if="isSecretLoading">
+      <p>Loading...</p>
+    </template>
+    <template v-else>
       <p>Secret Data for user {{ user.displayName }} ({{ user.uid }})</p>
       <pre v-if="secret">{{ secret }}</pre>
       <div v-else>
         <p>You have no secret. Do you want to create one?</p>
         <form @submit.prevent="setSecret()">
-          <input v-model="textSecret" type="text">
+          <input v-model="textSecret" type="text" />
           <button>Set the secret</button>
         </form>
       </div>
     </template>
-    <template v-else-if="isSecretLoading">
-      <p>Loading...</p>
-    </template>
   </div>
 </template>