Repository: enzonotario/vitepress-openapi (ts)

Issue:
menu item text not rendering at build (after `^0.0.3-alpha.31` to `0.0.3-alpha.37`)
Running `docs:dev` results in correct menu items

![image](https://github.com/user-attachments/assets/742349aa-2cf7-4ead-aca6-6bc41aa8be46)

However when actually built, the menu item text doesnt get added

![image](https://github.com/user-attachments/assets/b3a0ab87-72c0-4820-b7db-948924c806d5)

I experienced this while moving from `^0.0.3-alpha.31` to `0.0.3-alpha.37`

Pull request:
fix(i18n): locale and fallbackLocale setup
<!-- Provide a general summary of your changes in the title above. -->

# Description

- Fix SSR Hydration Mismatch error when rendering sidebar items
- Fix i18n setup

## Related issues/external references

Fixes #84 

## Types of changes

- Bug fix


Patch:
diff --git a/dev/.vitepress/theme/index.ts b/dev/.vitepress/theme/index.ts
index 7aa3917..5993ee8 100644
--- a/dev/.vitepress/theme/index.ts
+++ b/dev/.vitepress/theme/index.ts
@@ -11,7 +11,9 @@ export default {
 
     // Configure the theme.
     const themeConfig = useTheme()
-    themeConfig.setLocale('es')
+    themeConfig.setI18nConfig({
+      locale: 'es',
+    })
 
     // Use the theme.
     theme.enhanceApp({ app })
diff --git a/src/composables/useSidebar.ts b/src/composables/useSidebar.ts
index f90e430..39b0340 100644
--- a/src/composables/useSidebar.ts
+++ b/src/composables/useSidebar.ts
@@ -33,7 +33,7 @@ export function useSidebar({
   function sidebarItemTemplate(method: string, title: string) {
     return `<span class="OASidebarItem group/oaSidebarItem">
         <span class="OASidebarItem-badge OAMethodBadge--${method.toLowerCase()}">${method.toUpperCase()}</span>
-        <p class="OASidebarItem-text text">${title}</p>
+        <span class="OASidebarItem-text text">${title}</span>
       </span>`
   }
 
diff --git a/src/composables/useTheme.ts b/src/composables/useTheme.ts
index 5ba442a..f56ef6a 100644
--- a/src/composables/useTheme.ts
+++ b/src/composables/useTheme.ts
@@ -89,7 +89,12 @@ export function useTheme() {
     return getI18nConfig().locale.value
   }
 
+  /**
+   * @deprecated Use `setI18nConfig({ locale: value })` instead.
+   * @param value
+   */
   function setLocale(value: 'es' | 'en' | string) {
+    console.warn('`setLocale` is deprecated. Use `setI18nConfig({ locale: value })` instead.')
     setI18nConfig({ locale: value })
   }
 
diff --git a/src/index.ts b/src/index.ts
index 017fc00..daaaf85 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -29,8 +29,8 @@ export const theme = {
     const themeConfig = useTheme()
 
     const i18n = VueI18n.createI18n({
-      locale: themeConfig.getI18nConfig().locale,
-      fallbackLocale: themeConfig.getI18nConfig().fallbackLocale,
+      locale: themeConfig.getI18nConfig().locale.value,
+      fallbackLocale: themeConfig.getI18nConfig().fallbackLocale.value,
       messages: themeConfig.getI18nConfig().messages,
     })
     app.use(i18n)


Test patch:
diff --git a/test/composables/useSidebar.test.ts b/test/composables/useSidebar.test.ts
index 3992c5d..71dacaa 100644
--- a/test/composables/useSidebar.test.ts
+++ b/test/composables/useSidebar.test.ts
@@ -9,7 +9,7 @@ describe('useSidebar', () => {
     const result = useSidebar().sidebarItemTemplate('get', 'GET /users With a Long Title')
     expect(result).toBe(`<span class="OASidebarItem group/oaSidebarItem">
         <span class="OASidebarItem-badge OAMethodBadge--get">GET</span>
-        <p class="OASidebarItem-text text">GET /users With a Long Title</p>
+        <span class="OASidebarItem-text text">GET /users With a Long Title</span>
       </span>`)
   })