Switch to path-based i18n routing

nuxt.config.js

@@ -172,20 +172,19 @@ export default {
     ],
     lazy: true,
     langDir: 'locales',
-    strategy: 'no_prefix',
     defaultLocale: 'en',
     /**
-     * This section is critical for the current, iframed production environment
-     * {@link https://i18n.nuxtjs.org/options-reference/#detectbrowserlanguage}
+     * `detectBrowserLanguage` must be false to prevent nuxt/i18n from automatically
+     * setting the locale based on headers or the client-side `navigator` object.
+     *
+     * Such detection is handled at the parent level in WP.org.
+     *
+     * More info about the Nuxt i18n:
+     *
+     * - [detectBrowserLanguage](https://i18n.nuxtjs.org/options-reference/#detectbrowserlanguage)
+     * - [Browser language detection info](https://i18n.nuxtjs.org/browser-language-detection)
      * */
-    detectBrowserLanguage: {
-      useCookie: true,
-      cookieKey: 'i18n_redirected',
-      alwaysRedirect: true,
-      cookieCrossOrigin: true,
-      cookieSecure: true,
-    },
-    baseUrl: 'http://localhost:8443',
+    detectBrowserLanguage: false,
     vueI18n: '~/plugins/vue-i18n.js',
   },
   /**

src/components/VAllResultsGrid/VAllResultsGrid.vue

@@ -7,7 +7,7 @@
       <NuxtLink
         v-for="[key, item] in results"
         :key="key"
-        :to="{ path: `/search/${key}`, query: $route.query }"
+        :to="localePath({ path: `/search/${key}`, query: $route.query })"
         class="lg:col-span-2 focus:bg-white focus:border-tx focus:ring focus:ring-pink focus:outline-none focus:shadow-ring focus:text-black rounded-sm"
       >
         <VContentLink :results-count="item.count" :media-type="key" />

src/composables/use-match-routes.js

@@ -1,17 +1,25 @@
+import { useContext } from '@nuxtjs/composition-api'
 import { ref, useRoute, useRouter } from '@nuxtjs/composition-api'
 
 /**
  * Reactive property that returns true only on the matching routes.
  * Note that routes are matched by name, not the url path.
  *
+ * Routes are also localized before comparison, so 'search' becomes
+ * 'search__en', for example.
+ *
  * @returns {{matches: import('@nuxtjs/composition-api').Ref<boolean>}}
  */
 export const useMatchRoute = (routes = []) => {
+  const { app } = useContext()
   const route = useRoute()
   const router = useRouter()
-  const matches = ref(routes.includes(route.value.name))
+  const localizedRoutes = routes.map(
+    (route) => app.localeRoute({ name: route }).name
+  )
+  const matches = ref(localizedRoutes.includes(route.value.name))
   router.beforeEach((to, from, next) => {
-    matches.value = routes.includes(to.name)
+    matches.value = localizedRoutes.includes(to.name)
     next()
   })
   return { matches }

src/pages/audio/_id.vue

@@ -75,7 +75,10 @@ const AudioDetailPage = {
   },
   beforeRouteEnter(to, from, nextPage) {
     nextPage((_this) => {
-      if (from.path === '/search/' || from.path === '/search/audio') {
+      if (
+        from.name === _this.localeRoute({ path: '/search/' }).name ||
+        from.name === _this.localeRoute({ path: '/search/audio' }).name
+      ) {
         _this.shouldShowBreadcrumb = true
         _this.breadCrumbURL = from.fullPath
       }

src/pages/image/_id.vue

@@ -61,7 +61,10 @@ const PhotoDetailPage = {
   },
   beforeRouteEnter(to, from, nextPage) {
     nextPage((_this) => {
-      if (from.path === '/search/' || from.path === '/search/image') {
+      if (
+        from.name === _this.localeRoute({ path: '/search/' }).name ||
+        from.name === _this.localeRoute({ path: '/search/image' }).name
+      ) {
         _this.shouldShowBreadcrumb = true
         _this.breadCrumbURL = from.fullPath
       }

src/pages/index.vue

@@ -144,10 +144,12 @@ const HomePage = {
       images: setItem.images.map((imageItem) => ({
         ...imageItem,
         src: require(`~/assets/homepage_images/${setItem.prefix}-${imageItem.index}.jpg`),
-        url: router.resolve({
-          name: 'image-id',
-          params: { id: imageItem.identifier },
-        }).href,
+        url: router.resolve(
+          app.localePath({
+            name: 'image-id',
+            params: { id: imageItem.identifier },
+          })
+        ).href,
       })),
     }))