feat(vuex): expose nuxt-i18n API on store (#1098)

The '$i18n' was already there but not `localePath` and other "root" APIs.

Resolves #1031

docs/content/en/api.md

@@ -231,3 +231,10 @@ export const actions = {
   }
 }
 ````
+
+### getRouteBaseName
+### localePath
+### localeRoute
+### switchLocalePath
+
+See [documentation](#methods).

docs/content/es/api.md

@@ -231,3 +231,10 @@ export const actions = {
   }
 }
 ````
+
+### getRouteBaseName
+### localePath
+### localeRoute
+### switchLocalePath
+
+See [documentation](#methods).

src/templates/plugin.routing.js

@@ -209,9 +209,9 @@ const plugin = {
 
 export default (context) => {
   Vue.use(plugin)
-  const { app } = context
-  app.localePath = NuxtContextProxy(context, localePath)
-  app.localeRoute = NuxtContextProxy(context, localeRoute)
-  app.switchLocalePath = NuxtContextProxy(context, switchLocalePath)
-  app.getRouteBaseName = NuxtContextProxy(context, getRouteBaseName)
+  const { app, store = {} } = context
+  app.localePath = store.localePath = NuxtContextProxy(context, localePath)
+  app.localeRoute = store.localeRoute = NuxtContextProxy(context, localeRoute)
+  app.switchLocalePath = store.switchLocalePath = NuxtContextProxy(context, switchLocalePath)
+  app.getRouteBaseName = store.getRouteBaseName = NuxtContextProxy(context, getRouteBaseName)
 }

test/fixture/basic/pages/about.vue

@@ -3,6 +3,7 @@
     <LangSwitcher />
     <div id="current-page">page: {{ $t('about') }}</div>
     <nuxt-link id="link-home" exact :to="localePath('index')">{{ $t('home') }}</nuxt-link>
+    <div id="store-path-fr">{{ $store.state.routePathFr }}</div>
   </div>
 </template>
 

test/fixture/basic/store/index.js

@@ -0,0 +1,26 @@
+/**
+ * @typedef {{
+ *   routePathFr: string
+ * }} State
+ *
+ * @typedef {import('vuex').Store<State>} TestStore
+ */
+
+/** @return {TestStore['state']} */
+export const state = () => ({
+  routePathFr: ''
+})
+
+/** @type {import('vuex').MutationTree<State>} */
+export const mutations = {
+  setInitialRoutePath (state, path) {
+    state.routePathFr = path
+  }
+}
+
+/** @type {import('vuex').ActionTree<State, State>} */
+export const actions = {
+  nuxtServerInit ({ commit }) {
+    commit('setInitialRoutePath', this.switchLocalePath('fr'))
+  }
+}

test/module.test.js

@@ -2111,3 +2111,23 @@ describe('Composition API', () => {
     expect(dom.querySelector('#processed-url')?.getAttribute('href')).toBe('/')
   })
 })
+
+describe('Store', () => {
+  /** @type {Nuxt} */
+  let nuxt
+
+  beforeAll(async () => {
+    nuxt = (await setup(loadConfig(__dirname, 'basic'))).nuxt
+  })
+
+  afterAll(async () => {
+    await nuxt.close()
+  })
+
+  test('API is available in store instance', async () => {
+    const html = await get('/about-us')
+    const dom = getDom(html)
+
+    expect(dom.querySelector('#store-path-fr')?.textContent).toBe('/fr/a-propos')
+  })
+})

types/vue.d.ts

@@ -1,4 +1,5 @@
-import Vue from 'vue'
+import 'vue'
+import 'vuex'
 import { Location, RawLocation, Route } from 'vue-router'
 import VueI18n, { IVueI18n } from 'vue-i18n'
 import { MetaInfo } from 'vue-meta'
@@ -63,5 +64,9 @@ declare module '@nuxt/types' {
 declare module 'vuex/types/index' {
   interface Store<S> {
     readonly $i18n: VueI18n & IVueI18n
+    getRouteBaseName(route?: Route): string
+    localePath(route: RawLocation, locale?: string): string
+    localeRoute(route: RawLocation, locale?: string): Location | undefined
+    switchLocalePath(locale: string): string
   }
 }