refactor(frontend): migrate from Vite to Nuxt SPA

Replace Vite and Vue Router with Nuxt framework
Update Docker, build scripts, and env vars for Nuxt generate

frontend/src/App.vue

@@ -1,193 +0,0 @@
-<script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
-import AppShell from './components/AppShell.vue';
-import {
-  iconAction,
-  iconAdmin,
-  iconArtifact,
-  iconAutomation,
-  iconChecklist,
-  iconClothes,
-  iconDish,
-  iconDreamIsland,
-  iconEvent,
-  iconHabitat,
-  iconHome,
-  iconItem,
-  iconLife,
-  iconPokemon,
-  iconRecipe,
-  type AppIcon
-} from './icons';
-import { getCurrentLocale, loadSystemWordings, onLocaleChange, setCurrentLocale } from './i18n';
-import { api, getAuthToken, onAuthTokenChange, setAuthToken, type AuthUser, type Language } from './services/api';
-
-const { t, locale } = useI18n();
-
-const router = useRouter();
-const currentUser = ref<AuthUser | null>(null);
-const languages = ref<Language[]>([
-  { code: 'en', name: 'English', enabled: true, isDefault: true, sortOrder: 10 },
-  { code: 'zh-CN', name: '简体中文', enabled: true, isDefault: false, sortOrder: 20 }
-]);
-let removeAuthListener: (() => void) | null = null;
-let removeLocaleListener: (() => void) | null = null;
-
-type NavBadge = {
-  label: string;
-  tone?: 'info' | 'success' | 'warning' | 'danger' | 'neutral';
-};
-
-type NavLinkItem = {
-  label: string;
-  to: string;
-  icon?: AppIcon;
-  badge?: NavBadge;
-};
-
-type NavGroupItem = {
-  key: string;
-  label: string;
-  icon?: AppIcon;
-  children: NavLinkItem[];
-};
-
-type NavItem = NavLinkItem | NavGroupItem;
-
-function inDevBadge(): NavBadge {
-  return { label: t('common.inDev'), tone: 'info' };
-}
-
-function can(permissionKey: string) {
-  return currentUser.value?.permissions.includes(permissionKey) === true;
-}
-
-const navItems = computed<NavItem[]>(() => {
-  const items: NavItem[] = [
-    { label: t('nav.home'), to: '/', icon: iconHome },
-    {
-      key: 'pokedex',
-      label: t('nav.pokedex'),
-      icon: iconPokemon,
-      children: [
-        { label: t('nav.mainGame'), to: '/pokemon', icon: iconPokemon },
-        { label: t('nav.event'), to: '/event-pokemon', icon: iconEvent }
-      ]
-    },
-    {
-      key: 'habitat-dex',
-      label: t('nav.habitatDex'),
-      icon: iconHabitat,
-      children: [
-        { label: t('nav.mainGame'), to: '/habitats', icon: iconHabitat },
-        { label: t('nav.event'), to: '/event-habitats', icon: iconEvent }
-      ]
-    },
-    {
-      key: 'collections',
-      label: t('nav.collections'),
-      icon: iconItem,
-      children: [
-        { label: t('nav.mainGame'), to: '/items', icon: iconItem },
-        { label: t('nav.event'), to: '/event-items', icon: iconEvent },
-        { label: t('nav.ancientArtifacts'), to: '/ancient-artifacts', icon: iconArtifact }
-      ]
-    },
-    { label: t('nav.recipes'), to: '/recipes', icon: iconRecipe },
-    { label: t('nav.automation'), to: '/automation', icon: iconAutomation, badge: inDevBadge() },
-    { label: t('nav.dish'), to: '/dish', icon: iconDish },
-    { label: t('nav.events'), to: '/events', icon: iconEvent, badge: inDevBadge() },
-    { label: t('nav.actions'), to: '/actions', icon: iconAction, badge: inDevBadge() },
-    { label: t('nav.dreamIsland'), to: '/dream-island', icon: iconDreamIsland, badge: inDevBadge() },
-    { label: t('nav.clothes'), to: '/clothes', icon: iconClothes, badge: inDevBadge() },
-    { label: t('nav.checklist'), to: '/checklist', icon: iconChecklist },
-    { label: t('nav.life'), to: '/life', icon: iconLife }
-  ];
-
-  if (can('admin.access')) {
-    items.push({ label: t('nav.admin'), to: '/admin', icon: iconAdmin });
-  }
-
-  return items;
-});
-
-async function loadCurrentUser() {
-  if (!getAuthToken()) {
-    currentUser.value = null;
-    return;
-  }
-
-  try {
-    const response = await api.me();
-    currentUser.value = response.user;
-  } catch {
-    currentUser.value = null;
-    setAuthToken(null);
-  }
-}
-
-async function logout() {
-  try {
-    await api.logout();
-  } catch {
-    // The local session is cleared even when the server session is already gone.
-  }
-
-  currentUser.value = null;
-  setAuthToken(null);
-  await router.push('/');
-}
-
-async function loadLanguages() {
-  try {
-    const loadedLanguages = await api.languages();
-    if (loadedLanguages.length) {
-      languages.value = loadedLanguages;
-    }
-
-    if (!languages.value.some((language) => language.code === getCurrentLocale() && language.enabled)) {
-      setCurrentLocale('en');
-    }
-
-    await loadSystemWordings(getCurrentLocale());
-  } catch {
-    // Keep the built-in language list when the API is not ready yet.
-  }
-}
-
-async function updateLocale(value: string) {
-  await loadSystemWordings(value);
-  setCurrentLocale(value);
-}
-
-onMounted(() => {
-  void loadLanguages();
-  void loadCurrentUser();
-  removeAuthListener = onAuthTokenChange(() => {
-    void loadCurrentUser();
-  });
-  removeLocaleListener = onLocaleChange(() => {
-    void loadLanguages();
-  });
-});
-
-onUnmounted(() => {
-  removeAuthListener?.();
-  removeLocaleListener?.();
-});
-</script>
-
-<template>
-  <AppShell
-    :current-user="currentUser"
-    :languages="languages"
-    :locale="locale"
-    :nav-items="navItems"
-    @logout="logout"
-    @update:locale="updateLocale"
-  >
-    <RouterView :key="locale" />
-  </AppShell>
-</template>

frontend/src/i18n.ts

@@ -2,7 +2,7 @@ import { createI18n } from 'vue-i18n';
 import { defaultLocale, systemWordingMessages, type SystemWordingTree } from '../../system-wordings';
 
 export { defaultLocale } from '../../system-wordings';
-const apiBaseUrl = import.meta.env.VITE_API_BASE_URL ?? 'http://localhost:3001';
+let apiBaseUrl = 'http://localhost:3001';
 const localeStorageKey = 'pokopia_locale';
 const localeChangeEvent = 'pokopia-locale-change';
 
@@ -25,6 +25,12 @@ export const i18n = createI18n({
   messages
 });
 
+export function setSystemWordingsApiBaseUrl(value: unknown): void {
+  if (typeof value === 'string' && value.trim() !== '') {
+    apiBaseUrl = value.trim();
+  }
+}
+
 function readStoredLocale(): string {
   if (typeof localStorage === 'undefined') {
     return defaultLocale;
@@ -121,6 +127,10 @@ export function setCurrentLocale(locale: string): void {
 }
 
 export function onLocaleChange(callback: () => void): () => void {
+  if (typeof window === 'undefined') {
+    return () => {};
+  }
+
   window.addEventListener(localeChangeEvent, callback);
   return () => window.removeEventListener(localeChangeEvent, callback);
 }

frontend/src/main.ts

@@ -1,9 +0,0 @@
-import { createApp } from 'vue';
-import App from './App.vue';
-import { i18n } from './i18n';
-import { router } from './router';
-import { setupSeo } from './seo';
-import './styles/main.css';
-
-setupSeo(router);
-createApp(App).use(i18n).use(router).mount('#app');

frontend/src/router/index.ts

@@ -1,388 +0,0 @@
-import { createRouter, createWebHistory } from 'vue-router';
-import HomeView from '../views/HomeView.vue';
-import PokemonList from '../views/PokemonList.vue';
-import PokemonDetail from '../views/PokemonDetail.vue';
-import HabitatList from '../views/HabitatList.vue';
-import HabitatDetail from '../views/HabitatDetail.vue';
-import ItemsList from '../views/ItemsList.vue';
-import ItemDetail from '../views/ItemDetail.vue';
-import AncientArtifactList from '../views/AncientArtifactList.vue';
-import RecipeList from '../views/RecipeList.vue';
-import RecipeDetail from '../views/RecipeDetail.vue';
-import DailyChecklistView from '../views/DailyChecklistView.vue';
-import LifePostDetail from '../views/LifePostDetail.vue';
-import LifeView from '../views/LifeView.vue';
-import DishView from '../views/DishView.vue';
-import ProjectUpdatesView from '../views/ProjectUpdatesView.vue';
-import LegalView from '../views/LegalView.vue';
-import ComingSoonView from '../views/ComingSoonView.vue';
-import AdminView from '../views/AdminView.vue';
-import ForgotPasswordView from '../views/ForgotPasswordView.vue';
-import LoginView from '../views/LoginView.vue';
-import UserProfileView from '../views/UserProfileView.vue';
-import RegisterView from '../views/RegisterView.vue';
-import ResetPasswordView from '../views/ResetPasswordView.vue';
-import VerifyEmailView from '../views/VerifyEmailView.vue';
-import { api, getAuthToken, setAuthToken } from '../services/api';
-import type { RouteSeoConfig } from '../seo';
-
-const seo = (config: RouteSeoConfig) => config;
-
-export const router = createRouter({
-  history: createWebHistory(),
-  routes: [
-    { path: '/', name: 'home', component: HomeView, meta: { seo: seo({ titleKey: 'pages.home.title', descriptionKey: 'pages.home.subtitle', canonicalPath: '/' }) } },
-    {
-      path: '/pokemon',
-      name: 'pokemon-list',
-      component: PokemonList,
-      props: { eventOnly: false },
-      meta: { seo: seo({ titleKey: 'pages.pokemon.title', descriptionKey: 'pages.pokemon.subtitle' }) }
-    },
-    {
-      path: '/pokemon/new',
-      name: 'pokemon-new',
-      component: PokemonList,
-      props: { eventOnly: false },
-      meta: {
-        requiredPermission: 'pokemon.create',
-        editorModal: true,
-        seo: seo({ titleKey: 'pages.pokemon.newTitle', descriptionKey: 'pages.pokemon.editSubtitle', canonicalPath: '/pokemon', noindex: true })
-      }
-    },
-    {
-      path: '/event-pokemon',
-      name: 'event-pokemon-list',
-      component: PokemonList,
-      props: { eventOnly: true },
-      meta: { seo: seo({ titleKey: 'pages.eventPokemon.title', descriptionKey: 'pages.eventPokemon.subtitle', canonicalPath: '/event-pokemon' }) }
-    },
-    {
-      path: '/event-pokemon/new',
-      name: 'event-pokemon-new',
-      component: PokemonList,
-      props: { eventOnly: true },
-      meta: {
-        requiredPermission: 'pokemon.create',
-        editorModal: true,
-        seo: seo({ titleKey: 'pages.eventPokemon.newTitle', descriptionKey: 'pages.eventPokemon.editSubtitle', canonicalPath: '/event-pokemon', noindex: true })
-      }
-    },
-    {
-      path: '/pokemon/:id/edit',
-      name: 'pokemon-edit',
-      component: PokemonDetail,
-      meta: {
-        requiredPermission: 'pokemon.update',
-        editorModal: true,
-        seo: seo({
-          titleKey: 'pages.pokemon.editKicker',
-          descriptionKey: 'pages.pokemon.editSubtitle',
-          canonicalPath: (route) => `/pokemon/${String(route.params.id)}`,
-          noindex: true
-        })
-      }
-    },
-    { path: '/pokemon/:id', name: 'pokemon-detail', component: PokemonDetail, meta: { seo: seo({ titleKey: 'pages.pokemon.detailKicker', descriptionKey: 'pages.pokemon.subtitle' }) } },
-    {
-      path: '/habitats',
-      name: 'habitat-list',
-      component: HabitatList,
-      props: { eventOnly: false },
-      meta: { seo: seo({ titleKey: 'pages.habitats.title', descriptionKey: 'pages.habitats.subtitle' }) }
-    },
-    {
-      path: '/habitats/new',
-      name: 'habitat-new',
-      component: HabitatList,
-      props: { eventOnly: false },
-      meta: {
-        requiredPermission: 'habitats.create',
-        editorModal: true,
-        seo: seo({ titleKey: 'pages.habitats.newTitle', descriptionKey: 'pages.habitats.editSubtitle', canonicalPath: '/habitats', noindex: true })
-      }
-    },
-    {
-      path: '/event-habitats',
-      name: 'event-habitat-list',
-      component: HabitatList,
-      props: { eventOnly: true },
-      meta: { seo: seo({ titleKey: 'pages.eventHabitats.title', descriptionKey: 'pages.eventHabitats.subtitle', canonicalPath: '/event-habitats' }) }
-    },
-    {
-      path: '/event-habitats/new',
-      name: 'event-habitat-new',
-      component: HabitatList,
-      props: { eventOnly: true },
-      meta: {
-        requiredPermission: 'habitats.create',
-        editorModal: true,
-        seo: seo({ titleKey: 'pages.eventHabitats.newTitle', descriptionKey: 'pages.eventHabitats.editSubtitle', canonicalPath: '/event-habitats', noindex: true })
-      }
-    },
-    {
-      path: '/habitats/:id/edit',
-      name: 'habitat-edit',
-      component: HabitatDetail,
-      meta: {
-        requiredPermission: 'habitats.update',
-        editorModal: true,
-        seo: seo({
-          titleKey: 'pages.habitats.detailKicker',
-          descriptionKey: 'pages.habitats.editSubtitle',
-          canonicalPath: (route) => `/habitats/${String(route.params.id)}`,
-          noindex: true
-        })
-      }
-    },
-    { path: '/habitats/:id', name: 'habitat-detail', component: HabitatDetail, meta: { seo: seo({ titleKey: 'pages.habitats.detailKicker', descriptionKey: 'pages.habitats.subtitle' }) } },
-    {
-      path: '/items',
-      name: 'item-list',
-      component: ItemsList,
-      props: { eventOnly: false },
-      meta: { seo: seo({ titleKey: 'pages.items.title', descriptionKey: 'pages.items.subtitle' }) }
-    },
-    {
-      path: '/items/new',
-      name: 'item-new',
-      component: ItemsList,
-      props: { eventOnly: false },
-      meta: {
-        requiredPermission: 'items.create',
-        editorModal: true,
-        seo: seo({ titleKey: 'pages.items.newTitle', descriptionKey: 'pages.items.editSubtitle', canonicalPath: '/items', noindex: true })
-      }
-    },
-    {
-      path: '/event-items',
-      name: 'event-item-list',
-      component: ItemsList,
-      props: { eventOnly: true },
-      meta: { seo: seo({ titleKey: 'pages.eventItems.title', descriptionKey: 'pages.eventItems.subtitle', canonicalPath: '/event-items' }) }
-    },
-    {
-      path: '/event-items/new',
-      name: 'event-item-new',
-      component: ItemsList,
-      props: { eventOnly: true },
-      meta: {
-        requiredPermission: 'items.create',
-        editorModal: true,
-        seo: seo({ titleKey: 'pages.eventItems.newTitle', descriptionKey: 'pages.eventItems.editSubtitle', canonicalPath: '/event-items', noindex: true })
-      }
-    },
-    {
-      path: '/items/:id/edit',
-      name: 'item-edit',
-      component: ItemDetail,
-      meta: {
-        requiredPermission: 'items.update',
-        editorModal: true,
-        seo: seo({
-          titleKey: 'pages.items.editKicker',
-          descriptionKey: 'pages.items.editSubtitle',
-          canonicalPath: (route) => `/items/${String(route.params.id)}`,
-          noindex: true
-        })
-      }
-    },
-    { path: '/items/:id', name: 'item-detail', component: ItemDetail, meta: { seo: seo({ titleKey: 'pages.items.detailKicker', descriptionKey: 'pages.items.subtitle' }) } },
-    {
-      path: '/ancient-artifacts',
-      name: 'ancient-artifact-list',
-      component: AncientArtifactList,
-      meta: { seo: seo({ titleKey: 'pages.ancientArtifacts.title', descriptionKey: 'pages.ancientArtifacts.subtitle' }) }
-    },
-    {
-      path: '/ancient-artifacts/new',
-      name: 'ancient-artifact-new',
-      component: AncientArtifactList,
-      meta: {
-        requiredPermission: 'items.create',
-        editorModal: true,
-        seo: seo({
-          titleKey: 'pages.ancientArtifacts.newTitle',
-          descriptionKey: 'pages.ancientArtifacts.editSubtitle',
-          canonicalPath: '/ancient-artifacts',
-          noindex: true
-        })
-      }
-    },
-    {
-      path: '/ancient-artifacts/:id/edit',
-      name: 'ancient-artifact-edit',
-      component: ItemDetail,
-      meta: {
-        requiredPermission: 'items.update',
-        editorModal: true,
-        seo: seo({
-          titleKey: 'pages.ancientArtifacts.editKicker',
-          descriptionKey: 'pages.ancientArtifacts.editSubtitle',
-          canonicalPath: (route) => `/ancient-artifacts/${String(route.params.id)}`,
-          noindex: true
-        })
-      }
-    },
-    {
-      path: '/ancient-artifacts/:id',
-      name: 'ancient-artifact-detail',
-      component: ItemDetail,
-      meta: { seo: seo({ titleKey: 'pages.ancientArtifacts.detailKicker', descriptionKey: 'pages.ancientArtifacts.subtitle' }) }
-    },
-    { path: '/recipes', name: 'recipe-list', component: RecipeList, meta: { seo: seo({ titleKey: 'pages.recipes.title', descriptionKey: 'pages.recipes.subtitle' }) } },
-    {
-      path: '/recipes/new',
-      name: 'recipe-new',
-      component: RecipeList,
-      meta: {
-        requiredPermission: 'recipes.create',
-        editorModal: true,
-        seo: seo({ titleKey: 'pages.recipes.newTitle', descriptionKey: 'pages.recipes.editSubtitle', canonicalPath: '/recipes', noindex: true })
-      }
-    },
-    {
-      path: '/recipes/:id/edit',
-      name: 'recipe-edit',
-      component: RecipeDetail,
-      meta: {
-        requiredPermission: 'recipes.update',
-        editorModal: true,
-        seo: seo({
-          titleKey: 'pages.recipes.editKicker',
-          descriptionKey: 'pages.recipes.editSubtitle',
-          canonicalPath: (route) => `/recipes/${String(route.params.id)}`,
-          noindex: true
-        })
-      }
-    },
-    { path: '/recipes/:id', name: 'recipe-detail', component: RecipeDetail, meta: { seo: seo({ titleKey: 'pages.recipes.detailKicker', descriptionKey: 'pages.recipes.subtitle' }) } },
-    {
-      path: '/automation',
-      name: 'automation',
-      component: ComingSoonView,
-      props: { page: 'automation' },
-      meta: { seo: seo({ titleKey: 'pages.comingSoon.sections.automation.title', descriptionKey: 'pages.comingSoon.sections.automation.subtitle', noindex: true }) }
-    },
-    {
-      path: '/dish',
-      name: 'dish',
-      component: DishView,
-      meta: { seo: seo({ titleKey: 'pages.dish.title', descriptionKey: 'pages.dish.subtitle' }) }
-    },
-    {
-      path: '/events',
-      name: 'events',
-      component: ComingSoonView,
-      props: { page: 'events' },
-      meta: { seo: seo({ titleKey: 'pages.comingSoon.sections.events.title', descriptionKey: 'pages.comingSoon.sections.events.subtitle', noindex: true }) }
-    },
-    {
-      path: '/actions',
-      name: 'actions',
-      component: ComingSoonView,
-      props: { page: 'actions' },
-      meta: { seo: seo({ titleKey: 'pages.comingSoon.sections.actions.title', descriptionKey: 'pages.comingSoon.sections.actions.subtitle', noindex: true }) }
-    },
-    {
-      path: '/dream-island',
-      name: 'dream-island',
-      component: ComingSoonView,
-      props: { page: 'dreamIsland' },
-      meta: { seo: seo({ titleKey: 'pages.comingSoon.sections.dreamIsland.title', descriptionKey: 'pages.comingSoon.sections.dreamIsland.subtitle', noindex: true }) }
-    },
-    {
-      path: '/clothes',
-      name: 'clothes',
-      component: ComingSoonView,
-      props: { page: 'clothes' },
-      meta: { seo: seo({ titleKey: 'pages.comingSoon.sections.clothes.title', descriptionKey: 'pages.comingSoon.sections.clothes.subtitle', noindex: true }) }
-    },
-    { path: '/checklist', component: DailyChecklistView, meta: { seo: seo({ titleKey: 'pages.checklist.title', descriptionKey: 'pages.checklist.subtitle' }) } },
-    { path: '/life', component: LifeView, meta: { seo: seo({ titleKey: 'pages.life.title', descriptionKey: 'pages.life.subtitle' }) } },
-    { path: '/life/:id', component: LifePostDetail, meta: { seo: seo({ titleKey: 'pages.life.detailTitle', descriptionKey: 'pages.life.detailSubtitle' }) } },
-    {
-      path: '/project-updates',
-      component: ProjectUpdatesView,
-      meta: {
-        seo: seo({
-          titleKey: 'pages.projectUpdates.title',
-          descriptionKey: 'pages.projectUpdates.subtitle',
-          canonicalPath: '/project-updates'
-        })
-      }
-    },
-    {
-      path: '/privacy-policy',
-      component: LegalView,
-      props: { page: 'privacy' },
-      meta: { seo: seo({ titleKey: 'pages.legal.privacy.title', descriptionKey: 'pages.legal.privacy.subtitle', canonicalPath: '/privacy-policy' }) }
-    },
-    {
-      path: '/terms-of-service',
-      component: LegalView,
-      props: { page: 'terms' },
-      meta: { seo: seo({ titleKey: 'pages.legal.terms.title', descriptionKey: 'pages.legal.terms.subtitle', canonicalPath: '/terms-of-service' }) }
-    },
-    {
-      path: '/disclaimers',
-      component: LegalView,
-      props: { page: 'disclaimers' },
-      meta: { seo: seo({ titleKey: 'pages.legal.disclaimers.title', descriptionKey: 'pages.legal.disclaimers.subtitle', canonicalPath: '/disclaimers' }) }
-    },
-    { path: '/admin', component: AdminView, meta: { requiredPermission: 'admin.access', seo: seo({ titleKey: 'pages.admin.title', descriptionKey: 'pages.admin.subtitle', noindex: true }) } },
-    { path: '/profile', component: UserProfileView, meta: { requiresAuth: true, seo: seo({ titleKey: 'pages.profile.title', descriptionKey: 'pages.profile.subtitle', noindex: true }) } },
-    { path: '/profile/:id', component: UserProfileView, meta: { seo: seo({ titleKey: 'pages.profile.title', descriptionKey: 'pages.profile.publicSubtitle' }) } },
-    { path: '/login', component: LoginView, meta: { seo: seo({ titleKey: 'auth.loginTitle', descriptionKey: 'auth.loginSubtitle', noindex: true }) } },
-    { path: '/forgot-password', component: ForgotPasswordView, meta: { seo: seo({ titleKey: 'auth.requestResetTitle', descriptionKey: 'auth.requestResetSubtitle', noindex: true }) } },
-    { path: '/reset-password', component: ResetPasswordView, meta: { seo: seo({ titleKey: 'auth.resetTitle', descriptionKey: 'auth.resetSubtitle', noindex: true }) } },
-    { path: '/register', component: RegisterView, meta: { seo: seo({ titleKey: 'auth.registerTitle', descriptionKey: 'auth.registerSubtitle', noindex: true }) } },
-    { path: '/verify-email', component: VerifyEmailView, meta: { seo: seo({ titleKey: 'auth.verifyTitle', descriptionKey: 'auth.verifySubtitle', noindex: true }) } }
-  ],
-  scrollBehavior(to, from, savedPosition) {
-    if (savedPosition) return savedPosition;
-    if (to.meta.editorModal === true || from.meta.editorModal === true) return false;
-    return { top: 0 };
-  }
-});
-
-router.beforeEach(async (to) => {
-  const requiredPermissions = to.matched
-    .map((record) => record.meta.requiredPermission)
-    .filter((permission): permission is string => typeof permission === 'string');
-  const requiredAnyPermissions = to.matched.flatMap((record) =>
-    Array.isArray(record.meta.requiredAnyPermission)
-      ? record.meta.requiredAnyPermission.filter((permission): permission is string => typeof permission === 'string')
-      : []
-  );
-  const requiresVerified = to.matched.some((record) => record.meta.requiresVerified === true) || requiredPermissions.length > 0 || requiredAnyPermissions.length > 0;
-  const requiresAuth = requiresVerified || to.matched.some((record) => record.meta.requiresAuth === true);
-
-  if (!requiresAuth) {
-    return true;
-  }
-
-  if (!getAuthToken()) {
-    return { path: '/login', query: { redirect: to.fullPath } };
-  }
-
-  try {
-    const response = await api.me();
-    if (requiresVerified && !response.user.emailVerified) {
-      return { path: '/login', query: { redirect: to.fullPath } };
-    }
-
-    const permissionSet = new Set(response.user.permissions);
-    if (requiredPermissions.some((permission) => !permissionSet.has(permission))) {
-      return { path: '/pokemon' };
-    }
-    if (requiredAnyPermissions.length && !requiredAnyPermissions.some((permission) => permissionSet.has(permission))) {
-      return { path: '/pokemon' };
-    }
-
-    return true;
-  } catch {
-    setAuthToken(null);
-    return { path: '/login', query: { redirect: to.fullPath } };
-  }
-});

frontend/src/seo.ts

@@ -1,10 +1,11 @@
-import type { RouteLocationNormalizedLoaded, Router } from 'vue-router';
-import { getCurrentLocale, i18n, onLocaleChange } from './i18n';
+import type { RouteLocationNormalizedLoaded } from 'vue-router';
+import { getCurrentLocale, i18n } from './i18n';
 
 const siteName = 'Pokopia Wiki';
 const defaultCanonicalPath = '/';
 const defaultImagePath = '/seo/pokopia-hero.jpg';
 const fallbackSiteUrl = 'https://pokopiawiki.tootaio.com';
+let runtimeSiteUrl: string | null = null;
 
 type TranslationValues = Record<string, string | number>;
 
@@ -28,10 +29,15 @@ export type SeoConfig = {
 
 const translate = i18n.global.t as (key: string, values?: TranslationValues) => string;
 
+export function setConfiguredSiteUrl(value: unknown): void {
+  if (typeof value === 'string' && value.trim() !== '') {
+    runtimeSiteUrl = normalizeSiteUrl(value);
+  }
+}
+
 function configuredSiteUrl(): string {
-  const fromEnv = import.meta.env.VITE_SITE_URL;
-  if (typeof fromEnv === 'string' && fromEnv.trim() !== '') {
-    return normalizeSiteUrl(fromEnv);
+  if (runtimeSiteUrl) {
+    return runtimeSiteUrl;
   }
 
   if (typeof window !== 'undefined' && window.location.origin) {
@@ -168,15 +174,3 @@ export function applyRouteSeo(route: RouteLocationNormalizedLoaded): void {
     noindex: routeSeo?.noindex
   });
 }
-
-export function setupSeo(router: Router): void {
-  router.afterEach((to) => {
-    applyRouteSeo(to);
-  });
-
-  if (typeof window !== 'undefined') {
-    onLocaleChange(() => {
-      applyRouteSeo(router.currentRoute.value);
-    });
-  }
-}

frontend/src/services/api.ts

@@ -1,6 +1,6 @@
 import { getCurrentLocale } from '../i18n';
 
-const apiBaseUrl = import.meta.env.VITE_API_BASE_URL ?? 'http://localhost:3001';
+let apiBaseUrl = 'http://localhost:3001';
 const authTokenKey = 'pokopia_auth_token';
 const authChangeEvent = 'pokopia-auth-change';
 
@@ -15,6 +15,12 @@ export interface Language {
   sortOrder: number;
 }
 
+export function setApiBaseUrl(value: unknown): void {
+  if (typeof value === 'string' && value.trim() !== '') {
+    apiBaseUrl = value.trim();
+  }
+}
+
 export type SystemWordingSurface = 'frontend' | 'backend' | 'email';
 
 export interface SystemWording {
@@ -1057,6 +1063,10 @@ export function setAuthToken(token: string | null, options: { persistent?: boole
 }
 
 export function onAuthTokenChange(callback: () => void): () => void {
+  if (typeof window === 'undefined') {
+    return () => {};
+  }
+
   window.addEventListener(authChangeEvent, callback);
   return () => window.removeEventListener(authChangeEvent, callback);
 }