Determine locale with env variable

about.vue

<!-- pages/about.vue -->
<template>
  <div class="Content">
    <div class="container">
      <h1 class="Content__Title">{{ $t('about.title') }}</h1>
      <p>{{ $t('about.introduction') }}</p>
    </div>
  </div>
</template>

<script>
export default {
  head() {
    return { title: this.$t('about.title') }
  }
}
</script>

nuxt.config.js

// nuxt.config.js
module.exports = {
  env: {
    baseUrl: process.env.BASE_URL || 'http://localhost:3000',
    buildLocale: process.env.BUILD_LOCALE || 'en'
  },
  build: {
    vendor: ['vue-i18n']
  },
  plugins: ['~/plugins/i18n.js'],
  generate: {
    routes: ['/', '/about']
  }
}

plugins_i18n.js

// plugins/i18n.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'

import en from '~/locales/en.yaml'
import ja from '~/locales/ja.yaml'

Vue.use(VueI18n)

export default ({ app, store }) => {
  app.i18n = new VueI18n({
    locale: store.state.locale,
    fallbackLocale: 'en',
    messages: {
      en, ja
    }
  })
}

vuex_store_state.js

export const state = (): State => ({
  locale: process.env.buildLocale
})