improve: LDP-2068: Re-add support for useLocalizedMenuEndpoint option (#139)

* improve: LDP-2068: Reimplement useLocalizedMenuEndpoint flag handling.

* docs: LDP-2068: Add useLocalizedMenuEndpoint to the list of config options.

* improve: LDP-2068: Refetch menus if locale changes.

Author: TurtlBbx

README.md

@@ -76,14 +76,14 @@ The module defaults work well with [Lupus Decoupled Drupal](https://www.drupal.o
   while keeping the right status code. By enabling customErrorPages, the regular Nuxt error
   pages are shown instead, such that the pages can be customized with Nuxt. Defaults to `false`.
 
+- `useLocalizedMenuEndpoint`: If enabled, the menu endpoint will use a language prefix as configured by [nuxtjs/i18n](https://v8.i18n.nuxtjs.org) module. Defaults to `true`.
+
 
 ## TODO - List of 1.x options not yet implemented
 
 - `addRequestFormat`: If set to `true`, the `_format=custom_elements` URL parameter
   is added automatically to requests. Defaults to `true`.
 
-- `useLocalizedMenuEndpoint`: If enabled, the menu endpoint will use a language prefix as configured by [nuxtjs/i18n](https://i18n.nuxtjs.org) module. Defaults to `true`.
-
 - `pageErrorHandler`: The default page error handler can be overridden.
 
 - `menuErrorHandler`: The default menu error handler can be overridden.

src/module.ts

@@ -10,6 +10,7 @@ export interface ModuleOptions {
   customErrorPages: boolean,
   fetchOptions: UseFetchOptions<any>,
   fetchProxyHeaders: string[],
+  useLocalizedMenuEndpoint: boolean,
 }
 
 export default defineNuxtModule<ModuleOptions>({
@@ -27,7 +28,8 @@ export default defineNuxtModule<ModuleOptions>({
     fetchOptions: {
       credentials: 'include',
     },
-    fetchProxyHeaders: ['cookie']
+    fetchProxyHeaders: ['cookie'],
+    useLocalizedMenuEndpoint: true
   },
   setup (options, nuxt) {
     const { resolve } = createResolver(import.meta.url)
@@ -46,4 +48,4 @@ declare module 'nuxt/schema' {
   interface PublicRuntimeConfig {
     drupalCe: ModuleOptions,
   }
-}
+}

src/runtime/composables/useDrupalCe.ts

@@ -1,6 +1,6 @@
 import { callWithNuxt } from '#app'
 import { defu } from 'defu'
-import { useRuntimeConfig, useState, useFetch, navigateTo, createError, useRoute, h, resolveComponent, setResponseStatus, useNuxtApp, useRequestHeaders, UseFetchOptions } from '#imports'
+import { useRuntimeConfig, useState, useFetch, navigateTo, createError, h, resolveComponent, setResponseStatus, useNuxtApp, useRequestHeaders, UseFetchOptions, ref, watch } from '#imports'
 
 export const useDrupalCe = () => {
 
@@ -71,10 +71,21 @@ export const useDrupalCe = () => {
    * @param useFetchOptions Optional Nuxt useFetch options
    */
   const fetchMenu = async (name: string, useFetchOptions:UseFetchOptions<any> = {}) => {
-    const menuPath = config.menuEndpoint.replace('$$$NAME$$$', name)
+    const nuxtApp = useNuxtApp()
     useFetchOptions = processFetchOptions(useFetchOptions)
     useFetchOptions.key = `menu-${name}`
 
+    const baseMenuPath = config.menuEndpoint.replace('$$$NAME$$$', name)
+    const menuPath = ref(baseMenuPath)
+
+    if (config.useLocalizedMenuEndpoint && nuxtApp.$i18n) {
+      // API path with localization
+      menuPath.value = nuxtApp.$localePath('/' + baseMenuPath)
+      watch(nuxtApp.$i18n.locale, () => {
+        menuPath.value = nuxtApp.$localePath('/' + baseMenuPath)
+      })
+    }
+
     const { data: menu, error } = await useFetch(menuPath, useFetchOptions)
 
     if (error.value) {