Inconsistency in @nuxtjs/i18n locales after refreshing the page

I am currently working on an application where I am implementing language management, but I have encountered a difficulty. I am using the latest version of @nuxtjs/i18n. Changing the language successfully updates the URL and labels, yet upon refreshing the page, it reverts to the old language.

Below is my configuration:

[
 '@nuxtjs/i18n',
       {
           locales,
           defaultLocale,
           lazy: true,
           langDir: 'locales/',
           vueI18n: {
               fallbackLocale: defaultLocale,
           },
       },
   ],
   ['~/.build/merge-and-compare-locales.js', { defaultLocale }],

export const locales = [
    {
        code: 'en',
        file: 'en.json',
    },
    {
        code: 'fr',
        file: 'fr.json',
    },
]

export const defaultLocale = 'fr'

What steps can I take to ensure that the selected language persists even after a page refresh?

Please note that I am using the following method to change the language:

changeLocale(code: string) {
    this.$i18n.setLocale(code)
},

The language change works perfectly locally, but fails on other environments where a refresh causes it to revert back to the default language.

javascriptvue.jsnuxt.jsvue-i18n

Answer №1

Dealing with a similar issue that seems to stem from the SSR (Server-Side Rendering) process... In your store/index file, there needs to be a nsi (Nuxt Server Init) function set up similar to the example below.

async nuxtServerInit(ssrContext: Context) 
{
    if (this.$i18n.locale==='ar') {
      ssrContext.redirect("/ar");
    }
    else if (this.$i18n.locale === 'fa')
    {
      ssrContext.redirect('/')
    }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring the capabilities of a Vue.js component

I am currently facing some challenges while trying to test a Vue.js component. My main issue lies in setting a property for the component and verifying that it has been set correctly. For context, the module has been loaded with exports and the JavaScrip ...

javascriptunit-testingmocha.jsvue.js

How to display an [object HTMLElement] using Angular

Imagine you have a dynamically created variable in HTML and you want to print it out with the new HTML syntax. However, you are unsure of how to do so. If you tried printing the variable directly in the HTML, it would simply display as text. This is the ...

javascripthtmlangulartypescriptcomponents

Sequelize makes it easy to input records into various tables simultaneously

Embarking on my first experience with Sequelize and MySQL, I am seeking guidance on inserting data into two tables with a foreign key relationship. Let's delve into the structure of the entities - bookingDescription and bookingSummary. //bookingSumma ...

javascriptmysqlnode.jslambdasequelize.js

The handleChange function fails to trigger when selecting a date using Material UI components

I am currently facing an issue with the material ui datepicker. When I click on a date, the selected date is not chosen and the date window does not close. I suspect this is due to passing the date into another file and the handleChange function (from Form ...

javascriptreactjsformsmaterial-uiformik-material-ui

How can I use Three.JS TWEEN to animate object movement between two objects at a

I'm working on a game where an object moves towards other objects. new TWEEN.Tween( object.position ).to({ x: Math.position = pointX, z: Math.position.z = pointZ }).easing( TWEEN.Easing.Linear.None).start(); However, I've encountered a pr ...

javascriptthree.jsmovetween

If the element is checked and equal to a specific value, take action

I am trying to hide one of the 3 radio buttons on my page. Although they all have the same class, each button has a different value. I attempted to write code to achieve this, but unfortunately, it is hiding all radio buttons instead of just one. Could s ...

javascriptjqueryhtmlcss

Encountering a problem while integrating highchartsjs into a Vue3 application

I'm currently using Vue 3 and I followed the documentation to add highchartsjs to my project. However, I encountered an error: ✘ [ERROR] Could not resolve "highcharts" node_modules/highcharts-vue/dist/highcharts-vue.min.js:1:90: 1 │ ... ...

vue.jshighchartsvuejs3

Invoke v-on:click once new HTML has been added in Vue.js

Is it possible to trigger a function onclick after appending HTML in Vue.js using vue-append? this.html = '<div id="'+folderData[key].id+'" class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">' + ...

javascriptvue.js

Is there a way to duplicate and insert a function in node.js if I only have its name?

I'm currently working on a code generation project and I've encountered a problem that I initially thought would be easy to solve. However, it seems to be more complicated than I anticipated. My task involves taking a method name as input, naviga ...

javascriptnode.js

What steps can I take to ensure that my logos remain visible even when I close the menu and resize the window?

On my website, I have a menu of logos that are clickable. These logos always display except on smaller screens, where they need to be toggled to show using a hamburger menu. The menu toggles fine when it is on a smaller screen, but there is an issue when y ...

javascripthtmlcssdomresponsive-design

Arranging array elements according to the values in another array

I am working with an array of selections: var selections = ( JSON.stringify($('#approval').select2('data')) ); var selections = JSON.parse("[" + selections + "]"); When I use console.log with selections, the output is: https://i. ...

javascriptjquery

Utilizing jQuery to scrape HTML and dynamically manipulate elements

Is there a way to retrieve HTML content from a different subdomain and incorporate it into the current site? HTML snippet: <head> <body> <div id = "items"> <div id = "#one"> <ul> <li><a href = "#">C ...

javascriptjqueryhtmlajax

Search for elements with a specific substring in their class names using the querySelectorAll() method

I'm working with a custom component in app.js return ( {cards.map((index) => { return <Card key={index} /> ) Within the Card component, I assigned a specific className return ( <ListItem id="root" className="find-card"&g ...

javascriptreactjsmaterial-uireact-hooks

How do three buttons display identical content?

I have three buttons on my website, each with its own unique content that should display in a modal when clicked. However, I am experiencing an issue where regardless of which button I click, the same content from the last button added is displayed in the ...

javascripthtmlcss

Updating the style sheet of a selected menu item on an ASP.NET master page

I created an asp.net master page with a menu setup like this: <menu id="menu"> <nav id="main_nav"> <ul id="menu-primary"> <li ><a href="./">Home</a></li> <li><a href="staff.aspx"& ...

javascriptjqueryasp.netcss

What occurs when you use the statement "import someModuleName from someModule" in JavaScript?

When reusing a module in multiple places, you typically use module.exports = yourModuleClassName to make the module exportable. Then, when you want to use it elsewhere, you can simply import it with import yourModuleClassName from 'yourmodulePath&apos ...

javascriptnode.jsimportmodulenpm

How to access event.target in Internet Explorer 8 with unobtrusive Javascript

Here is a function that retrieves the target element from a dropdown menu: function getTarget(evt){ var targetElement = null; //if it is a standard browser if (typeof evt.target != 'undefined'){ targetElement = evt.target; } //otherwise ...

javascripteventsinternet-explorer-8

Ways to Press the Enter Key on Different Browsers

Looking for a solution to get the keypress action working properly? I have a chat feature where I need to send messages. Here is what I have in the Form-tag (JSP based): function SendMessage() { if (event.keyCode===13) { ale ...

javajavascriptjqueryhtmljsp

Tips for retrieving the count from HTML using JavaScript:

I need to determine the count of list items in an unordered list within dir-pagination-controls. How can I achieve this using JavaScript? <dir-pagination-controls min-size="1" direction-links="true" boundary-links="true" class="pull-right ng-isolate- ...

javascriptjqueryhtmlangularjs

Tips for setting a checkbox as checked based on a value using JQuery

My task is to set the checked status of my checkbox based on a data value. So far, I have been using the following method. $(document).ready(function(){ $('#add').click(function(){ $('#insert').val("Insert"); ...

javascriptjqueryajaxcheckbox