feat: add i18n APIs to Nuxt Context

The APIs that were exposed on `context.app`, like: - `i18n` - `getRouteBaseName` - `localePath` - `localeRoute` - `switchLocalePath` are now also exposed directly on `context`. Resolves #1112
nuxt-modules · Mar 24, 2021 · c2f3e7e · c2f3e7e
1 parent 75b7c6e
commit c2f3e7e
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 13 deletions.
diff --git a/docs/content/en/api.md b/docs/content/en/api.md
@@ -198,7 +198,7 @@ Instance of [VueI18n class](http://kazupon.github.io/vue-i18n/api/#vuei18n-class
 
 ## Extension of Nuxt Context
 
-### context.app.i18n
+### context.i18n, context.app.i18n
 
   - **Type**: [`VueI18n`](#extension-of-vuei18n)
 
@@ -210,8 +210,8 @@ Example use:
 
 ```js
 export default Vue.extend({
-  asyncData({ app }) {
-    const locale = app.i18n.locale
+  asyncData({ i18n }) {
+    const locale = i18n.locale
 
     return {
       locale
@@ -220,6 +220,14 @@ export default Vue.extend({
 })
 ````
 
+Those APIs are also exposed both on `context` and `context.app`:
+ - getRouteBaseName
+ - localePath
+ - localeRoute
+ - switchLocalePath
+
+See more info about those in [methods documentation](#methods).
+
 ## Extension of Vuex
 
 ### $i18n
@@ -243,4 +251,4 @@ export const actions = {
 ### localeRoute
 ### switchLocalePath
 
-See [documentation](#methods).
+See more info about those in [methods documentation](#methods).
diff --git a/src/templates/plugin.main.js b/src/templates/plugin.main.js
@@ -318,7 +318,7 @@ export default async (context) => {
   const vueI18nOptions = typeof options.vueI18n === 'function' ? await options.vueI18n(context) : klona(options.vueI18n)
   vueI18nOptions.componentInstanceCreatedListener = extendVueI18nInstance
   // @ts-ignore
-  app.i18n = new VueI18n(vueI18nOptions)
+  app.i18n = context.i18n = new VueI18n(vueI18nOptions)
   // Initialize locale and fallbackLocale as vue-i18n defaults those to 'en-US' if falsey
   app.i18n.locale = ''
   app.i18n.fallbackLocale = vueI18nOptions.fallbackLocale || ''

diff --git a/src/templates/plugin.routing.js b/src/templates/plugin.routing.js
@@ -222,10 +222,10 @@ export default (context) => {
   Vue.use(plugin)
   const { app, store } = context
 
-  app.localePath = NuxtContextProxy(context, localePath)
-  app.localeRoute = NuxtContextProxy(context, localeRoute)
-  app.switchLocalePath = NuxtContextProxy(context, switchLocalePath)
-  app.getRouteBaseName = NuxtContextProxy(context, getRouteBaseName)
+  app.localePath = context.localePath = NuxtContextProxy(context, localePath)
+  app.localeRoute = context.localeRoute = NuxtContextProxy(context, localeRoute)
+  app.switchLocalePath = context.switchLocalePath = NuxtContextProxy(context, switchLocalePath)
+  app.getRouteBaseName = context.getRouteBaseName = NuxtContextProxy(context, getRouteBaseName)
 
   if (store) {
     store.localePath = app.localePath

diff --git a/test/fixture/basic/pages/index.vue b/test/fixture/basic/pages/index.vue
@@ -2,7 +2,7 @@
   <div>
     <LangSwitcher />
     <div id="current-page">page: {{ $t('home') }}</div>
-    <nuxt-link id="link-about" exact :to="localePath('about')">{{ $t('about') }}</nuxt-link>
+    <nuxt-link id="link-about" exact :to="aboutPath">{{ aboutTranslation }}</nuxt-link>
     <div id="current-locale">locale: {{ $i18n.locale }}</div>
   </div>
 </template>
@@ -15,10 +15,23 @@ export default {
   components: {
     LangSwitcher
   },
+  asyncData ({ localePath, i18n }) {
+    return {
+      aboutPath: localePath('about'),
+      aboutTranslation: i18n.t('about')
+    }
+  },
+  data () {
+    return {
+      aboutPath: '',
+      aboutTranslation: ''
+    }
+  },
+  /** @return {import('vue-meta').MetaInfo} */
   head () {
     return {
       ...this.$nuxtI18nHead({ addDirAttribute: false }),
-      title: this.$t('home')
+      title: String(this.$t('home'))
     }
   },
   created () {

diff --git a/types/test/index.ts b/types/test/index.ts
@@ -3,6 +3,7 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import { Route } from 'vue-router'
+import { Plugin } from '@nuxt/types'
 import '../index'
 
 const vm = new Vue()
@@ -44,3 +45,8 @@ vm.$i18n.setLocale(locale)
 const store = new Vuex.Store({})
 
 store.$i18n.setLocale(locale)
+
+const nuxtPlugin: Plugin = function (context) {
+  const { i18n, getRouteBaseName, localePath, localeRoute, switchLocalePath } = context
+  const { locale } = i18n
+}
diff --git a/types/vue.d.ts b/types/vue.d.ts
@@ -19,12 +19,12 @@ interface NuxtI18nHeadOptions {
    * Adds a `dir` attribute to the HTML element.
    * Default: `true`
    */
-  addDirAttribute: boolean
+  addDirAttribute?: boolean
   /**
    * Adds various SEO attributes.
    * Default: `false`
    */
-  addSeoAttributes: boolean
+  addSeoAttributes?: boolean
 }
 
 interface NuxtI18nSeo {
@@ -72,6 +72,10 @@ declare module 'vue/types/options' {
 }
 
 declare module '@nuxt/types' {
+  interface Context extends NuxtI18nApi {
+    i18n: VueI18n & IVueI18n
+  }
+
   interface NuxtAppOptions extends NuxtI18nApi {
     i18n: VueI18n & IVueI18n
   }