16.03 Create Tab Panels for Login & Register

src/pages/PageAuth.vue

@@ -1,13 +1,51 @@
 <template>
-  <p>Auth Page</p>
+  <q-page padding>
+    <q-card class="auth-tabs">
+      <q-tabs
+        v-model="tab"
+        dense
+        class="text-grey"
+        active-color="primary"
+        indicator-color="primary"
+        align="justify"
+        narrow-indicator
+      >
+        <q-tab name="login" label="Login" />
+        <q-tab name="register" label="Register" />
+      </q-tabs>
+
+      <q-separator />
+
+      <q-tab-panels v-model="tab" animated>
+        <q-tab-panel name="login">
+          <div class="text-h6">Login</div>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit.
+        </q-tab-panel>
+
+        <q-tab-panel name="register">
+          <div class="text-h6">Register</div>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit.
+        </q-tab-panel>
+      </q-tab-panels>
+    </q-card>
+  </q-page>
 </template>
 
 <script>
 export default {
+  name: 'Auth',
+  data () {
+    return {
+      tab: 'login'
+    }
+  }
 
 }
 </script>
 
 <style>
-
+  .auth-tabs {
+    max-width: 500px;
+    margin: 0 auto;
+  }
 </style>