Discovering access to this.$i18n.locales from store getter in Nuxt, i18n, and Vuex

Question

Discovering access to this.$i18n.locales from store getter in Nuxt, i18n, and Vuex

Currently, I am constructing a web application utilizing Nuxt v2.15 and @nuxtjs/i18n v7.2 while employing Vuex for state management. Within my global state, I aim to develop a getter that retrieves a value reliant on this.$i18n.locale.

How can I effectively access the existing app context, which incorporates $i18n, in my Vuex getter method?

nuxt.config.js

export default {
  modules: [
    "@nuxtjs/i18n", // https://i18n.nuxtjs.org/
  ],
  i18n: {
    locales: { /* configuration */ },
    defaultLocale: "en",
    detectBrowserLanguage: {
      fallbackLocale: "en",
      redirectOn: "root",
    },
    langDir: "~/locales/",
    vueI18n: {
      fallbackLocale: "en",
      messages: { /* translation data */ },
    },
  },
};

store/index.js

export const state = () => ({
  // Root module for Vuex store: https://nuxtjs.org/docs/directory-structure/store/
});

export const getters = {
  loginOpts() {
    const locale = this.$i18n.locale;
    const uiLocales = [locale];
    if (locale === "zh") {
      uiLocales.push("zh-CN");
    }
    return { params: { ui_locales: uiLocales } };
  },
};

components/login.vue

<template>
  <div>
    <v-btn v-if="$auth.loggedIn" @click="$auth.logout()">Sign Out</v-btn>
    <v-btn v-else @click="$auth.loginWith('auth0', $store.getters.loginOpts)">Sign In</v-btn>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "Login",
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["loginOpts"]),
  },
};
</script>

My Expectations

My expectation is to be able to retrieve this.$i18n from a Vuex getter, or some alternative method to accomplish this.

The Current Scenario

Presently, within the getter method, this appears to be undefined.

TypeError: Cannot read properties of undefined (reading '$i18n')

Attempts Made

I have reviewed documentation for Vuex including State, Getters, as well as information regarding Nuxt i18n.

In addition, I have attempted:

Accessing state.$i18n
Incorporating $i18n: this.$i18n into the root state

javascript vue.js nuxt.js vuex nuxt-i18n

Answer 1

Answer №1

Last week, I encountered a similar issue where I had to utilize i18n within a Vuex getter.

While not the most efficient solution, it proved to be effective for me and resolved a major challenge during the development of a government application.

components/login.vue

<template>
  <div>
    <v-btn v-if="$auth.loggedIn" @click="$auth.logout()">Sign Out</v-btn>
    <v-btn v-else @click="$auth.loginWith('auth0', theLoginOpts)">Sign In</v-btn>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "Login",
  data() {
    return {
        theLoginOpts: $store.getters.loginOpts(this) // Implementing the necessary change
    };
  },
  computed: {
    ...mapGetters(["loginOpts"]),
  },
};
</script>

store/index.js

export const state = () => ({
  // Root module for Vuex store: https://nuxtjs.org/docs/directory-structure/store/
});

export const getters = {
  loginOpts: (state) => (app) => { // Utilizing app as an essential component 
    const locale = app.$i18n.locale;
    const uiLocales = [locale];
    if (locale === "zh") {
      uiLocales.push("zh-CN");
    }
    return { params: { ui_locales: uiLocales } };
  },
};

Answer 2

Last week, I encountered a similar issue where I had to utilize i18n within a Vuex getter.

While not the most efficient solution, it proved to be effective for me and resolved a major challenge during the development of a government application.

components/login.vue

<template>
  <div>
    <v-btn v-if="$auth.loggedIn" @click="$auth.logout()">Sign Out</v-btn>
    <v-btn v-else @click="$auth.loginWith('auth0', theLoginOpts)">Sign In</v-btn>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "Login",
  data() {
    return {
        theLoginOpts: $store.getters.loginOpts(this) // Implementing the necessary change
    };
  },
  computed: {
    ...mapGetters(["loginOpts"]),
  },
};
</script>

store/index.js

export const state = () => ({
  // Root module for Vuex store: https://nuxtjs.org/docs/directory-structure/store/
});

export const getters = {
  loginOpts: (state) => (app) => { // Utilizing app as an essential component 
    const locale = app.$i18n.locale;
    const uiLocales = [locale];
    if (locale === "zh") {
      uiLocales.push("zh-CN");
    }
    return { params: { ui_locales: uiLocales } };
  },
};

Answer 3

Answer №2

After hours of research, trial and error, and valuable discussions with the generous individuals who provided solutions here, it has become evident that accessing i18n directly in a Vuex getter method is not feasible, despite the fact that @nuxt/i18n registers a Vuex module named i18n, and all my readings on Vuex modules indicate otherwise.

However, I stumbled upon the documentation for @nuxt/i18n callbacks, which led me to develop a small custom plugin that updates the values of locale and uiLocales in the global state using a mutation.

The final implementation is structured as follows:

nuxt.config.js

export default {
  modules: [
    "@nuxtjs/i18n", // https://i18n.nuxtjs.org/
  ],
  plugins: [
    "~/plugins/i18n.js",
  ],
  i18n: {
    locales: { /* configuration */ },
    defaultLocale: "en",
    detectBrowserLanguage: {
      fallbackLocale: "en",
      redirectOn: "root",
    },
    langDir: "~/locales/",
    vueI18n: {
      fallbackLocale: "en",
      messages: { /* translation data */ },
    },
  },
};

plugins/i18n.js

export function findLocaleConfig (i18n, locale) {
  return (
    i18n.locales.find(({ iso, code }) => [iso, code].includes(locale)) || {}
  );
}

export default function ({ app }) {
  app.store.commit("localeChange", findLocaleConfig(app.i18n, app.i18n.locale));

  app.i18n.onLanguageSwitched = (oldLocale, newLocale) => {
    app.store.commit("localeChange", findLocaleConfig(app.i18n, newLocale));
  };
}

store/index.js

export const state = () => ({
  locale: null,
  uiLocales: [],
});

export const mutations = {
  localeChange(state, locale) {
    state.locale = locale.code;
    state.uiLocales = [locale.code, locale.iso];
  },
};

components/login.vue

<template>
  <div>
    <v-btn v-if="$auth.loggedIn" @click="$auth.logout()">Sign Out</v-btn>
    <v-btn v-else @click="$auth.loginWith('auth0', loginOpts)">Sign In</v-btn>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {};
  },
  computed: {
    loginOpts() {
      const uiLocales = this.$store.state.uiLocales;
      return { params: { ui_locales: uiLocales } };
    },
  },
};
</script>

Answer 4

After hours of research, trial and error, and valuable discussions with the generous individuals who provided solutions here, it has become evident that accessing i18n directly in a Vuex getter method is not feasible, despite the fact that @nuxt/i18n registers a Vuex module named i18n, and all my readings on Vuex modules indicate otherwise.

However, I stumbled upon the documentation for @nuxt/i18n callbacks, which led me to develop a small custom plugin that updates the values of locale and uiLocales in the global state using a mutation.

The final implementation is structured as follows:

nuxt.config.js

export default {
  modules: [
    "@nuxtjs/i18n", // https://i18n.nuxtjs.org/
  ],
  plugins: [
    "~/plugins/i18n.js",
  ],
  i18n: {
    locales: { /* configuration */ },
    defaultLocale: "en",
    detectBrowserLanguage: {
      fallbackLocale: "en",
      redirectOn: "root",
    },
    langDir: "~/locales/",
    vueI18n: {
      fallbackLocale: "en",
      messages: { /* translation data */ },
    },
  },
};

plugins/i18n.js

export function findLocaleConfig (i18n, locale) {
  return (
    i18n.locales.find(({ iso, code }) => [iso, code].includes(locale)) || {}
  );
}

export default function ({ app }) {
  app.store.commit("localeChange", findLocaleConfig(app.i18n, app.i18n.locale));

  app.i18n.onLanguageSwitched = (oldLocale, newLocale) => {
    app.store.commit("localeChange", findLocaleConfig(app.i18n, newLocale));
  };
}

store/index.js

export const state = () => ({
  locale: null,
  uiLocales: [],
});

export const mutations = {
  localeChange(state, locale) {
    state.locale = locale.code;
    state.uiLocales = [locale.code, locale.iso];
  },
};

components/login.vue

<template>
  <div>
    <v-btn v-if="$auth.loggedIn" @click="$auth.logout()">Sign Out</v-btn>
    <v-btn v-else @click="$auth.loginWith('auth0', loginOpts)">Sign In</v-btn>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {};
  },
  computed: {
    loginOpts() {
      const uiLocales = this.$store.state.uiLocales;
      return { params: { ui_locales: uiLocales } };
    },
  },
};
</script>

Answer 5

Answer №3

To retrieve the locale within a Vuex action, you can use: this.app.i18n.locale.
Keep in mind that this cannot be accessed within a state or getter (and using a getter for it isn't recommended anyway).

Just a heads up, this means you can access this value anywhere that you have access to the Nuxt context.

Answer 6

To retrieve the locale within a Vuex action, you can use: this.app.i18n.locale.
Keep in mind that this cannot be accessed within a state or getter (and using a getter for it isn't recommended anyway).

Just a heads up, this means you can access this value anywhere that you have access to the Nuxt context.

Answer 7

Answer №4

Our project implemented a simple method as shown below: In the computed property of the component

teamsForSelector() {
  return this.$store.getters['company/teamsForSelector'](this.$i18n);
}

and in the state getters

teamsForSelector: (state) => ($i18n) => {
const teamsForSelector = state.teams.map((team) => {
  return {
    id: team.teamUid,
    label: team.teamName,
  };
});
teamsForSelector.unshift({
  id: 'all-teams',
  label: $i18n.t('key'),
});

return teamsForSelector; }

Answer 8

Our project implemented a simple method as shown below: In the computed property of the component

teamsForSelector() {
  return this.$store.getters['company/teamsForSelector'](this.$i18n);
}

and in the state getters

teamsForSelector: (state) => ($i18n) => {
const teamsForSelector = state.teams.map((team) => {
  return {
    id: team.teamUid,
    label: team.teamName,
  };
});
teamsForSelector.unshift({
  id: 'all-teams',
  label: $i18n.t('key'),
});

return teamsForSelector; }

Answer 9

Answer №5

If your page successfully renders on the frontend in Nuxt 2, you have the option to access $i18n by using either window.$nuxt or simply $nuxt:

export const getters = {
  loginOptions() {
    const language = window.$nuxt.$i18n.language;
    ...
  },
};

Answer 10

If your page successfully renders on the frontend in Nuxt 2, you have the option to access $i18n by using either window.$nuxt or simply $nuxt:

export const getters = {
  loginOptions() {
    const language = window.$nuxt.$i18n.language;
    ...
  },
};

Discovering access to this.$i18n.locales from store getter in Nuxt, i18n, and Vuex

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Vue.js variable routes present an issue where the Favicon fails to appear

Optimal approach for vertically aligning elements in CSS

Preloading error alert message displayed during AJAX request

Deliver a communication from the dialogue box on the MEAN stack website to the task pane

Implementing onClick functionality in RecyclerView post JSON data extraction

How to extract words from a dynamic router.pathname in NextJS when only the filename is displayed instead of the full path?

implementing a collapsible sidebar menu with CSS tables

Use the regex tag in a React component to find a specific tag by name within two different possible

Using Javascript, load a URL by making a JQuery ajax GET request and specifying custom headers

What is the best way to create a cube in Three.js with the 4 corner points of the base and a specified height?

Issue with Ext JS: The property 'substring' is being attempted to be read from an undefined value

Updating content on a webpage via AJAX request without altering the original source code

Simultaneous malfunction of two ajax forms

Changing the depth buffer in a Three.js Shader Material

Accordion Functionality in Vue with Animation Effects

In React Native, the onPress handler will continue to be triggered indefinitely after 2-3 presses

The absence of the 'profileStore' property is noticed in the '{}' type, which is necessary in the 'Readonly<AppProps>' type according to TypeScript error code ts(2741)

I attempted to verify the login through postman, but encountered an error in the process

adding content to div is becoming less speedy

Display a button in a single row table