feat: nuxt basics

front-nuxt/app/app.config.ts

@@ -0,0 +1,2 @@
+export default defineAppConfig({
+})

front-nuxt/app/app.vue

@@ -1,6 +1,5 @@
 <template>
-  <div>
-    <NuxtRouteAnnouncer />
-    <NuxtWelcome />
-  </div>
+    <NuxtLayout>
+        <NuxtPage />
+    </NuxtLayout>
 </template>

front-nuxt/app/error.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { NuxtError } from "#app";
+
+const { error } = defineProps({
+    error: Object as () => NuxtError,
+});
+</script>
+
+<template>
+    <div>
+        <h1>{{ error?.statusCode }}</h1>
+        <NuxtLink to="/">Go back home</NuxtLink>
+    </div>
+</template>

front-nuxt/app/layouts/auth.vue

@@ -0,0 +1,6 @@
+<template>
+    <header>
+        Loging header actions
+    </header>
+    <slot/>
+</template>

front-nuxt/app/layouts/default.vue

@@ -0,0 +1,7 @@
+<template>
+    <main>
+        <header>Header</header>
+        <slot />
+        <footer>Footer</footer>
+    </main>
+</template>

front-nuxt/app/middleware/auth.global.ts

@@ -0,0 +1,8 @@
+export default defineNuxtRouteMiddleware((to, from) => {
+    const userStore = useUserStore();
+    console.log(
+        ">> Global Middleware from ",
+        from.query,
+        userStore.profile,
+    );
+});

front-nuxt/app/middleware/login.ts

@@ -0,0 +1,3 @@
+export default defineNuxtRouteMiddleware((to, from) => {
+    console.log(">> Middleware from ", from.query);
+})

front-nuxt/app/pages/about.vue

@@ -0,0 +1,5 @@
+<template>
+    <div>
+        About
+    </div>
+</template>

front-nuxt/app/pages/index.vue

@@ -0,0 +1,3 @@
+<template>
+    <div>Main page</div>
+</template>

front-nuxt/app/pages/login.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+definePageMeta({
+    layout: "auth",
+    middleware: "login",
+});
+
+const userStore = useUserStore();
+const setUpUser = () => {
+    userStore.update({
+        id: "1",
+        name: "My name",
+        roles: ["user", "manager"],
+    });
+};
+</script>
+
+<template>
+    <div>
+        Login form
+        <div>
+            User profile:
+            {{ userStore.profile }}
+        </div>
+        <button @click="setUpUser">Login</button>
+    </div>
+</template>

front-nuxt/app/plugins/log-errors.client.ts

@@ -0,0 +1,10 @@
+export default defineNuxtPlugin((nuxtApp) => {
+    nuxtApp.vueApp.config.errorHandler = (error, instance, info) => {
+        // handle error, e.g. report to a service
+    }
+
+    // Also possible
+    nuxtApp.hook('vue:error', (error, instance, info) => {
+        // handle error, e.g. report to a service
+    })
+})

front-nuxt/app/stores/user.ts

@@ -0,0 +1,46 @@
+type Role = "user" | "manager" | "admin";
+
+interface ApiSession {
+    exp?: number;
+    accessToken: string;
+    refreshToken?: string;
+}
+
+interface User {
+    id: string;
+    roles: Role[];
+    image?: string;
+    name?: string;
+    apiSession?: ApiSession;
+}
+
+export const useUserStore = defineStore("user", {
+    state: (): User => {
+        const user = useCookie("userSession", {
+            default: (): User => ({ id: "-1", roles: [] }),
+            watch: false,
+        });
+        return user.value;
+    },
+    getters: {
+        profile: (state) => ({
+            id: state.id,
+            name: state.name,
+            image: state.image,
+            roles: state.roles,
+        }),
+    },
+    actions: {
+        persist() {
+            const user = useCookie("userSession", {
+                default: (): User => ({ id: "-1", roles: [] }),
+                watch: false,
+            });
+            user.value ||= this.profile;
+        },
+        update(user: User) {
+            this.$state = user;
+            this.persist();
+        },
+    },
+});