Initialize Nuxt.js project with Docker deployment setup

- Add core Nuxt.js application structure with TypeScript
- Include Docker configuration and deployment guide
- Set up project scaffolding with pages, composables, and middleware
- Add environment configuration and Git ignore rules

pages/auth/callback.vue

@@ -0,0 +1,34 @@
+<template>
+  <v-app>
+    <v-main class="d-flex align-center justify-center min-h-screen">
+      <v-container>
+        <v-row justify="center">
+          <v-col cols="12" sm="6" md="4">
+            <v-card class="text-center pa-8">
+              <v-progress-circular
+                indeterminate
+                color="primary"
+                size="64"
+                class="mb-4"
+              />
+              <h2 class="text-h5 mb-2">Signing you in...</h2>
+              <p class="text-body-2 text-grey-600">
+                Please wait while we complete your authentication.
+              </p>
+            </v-card>
+          </v-col>
+        </v-row>
+      </v-container>
+    </v-main>
+  </v-app>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  auth: false,
+  layout: false,
+});
+
+// The actual authentication is handled by the server-side callback API
+// This page just shows a loading state while the redirect happens
+</script>

pages/index.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <!-- Redirect to dashboard if authenticated, otherwise to login -->
+  </div>
+</template>
+
+<script setup lang="ts">
+const { authenticated } = useAuth();
+
+// Redirect based on authentication status
+await navigateTo(authenticated.value ? '/dashboard' : '/login');
+</script>

pages/login.vue

@@ -0,0 +1,69 @@
+<template>
+  <v-app>
+    <v-main class="d-flex align-center justify-center min-h-screen bg-grey-lighten-4">
+      <v-container>
+        <v-row justify="center">
+          <v-col cols="12" sm="8" md="6" lg="4">
+            <v-card class="elevation-8 rounded-lg">
+              <v-card-text class="pa-8">
+                <div class="text-center mb-6">
+                  <v-img
+                    src="/logo.png"
+                    alt="MonacoUSA"
+                    max-width="120"
+                    class="mx-auto mb-4"
+                  />
+                  <h1 class="text-h4 font-weight-bold text-primary mb-2">
+                    MonacoUSA Portal
+                  </h1>
+                  <p class="text-body-1 text-grey-600">
+                    Sign in to access your dashboard
+                  </p>
+                </div>
+
+                <v-btn
+                  @click="handleLogin"
+                  :loading="loading"
+                  color="primary"
+                  size="large"
+                  block
+                  class="mb-4"
+                  prepend-icon="mdi-login"
+                >
+                  Sign In with SSO
+                </v-btn>
+
+                <div class="text-center">
+                  <p class="text-caption text-grey-600">
+                    Secure authentication powered by Keycloak
+                  </p>
+                </div>
+              </v-card-text>
+            </v-card>
+          </v-col>
+        </v-row>
+      </v-container>
+    </v-main>
+  </v-app>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  auth: false,
+  layout: false,
+});
+
+const { login } = useAuth();
+const loading = ref(false);
+
+const handleLogin = async () => {
+  loading.value = true;
+  try {
+    await login();
+  } catch (error) {
+    console.error('Login error:', error);
+  } finally {
+    loading.value = false;
+  }
+};
+</script>