refactor: everything to nuxt.js

app/pages/profile.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { useAuthStore } from '~/stores/auth';
+import { ref } from 'vue';
+
+definePageMeta({ title: 'Member Profile' });
+
+const authStore = useAuthStore();
+const newName = ref<string | undefined>();
+
+const editName = async () => {
+  if (newName.value) {
+    try {
+      await authStore.updateName(newName.value);
+      newName.value = undefined;
+    } catch (e) {
+      console.log(e);
+    }
+  } else {
+    newName.value = authStore.currentUser?.name || '';
+  }
+};
+</script>
+
+<template>
+  <q-page padding class="row">
+    <q-list class="col-sm-4 col-12">
+      <q-separator />
+      <q-item>
+        <q-item-section avatar>
+          <q-avatar icon="person" />
+        </q-item-section>
+        <q-item-section>
+          <q-item-label caption>Name</q-item-label>
+          <q-input
+            filled
+            v-model="newName"
+            @keydown.enter.prevent="editName"
+            v-if="newName !== undefined" />
+          <div v-else>{{ authStore.currentUser?.name }}</div>
+        </q-item-section>
+        <q-item-section avatar>
+          <q-btn
+            square
+            @click="editName"
+            :icon="newName !== undefined ? 'check' : 'edit'" />
+          <q-btn
+            v-if="newName !== undefined"
+            square
+            color="negative"
+            @click="newName = undefined"
+            icon="cancel" />
+        </q-item-section>
+      </q-item>
+      <q-item>
+        <q-item-section avatar>
+          <q-avatar icon="email" />
+        </q-item-section>
+        <q-item-section>
+          <q-item-label caption>E-mail</q-item-label>
+          {{ authStore.currentUser?.email }}
+        </q-item-section>
+      </q-item>
+      <q-separator />
+      <q-item>
+        <q-item-section>
+          <q-item-label overline>Certifications</q-item-label>
+          <div>
+            <q-chip square icon="verified" color="green" text-color="white">J/27</q-chip>
+            <q-chip square icon="verified" color="blue" text-color="white">Capri25</q-chip>
+            <q-chip square icon="verified" color="grey-9" text-color="white">Night</q-chip>
+          </div>
+        </q-item-section>
+      </q-item>
+    </q-list>
+  </q-page>
+</template>