feat: fix page transitions

Fix page transitions. Turns out there is a bug in Vue itself. Fixed by adding a div to make sure there
is only one root element. vuejs/core#8105

Localization of route navigation was missing in a few places.

Update nuxt dev server to host on local network. This way the application can be viewed on mobile.

Fix a-tag underlines showing on mobile. Also added global style sheet, main.scss.

app.vue

@@ -1,18 +1,12 @@
 <template>
   <VApp>
     <NuxtLayout>
-      <NuxtPage />
+      <!-- page transition -->
+      <VFadeTransition mode="out-in">
+        <div :key="$route.fullPath">
+          <NuxtPage />
+        </div>
+      </VFadeTransition>
     </NuxtLayout>
   </VApp>
 </template>
-
-<style>
-  .page-enter-active,
-  .page-leave-active {
-    transition: all 0.3s;
-  }
-  .page-enter-from,
-  .page-leave-to {
-    opacity: 0;
-  }
-</style>

assets/scss/main.scss

@@ -0,0 +1,4 @@
+a {
+  // link underlines were showing on iOS
+  text-decoration: none !important;
+}

components/user/Button.vue

@@ -3,12 +3,15 @@
     rounded="lg"
     :prepend-icon="auth.isLoggedIn ? 'mdi-logout' : 'mdi-login'"
     variant="text"
-    @click="auth.isLoggedIn ? signoutUser() : navigateTo('/user/login')"
+    @click="
+      auth.isLoggedIn ? signoutUser() : navigateTo(localePath('/user/login'))
+    "
   >
     {{ auth.isLoggedIn ? $t('user.sign_out') : $t('user.sign_in') }}
   </VBtn>
 </template>
 
 <script setup lang="ts">
   const auth = useAuthStore()
+  const localePath = useLocalePath()
 </script>

composables/useFirebaseAuth.ts

@@ -37,11 +37,12 @@ export const signinUser = async (email: string, password: string) => {
 export const signoutUser = async () => {
   const auth = getAuth()
   const app = useAppStore()
+  const localePath = useLocalePath()
 
   app.drawer = false
 
   // sign out user and navigate to home page
-  await navigateTo('/')
+  await navigateTo(localePath('/'))
   await auth.signOut()
 }
 

layouts/default.vue

@@ -5,7 +5,7 @@
     <NavHorizontal :routes="routes" />
 
     <!-- main content -->
-    <VMain class="ma-4">
+    <VMain class="ma-10">
       <slot />
     </VMain>
   </div>

middleware/auth.global.ts

@@ -12,5 +12,6 @@ export default defineNuxtRouteMiddleware((to) => {
   if (isLoggedIn && auth.hasAccessLevel(accessLevel)) return
 
   // user is not authenticated
-  return navigateTo('/user/login')
+  const localePath = useLocalePath()
+  return navigateTo(localePath('/user/login'))
 })

nuxt.config.ts

@@ -19,14 +19,15 @@ export default defineNuxtConfig({
     dirs: ['stores'],
   },
 
-  css: ['vuetify/styles'],
+  css: ['vuetify/styles', '@/assets/scss/main.scss'],
 
   modules: [
     '@nuxtjs/i18n',
     '@pinia/nuxt',
     'vuetify-nuxt-module',
     'nuxt-vitest',
   ],
+
   i18n: {
     lazy: false,
     langDir: 'locales',
@@ -68,10 +69,6 @@ export default defineNuxtConfig({
     vuetifyOptions: './config/vuetify/vuetify.config.ts',
   },
 
-  app: {
-    pageTransition: { name: 'page', mode: 'out-in' },
-  },
-
   // nuxt inlineSSRStyles not compatiable with Vuetify :(
   // https://github.com/userquin/vuetify-nuxt-module/issues/74
   experimental: {
@@ -82,4 +79,9 @@ export default defineNuxtConfig({
   devtools: {
     enabled: false,
   },
+
+  devServer: {
+    port: 8000, // default: 3000
+    host: '0.0.0.0', // default: localhost
+  },
 })

pages/user/login.vue

@@ -8,9 +8,11 @@
 </template>
 
 <script setup lang="ts">
+  const localePath = useLocalePath()
+
   const signIn = async () => {
     // test user credentials
     await signinUser('aasmund@cot.as', 'abc123+A')
-    await navigateTo('/')
+    await navigateTo(localePath('/'))
   }
 </script>