feat: add language selector

app.vue

@@ -2,8 +2,26 @@
 import type { ParsedContent } from '@nuxt/content/dist/runtime/types'
 
 const { seo } = useAppConfig()
+const route = useRoute()
+
+const { data: navigation, refresh: refreshNavigation } = await useAsyncData('navigation', () => fetchContentNavigation(), {
+  transform: (data) => {
+    const result = []
+
+    data.forEach((item) => {
+      if (item.title.toLowerCase() === route.fullPath.split('/')[1]) {
+        if (item.children) {
+          item.children.forEach((child) => {
+            result.push(child)
+          })
+        }
+      }
+    })
+
+    return result
+  }
+})
 
-const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())
 const { data: files } = useLazyFetch<ParsedContent[]>('/api/search.json', {
   default: () => [],
   server: false
@@ -29,7 +47,7 @@ useSeoMeta({
   twitterCard: 'summary_large_image'
 })
 
-provide('navigation', navigation)
+provide('navigation', { navigation, refreshNavigation })
 </script>
 
 <template>

content/index.yml → content/en/index.yml

@@ -13,7 +13,7 @@ hero:
     - label: Get started
       icon: i-heroicons-arrow-right-20-solid
       trailing: true
-      to: '/getting-started'
+      to: '/en/getting-started'
       size: lg
     - label: Use this template
       icon: i-simple-icons-github

layouts/docs.vue

@@ -1,14 +1,42 @@
 <script setup lang="ts">
 import type { NavItem } from '@nuxt/content/dist/runtime/types'
+import type { Ref } from 'vue'
+import type { Lang } from '~/types/Lang'
 
-const navigation = inject<Ref<NavItem[]>>('navigation')
+const route = useRoute()
+const router = useRouter()
+const config = useRuntimeConfig()
+
+const { navigation, refreshNavigation } = inject<Ref<NavItem[]>>('navigation')
+const languages = config.public.languages.map((lang: Lang) => ({
+  name: lang.name,
+  value: lang.code
+}))
+const language = ref(languages.find((lang) => lang.value === route.fullPath.split('/')[1] && lang.value)?.value || config.public.defaultLanguage)
+
+watch(language, (value) => {
+  router.push(
+    route.fullPath.replace(`/${route.fullPath.split('/')[1]}/`, `/${value}/`)
+  )
+  refreshNavigation()
+})
+
+onMounted(() => {
+  refreshNavigation()
+})
 </script>
 
 <template>
   <UContainer>
     <UPage>
       <template #left>
         <UAside>
+          <USelect
+            v-model="language"
+            :options="languages"
+            option-attribute="name"
+            class="mb-2"
+          />
           <UNavigationTree :links="mapContentNavigation(navigation)" />
         </UAside>
       </template>

nuxt.config.ts

@@ -1,4 +1,5 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
+
 export default defineNuxtConfig({
   extends: ['@nuxt/ui-pro'],
   modules: [
@@ -39,5 +40,16 @@ export default defineNuxtConfig({
         braceStyle: '1tbs'
       }
     }
+  },
+  runtimeConfig: {
+    public: {
+      defaultLanguage: 'en',
+      languages: [
+        {
+          code: 'en',
+          name: 'English'
+        },
+      ]
+    }
   }
 })

pages/index.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-const { data: page } = await useAsyncData('index', () => queryContent('/').findOne())
+const config = useRuntimeConfig()
+
+const { data: page } = await useAsyncData('index', () => queryContent(`/${config.public.defaultLanguage}`).findOne())
 
 useSeoMeta({
   titleTemplate: '',
@@ -46,7 +48,7 @@ useSeoMeta({
       </template>
 
       <template #title>
-        <MDC :value="page.hero.title" />
+        <MDC :value="page.hero.title"/>
       </template>
 
       <MDC

types/Lang.ts

@@ -0,0 +1,4 @@
+export interface Lang {
+  name: string
+  code: string
+}