Merge pull request #144 from vuejs-jp/enhance/apply-locale-switch

apply LocaleSwitch

apps/web/app/components/GlobalHeader.vue

@@ -1,10 +1,19 @@
 <script setup lang="ts">
-import { useDevice } from '#imports'
+import { useDevice, useRouter } from '#imports'
 
 const { isMobile } = useDevice()
+const router = useRouter()
+
+const handle = (path: string) => {
+  router.push(path)
+}
 </script>
 
 <template>
-  <VFSpHeader v-if="isMobile" />
-  <VFHeader v-if="!isMobile" />
+  <VFSpHeader v-if="isMobile">
+    <VFLocaleSwitch :router @toggle="handle" />
+  </VFSpHeader>
+  <VFHeader v-if="!isMobile">
+    <VFLocaleSwitch :router @toggle="handle" />
+  </VFHeader>
 </template>

apps/web/nuxt.config.ts

@@ -94,6 +94,14 @@ export default defineNuxtConfig({
       const supabaseKey = process.env.SUPABASE_KEY
       if (!supabaseUrl || !supabaseKey) return
     },
+    'prerender:routes': (context) => {
+      for (const path of [...context.routes]) {
+        if (!path.endsWith('.html') && path !== '/') {
+          context.routes.delete(path)
+          context.routes.add(`${path}/`)
+        }
+      }
+    },
   },
   build: {
     transpile: ['vue-toastification'],

packages/ui/components/common/Header.vue

@@ -19,6 +19,7 @@ const { headerRef } = useHeader()
       <a class="link" href="/" aria-label="Vue Fes Japan 2024">
         <Logo class="logo" color="vue-blue" />
       </a>
+      <slot />
     </div>
   </header>
 </template>

packages/ui/components/common/LocaleSwitch.vue

@@ -1,37 +1,39 @@
 <script setup lang="ts">
 import { onMounted, ref, watch } from 'vue'
-import { useRouter } from 'vue-router'
+import { type Router } from 'vue-router'
 
 const LANGUAGES = {
   JAPANESE: 'ja',
   ENGLISH: 'en',
 } as const
 
-const router = useRouter()
+const props = defineProps<{ router: Router }>()
+const emits = defineEmits<{ toggle: [value: string] }>()
+
 const isLoaded = ref(false)
 const isChecked = ref(false)
 
 const getPath = () => {
   if (isChecked.value) {
-    return `/${LANGUAGES.ENGLISH}${router.currentRoute.value.path}`
+    return `/${LANGUAGES.ENGLISH}${props.router.currentRoute.value.path}`
   }
-  return router.currentRoute.value.path.replace(`/${LANGUAGES.ENGLISH}`, '')
+  return props.router.currentRoute.value.path.replace(`/${LANGUAGES.ENGLISH}`, '')
 }
 const setSwitchStatus = () => {
-  isChecked.value = router.currentRoute.value.path.includes(`/${LANGUAGES.ENGLISH}/`)
+  isChecked.value = props.router.currentRoute.value.path.includes(`/${LANGUAGES.ENGLISH}`)
 }
 
 const toggleStatus = () => {
   isChecked.value = !isChecked.value
   const path = getPath()
-  router.push(path)
+  emits('toggle', path)
 }
 onMounted(() => {
   setSwitchStatus()
   isLoaded.value = true
 })
 watch(
-  () => router.currentRoute.value.path,
+  () => props.router.currentRoute.value.path,
   () => {
     setSwitchStatus()
   },

packages/ui/components/common/SpHeader.vue

@@ -20,6 +20,7 @@ const { color } = useColor()
       <a class="link" href="/" aria-label="Vue Fes Japan 2024">
         <Logo class="logo" color="vue-blue" />
       </a>
+      <slot />
     </div>
   </header>
 </template>