chore(core): upgrade nuxt3 stable, typing

Author: smorcuend

README.md

@@ -2,14 +2,16 @@
 
 Authenticated server-side rendering with Nuxt 3 and Auth0 API server middleware
 
+![Screenshot](assets/custom-server-authentication.png)
+
 ## Features
-- [💚 Nuxt 3](https://v3.nuxtjs.org) - SSR, ESR, File-based routing, components auto importing, modules, etc. Are you new in Nuxt3? We recommend to look at the [documentation](https://v3.nuxtjs.org/docs).
+- [💚 Nuxt 3](https://nuxt.com) - SSR, ESR, File-based routing, components auto importing, modules, etc. Are you new in Nuxt3? We recommend to look at the [documentation](https://nuxt.com/docs).
 
 - 🔥 The `<script setup>` syntax
 
-- 🚠 Auth0 SDK Authentication services
+- 🚠 Auth0 SDK Authentication services. Auth0 Federated Identity Management.
 
-- :lock: Hapi iron module for encapsulated tokens on Cookies 
+- Hapi iron module for encapsulated tokens on Cookies 
 
 - 🚀 The PrimeVue for styled components
 
@@ -25,6 +27,12 @@ We recommend using [VS Code](https://code.visualstudio.com/) with [Volar](https:
 First of all, you need to create Auth0 acount and SDK setup. 
 https://auth0.com/docs/quickstart/spa/vanillajs
 
+You need to create `.env` file with this content from Auth0 project (security credentials should never be shared):
+```bash
+cp .env.example .env
+```
+
+
 ## Setup
 
 Make sure to install the dependencies
@@ -51,10 +59,10 @@ Build the application for production:
 yarn build
 ```
 
-Checkout the [deployment documentation](https://v3.nuxtjs.org/docs/deployment).
+Checkout the [deployment documentation](https://nuxt.com/docs/getting-started/deployment).
 
 ## References
-- We recommend to look at the [Nuxt3](https://v3.nuxtjs.org).
+- We recommend to look at the [Nuxt3](https://nuxt.com).
 - [Auth0 API](https://auth0.com/docs/api/authentication)
 - [Primevue](https://www.primefaces.org/primevue/#/)
 - [Hapi Iron](https://hapi.dev/module/iron/)

assets/custom-server-authentication.png

@@ -2,7 +2,7 @@
   <div>
     <div class="grid">
       <div class="col-12">
-        <Menubar :model="items" >
+        <Menubar :model="items">
           <template #start>
             <img
               alt="logo"
@@ -14,8 +14,7 @@
           <template #end>
             <div v-if="user">
               <span class="m-2">
-                Welcome, <a href="/api/auth/me">{{ user.nickname }}</a> |
-                <a href="/api/auth/logout">Logout</a>
+                Welcome, {{ user.nickname }} | <a href="/api/auth/logout">Logout</a>
               </span>
               <Avatar :image="user.picture" shape="circle" />
             </div>
@@ -24,7 +23,7 @@
             </div>
           </template>
         </Menubar>
-        <Panel :header="route.name.toString()">
+        <Panel :header="route.name?.toString()">
           <slot />
         </Panel>
       </div>
@@ -40,18 +39,18 @@ const items = [
   {
     label: 'Home',
     icon: 'pi pi-fw pi-home',
-    to: '/',
+    to: '/'
   },
   {
     label: 'About',
     icon: 'pi pi-fw pi-file',
-    to: '/about',
+    to: '/about'
   },
   {
     label: 'Profile',
     icon: 'pi pi-fw pi-user',
     to: '/profile',
     visible: user.value != null
-  },
+  }
 ]
 </script>

layouts/default.vue

@@ -0,0 +1,15 @@
+import useUser from "~~/composables/useUser";
+
+export default defineNuxtRouteMiddleware((to, from) => {
+  const user = useUser()
+  const allowedRoutes = ['/', '/login']
+  if (user.value) {
+    if (allowedRoutes.includes(to.path)) {
+      return navigateTo('/private')
+    }
+  } else {
+    if (!allowedRoutes.includes(to.path)) {
+      return navigateTo('/login')
+    }
+  }
+})

middleware/watchdog.global.ts

@@ -0,0 +1,14 @@
+export type Meme = {
+  id: string
+  name: string
+  url: string
+  width: number
+  height: number
+}
+
+export type MemeResponse = {
+  success: boolean
+  data: {
+    memes: Meme[]
+  }
+}

models/Meme.ts

@@ -7,7 +7,6 @@ const {
   AUTH0_COOKIE_NAME
 } = process.env;
 
-// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
 export default defineNuxtConfig({
   app: {
     head: {
@@ -47,9 +46,5 @@ export default defineNuxtConfig({
     "primevue/resources/primevue.css",
     "primeicons/primeicons.css",
     "primeflex/primeflex.css"
-  ],
-  components: {
-    global: true,
-    dirs: ["~/components"]
-  }
+  ]
 });