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

content/fr/1.getting-started/1.index.md

@@ -0,0 +1,53 @@
+---
+title: La base
+description: Welcome to Nuxt UI Pro documentation template.
+---
+
+This template is a ready-to-use documentation template made with [Nuxt UI Pro](https://ui.nuxt.com/pro), a collection of premium components built on top of [Nuxt UI](https://ui.nuxt.com) to create beautiful & responsive Nuxt applications in minutes.
+
+There are already many websites based on this template:
+
+- [Nuxt](https://nuxt.com) - The Nuxt website
+- [Nuxt UI](https://ui.nuxt.com) - The documentation of `@nuxt/ui` and `@nuxt/ui-pro`
+- [Nuxt Image](https://image.nuxt.com) - The documentation of `@nuxt/image`
+- [Nuxt Content](https://content.nuxt.com) - The documentation of `@nuxt/content`
+- [Nuxt Devtools](https://devtools.nuxt.com) - The documentation of `@nuxt/devtools`
+- [Nuxt Studio](https://nuxt.studio) - The pro version of Nuxt Content
+
+## Features
+
+- Powered by [Nuxt 3](https://nuxt.com)
+- Built with [Nuxt UI](https://ui.nuxt.com) and [Nuxt UI Pro](https://ui.nuxt.com/pro)
+- Write content with [MDC syntax](https://content.nuxt.com/usage/markdown) thanks to [Nuxt Content](https://content.nuxt.com)
+- Compatible with [Nuxt Studio](https://nuxt.studio)
+- Auto-generated sidebar navigation
+- Full-Text Search out of the box
+- Beautiful Typography styles
+- Dark mode support
+- And more...
+
+## Play online
+
+You can start playing with this template in your browser using our online sandboxes:
+
+::u-button
+---
+class: mr-4
+icon: i-simple-icons-stackblitz
+label: Play on StackBlitz
+target: _blank
+to: https://stackblitz.com/github/nuxt-ui-pro/docs/
+---
+::
+
+::u-button
+---
+class: mt-2 sm:mt-0
+icon: i-simple-icons-codesandbox
+label: Play on CodeSandbox
+target: _blank
+to: https://codesandbox.io/s/github/nuxt-ui-pro/docs/
+---
+::
+
+Or open [Nuxt UI playground](https://ui.nuxt.com/playground).

content/fr/1.getting-started/2.installation.md

@@ -0,0 +1,32 @@
+---
+title: Installation
+description: Get started with Nuxt UI Pro documentation template.
+---
+
+::callout
+---
+icon: i-heroicons-light-bulb
+target: _blank
+to: https://nuxt.studio/themes/docs
+---
+Use this template on Nuxt Studio and start your documentation in seconds.
+::
+
+## Quick Start
+
+You can start a fresh new project with:
+
+```bash [Terminal]
+npx nuxi init -t github:nuxt-ui-pro/docs
+```
+
+or create a new repository from GitHub:
+
+1. Open <https://github.com/nuxt-ui-pro/docs>
+2. Click on `Use this template` button
+3. Enter repository name and click on `Create repository from template` button
+4. Clone your new repository
+5. Install dependencies with your favorite package manager
+6. Start development server
+
+That's it! You can now start writing your documentation in the [`content/`](https://content.nuxt.com/usage/content-directory) directory 🚀

content/fr/1.getting-started/3.usage.md

@@ -0,0 +1,142 @@
+---
+title: Usage
+description: Learn how to write and customize your documentation.
+---
+
+This is only a basic example of what you can achieve with [Nuxt UI Pro](https://ui.nuxt.com/pro/guide), you can tweak it to match your needs. The template uses several Nuxt modules underneath like [`@nuxt/content`](https://content.nuxt.com) for the content, [`@nuxtjs/fontaine`](https://github.com/nuxt-modules/fontaine) and [`@nuxtjs/google-fonts`](https://github.com/nuxt-modules/google-fonts) to change the font and [`nuxt-og-image`](https://nuxtseo.com/og-image/getting-started/installation) for social previews.
+
+::callout
+---
+icon: i-heroicons-light-bulb
+target: _blank
+to: https://ui.nuxt.com/pro/guide/usage#structure
+---
+Learn more on how to customize and structure a Nuxt UI Pro app!
+::
+
+## Writing content
+
+You can just start writing `.md` or `.yml` files in the [`content/`](https://content.nuxt.com/usage/content-directory) directory to have your pages updated.
+The navigation will be automatically generated in the left aside and in the mobile menu. You will also be able to go through your content with full-text search.
+
+::callout{icon="i-heroicons-light-bulb"}
+This template relies on a [catch-all route](https://nuxt.com/docs/guide/directory-structure/pages#catch-all-route) but you can achieve the same thing with the [document-driven mode](https://content.nuxt.com/document-driven/introduction).
+::
+
+## App Configuration
+
+In addition to `@nuxt/ui-pro` configuration through the `app.config.ts`, this template lets you customize the `Header`, `Footer` and the `Table of contents` components.
+
+### Header
+
+```ts [app.config.ts]
+export default defineAppConfig({
+  header: {
+    // Logo configuration
+    logo: {
+      // Light mode
+      light: {
+        src: '',
+        alt: '',
+        class: ''
+      },
+      // Dark mode
+      dark: {
+        src: '',
+        alt: '',
+        class: ''
+      }
+    },
+    // Show or hide the search bar
+    search: true,
+    // Show or hide the color mode button
+    colorMode: true,
+    // Customize links
+    links: [{
+      icon: 'i-simple-icons-github',
+      to: 'https://github.com/nuxt-ui-pro/docs',
+      target: '_blank',
+      'aria-label': 'Docs template on GitHub'
+    }]
+  }
+})
+```
+
+### Footer
+
+```ts [app.config.ts]
+export default defineAppConfig({
+  footer: {
+    // Update bottom left credits
+    credits: 'Copyright © 2023',
+    // Show or hide the color mode button
+    colorMode: false,
+    // Customize links
+    links: [{
+      icon: 'i-simple-icons-nuxtdotjs',
+      to: 'https://nuxt.com',
+      target: '_blank',
+      'aria-label': 'Nuxt Website'
+    }, {
+      icon: 'i-simple-icons-discord',
+      to: 'https://discord.com/invite/ps2h6QT',
+      target: '_blank',
+      'aria-label': 'Nuxt UI on Discord'
+    }, {
+      icon: 'i-simple-icons-x',
+      to: 'https://x.com/nuxt_js',
+      target: '_blank',
+      'aria-label': 'Nuxt on X'
+    }, {
+      icon: 'i-simple-icons-github',
+      to: 'https://github.com/nuxt/ui',
+      target: '_blank',
+      'aria-label': 'Nuxt UI on GitHub'
+    }]
+  }
+})
+```
+
+### Table of contents
+
+```ts [app.config.ts]
+export default defineAppConfig({
+  toc: {
+    // Title of the main table of contents
+    title: 'Table of Contents',
+    // Bottom TOC configuration
+    bottom: {
+      // Title of the bottom table of contents
+      title: 'Community',
+      // URL of your repository content folder
+      edit: '',
+      // Customize links
+      links: [{
+        icon: 'i-heroicons-star',
+        label: 'Star on GitHub',
+        to: 'https://github.com/nuxt/ui',
+        target: '_blank',
+      }, {
+        icon: 'i-heroicons-book-open',
+        label: 'Nuxt UI Pro docs',
+        to: 'https://ui.nuxt.com/pro/guide',
+        target: '_blank',
+      }, {
+        icon: 'i-simple-icons-nuxtdotjs',
+        label: 'Purchase a license',
+        to: 'https://ui.nuxt.com/pro/purchase',
+        target: '_blank',
+      }]
+    }
+  }
+})
+```
+
+::callout
+---
+icon: i-heroicons-light-bulb
+target: _blank
+to: https://nuxt.studio/docs/developers/app-config
+---
+A dedicated interface is provided to edit those configurations on Nuxt Studio.
+::

content/fr/1.getting-started/_dir.yml

@@ -0,0 +1 @@
+title: Getting Started

content/fr/index.yml

@@ -0,0 +1,68 @@
+title: 'Nuxt UI Pro - Docs template'
+description: Nuxt UI Pro is a collection of premium Vue components built on top of Nuxt UI to create beautiful & responsive Nuxt applications in minutes.
+navigation: false
+hero:
+  title: 'Build your docs in seconds'
+  description: 'Create your documentation in seconds with this template!'
+  orientation: horizontal
+  headline:
+    label: Made with Nuxt UI Pro
+    to: https://ui.nuxt.com/pro
+    icon: i-heroicons-arrow-top-right-on-square-20-solid
+  links:
+    - label: Get started
+      icon: i-heroicons-arrow-right-20-solid
+      trailing: true
+      to: '/en/getting-started'
+      size: lg
+    - label: Use this template
+      icon: i-simple-icons-github
+      size: lg
+      color: gray
+      to: https://github.com/nuxt-ui-pro/docs
+      target: _blank
+  code: |
+    ```bash [Terminal]
+    npx nuxi init -t github:nuxt-ui-pro/docs
+    ```
+features:
+  title: 'All-in-one docs template'
+  links:
+    - label: 'Explore Nuxt UI Pro'
+      icon: 'i-simple-icons-nuxtdotjs'
+      trailingIcon: 'i-heroicons-arrow-right-20-solid'
+      color: 'gray'
+      to: 'https://ui.nuxt.com/pro'
+      target: '_blank'
+      size: lg
+  items:
+    - title: 'Nuxt 3'
+      description: 'Powered by Nuxt 3 for optimal performances and SEO.'
+      icon: 'i-simple-icons-nuxtdotjs'
+      to: 'https://nuxt.com'
+      target: '_blank'
+    - title: 'Markdown'
+      description: 'Write your pages with MDC thanks to Nuxt Content.'
+      icon: 'i-simple-icons-markdown'
+      to: 'https://content.nuxt.com'
+      target: '_blank'
+    - title: 'Nuxt UI'
+      description: 'Offers a very large set of full customizable components.'
+      icon: 'i-heroicons-sparkles-20-solid'
+      to: 'https://ui.nuxt.com'
+      target: '_blank'
+    - title: 'TypeScript'
+      description: 'A fully typed development experience.'
+      icon: 'i-simple-icons-typescript'
+      to: 'https://www.typescriptlang.org'
+      target: '_blank'
+    - title: 'Nuxt Studio'
+      description: 'Supported by Nuxt Studio for fast updates and previews.'
+      icon: 'i-simple-icons-nuxtdotjs'
+      to: 'https://nuxt.studio'
+      target: '_blank'
+    - title: 'Search'
+      description: 'A full-text search modal empowered by Fuse.js.'
+      icon: 'i-heroicons-magnifying-glass-20-solid'
+      to: 'https://ui.nuxt.com/pro/components/docs/docs-search'
+      target: '_blank'

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>