npm i nuxt-i18n

export const i18n = {
  locales: [
    {
      code: 'en',
      iso: 'en-US',
      name: 'EN',
      file: 'en.js',
    },
    {
      code: 'ru',
      iso: 'ru-RU',
      name: 'RU',
      file: 'ru.js',
    },
  ],
  lazy: true,
  langDir: '/locales/',
  defaultLocale: 'en',
  detectBrowserLanguage: {
    alwaysRedirect: true,
    fallbackLocale: 'en',
    onlyOnRoot: true,
  },
}

export default {
  home: {
    title: 'Nuxt blog',
    subtitle: 'The best blog you can find on the global internet',
    postCount: 'Total posts: ',
  },
  post: {
    linkHome: 'Home',
  },
  footer: {
    feedback: 'Contact us',
    copyright: 'All rights reserved',
  },
}

locales/
-- i18n-nuxt-config.js
-- en.js
-- ru.js

{
  modules: [
    ['nuxt-i18n', i18n],
  ]
}

import { i18n } from './locales/i18n-nuxt-config'

<template lang="pug">
section.section
  .content
    nuxt-link.lth__link(
      class="primary"
      :to="localePath('/')"
    )
      img.lth__link-icon(
        src="~/assets/icons/home.svg"
        alt="icon-home"
      )
      | {{ $t('post.linkHome') }}
</template>

export default [
  {
    id: 1,
    title: 'Post 1',
    desc:
      'A short description of the post to keep the user interested.' +
      ' Description can be of different lengths, blocks are aligned' +
      ' to the height of the block with the longest description',
    file: 'content/posts/1.md',
    img: 'assets/images/1.svg',
  },
  ...
] as Post[]

const en = [
  {
    id: 1,
    title: 'Post 1',
    desc:
      'A short description of the post to keep the user interested.' +
      ' Description can be of different lengths, blocks are aligned' +
      ' to the height of the block with the longest description',
    file: 'content/posts/1.md',
    img: 'assets/images/1.svg',
  },
  ...
] as Post[]
const ru = [
  {
    id: 1,
    title: 'Пост 1',
    desc:
      'Краткое описание поста, чтобы заинтересовать пользователя.' +
      ' Описание может быть разной длины, блоки выровнены' +
      ' по высоте блока с самым длинным описанием',
    file: 'content/posts/1.md',
    img: 'assets/images/1.svg',
  },
  ...
] as Post[]
export default { en, ru }

computed: {
    posts(): Post[] {
      const { locale } = (this as any).$i18n
      return posts[locale as 'en' | 'ru']
    },
  },

computed: {
    currentPost(): Post | undefined {
      const { locale } = (this as any).$i18n
      return posts[locale as 'en' | 'ru'].find(
        (post: Post) => post.id === this.currentId
      )
    },
  },

<template lang="pug">
section.section
  .content
    .app-options
      switcher-lang
      switcher-color-mode
</template>

<template lang="pug">
select(
  v-model="selected"
  class="body3 medium"
  @change="changeLocale"
)
  option(
    v-for="locale in $i18n.locales"
    :key="locale.code"
    :value="locale.code"
  ) {{ locale.name }}
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  name: 'SwitcherLang',
  data: () => ({
    selected: '' as 'en' | 'ru',
  }),
  created() {
    this.selected = (this as any).$i18n.locale
  },
  methods: {
    changeLocale() {
      const switchPath = (this as any).switchLocalePath(this.selected)
      this.$router.push(switchPath)
    },
  },
})
</script>