Is there a way to trigger a function when the language/locale changes with i18n? Can I achieve this using Vuex, or is there a specific method in vue-i18n to accomplish this?
Is there a way to trigger a function when the language/locale changes with i18n? Can I achieve this using Vuex, or is there a specific method in vue-i18n to accomplish this?
Monitoring $i18n.locale for updates is one approach, but typically, changes like this are rare. What specific scenario prompts the necessity for this?
watch: {
'$i18n.locale': function(newVal, oldVal) {
console.log('locale updated', newVal)
}
}
Unsure about how you have things set up, but I've been implementing Vue3 in SFC like this:
(adapted based on @kissu's suggestion)
<script setup lang="ts">
import { useI18n } from 'vue-i18n';
const { t, locale } = useI18n();
watch(locale, () => {
console.log('locale', locale.value);
});
</script>
This will trigger whenever the locale changes (such as via a language switcher outside of the file/component).
<script setup lang="ts">
import i18n from '@/i18n';
const locale = ref(i18n.global.locale);
watch(locale, () => {
console.log('locale', locale.value);
});
</script>
I found success with this approach (following the method mentioned by @goldensoju as the "old way"):
const activeLanguage = computed(() => i18n.global.language)
watch(activeLanguage, (value) => {
console.log(`language changed to: ${value}`)
})
Incorporating it into a Nuxt 3 project using yup was my recent challenge. I successfully achieved this by creating a custom plugin that gets automatically included:
plugins/yup-18n.ts
import { setLocale } from 'yup';
import { de, en } from 'yup-locales';
export default defineNuxtPlugin((nuxtApp) => {
const currentLocale = nuxtApp.vueApp.$nuxt.$i18n.locale;
// set initial yup locale
setLocale(currentLocale.value === 'en' ? en : de);
// update yup locale on locale change
watch(currentLocale, () => {
setLocale(currentLocale.value === 'en' ? en : de);
});
});
I have retrieved a value from the database, displayed it as an image, and made it a link. So, I want that when a user clicks on the different image, they get the result from the query related to the image. I hope everyone understands. <?php // Connect ...
I recently started using React and I am currently following a tutorial. Even though I have the exact same code as the tutorial, I'm encountering the following error. ./src/index.js Attempted import error: './components/App' does not have a ...
I am encountering issues while trying to develop a calculator using AngularJS. Below is the HTML code I have written: <!doctype html> <html class="no-js" lang=""> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-com ...
If I send a request on the client side using the code snippet below public/foo.js function bar() { fetch('https://api.github.com/') .then(response => response.json()) .then(data => { console.log(data) }) .catch( ...
For a personal project I'm working on just for fun, I'm trying to read an XML file from , parse the data, and use it to convert currency values. Although my code to read the XML is quite basic, I encountered the following error: XMLHttpRequest ...
Attempting to retrieve user location using geolocation in JavaScript, I am able to see the current location. However, when trying to assign the coordinates variable to a C# object label, it does not return anything. Below is my JavaScript code snippet: ...
Hey, I'm having an issue with my dynamically created drop-down menus. I can display them correctly using v-Show, but the problem is that when I click on one element, they all open below my code. <div :class="{inizio : utenteAttivo.nome === con ...
Could anyone explain why the content inside my v-card is slightly off to the left? I have tried using a ml-3 class to move it inside, but it doesn't stay there. What could be causing this issue? <template> <div> <h1 cl ...
Looking to customize the "skipNatural" boolean in the smart-table.js file, but concerned about it being overwritten when using Bower for updates. The current setting in the Smart-Table file is as follows: ng.module('smart-table') .constant(&ap ...
I recently started using a waveform display/play library known as wavesurfer. Within the code snippet below, I have integrated two wavesurfer objects that are displayed and positioned inside div elements of type "container". My goal is to position my own ...
I developed a custom drawer component for my React application const CustomSidebar = () => { return ( <Drawer open={drawerOpen} onClose={() => setDrawerOpen(false)} > <Box> <Navigator / ...
I am currently utilizing Material-ui Textfield to display a repeatable array object: const [sections, setSections] = useState([ { Title: "Introduction", Text: "" }, { Title: "Relationship", ...
Which approach do you believe is more effective among the options below? [ 1 ] Opting to utilize $emit for exposing methods from child components to parent components $emit('updateAPI', exposeAPI({ childMethod: this.childMethod })) OR [ 2 ] ...
The firebugx.js file (viewable at http://getfirebug.com/firebug/firebugx.js) is designed to detect the installation of Firebug by checking both !window.console and !console.firebug. However, this method does not account for the native console object in the ...
I am striving to prevent selection of past dates but have not been successful so far. Below is the code snippet: <TextField variant="outlined" id="datetime-local" label="Select Date and Time" placeholder="Sele ...
I am currently working on a function to reload the page without affecting our menu, which is an accordion. The goal is to refresh the page while keeping the menu in the same state. Below are the jQuery functions I am using to handle the page reload and en ...
I'm facing an issue where I am trying to send a JSON string from the client (js) to the server (.NET controller) using AJAX post. However, when the data reaches the controller, the list is empty with a count of 0, which is puzzling me. JS Code btnAd ...
I previously had my context and context provider set up in a file, and everything was working perfectly. However, I recently decided to convert all of my files to TypeScript, including this one. Unfortunately, I've encountered a strange issue that I c ...
I have a query regarding the background image rotation on my HTML page. I am currently using the code below to change the background image, but I want the first image to be displayed only once while the rest continue rotating. Can anyone provide guidance o ...
Attempting to complete this assignment which involves a user entering their username and password. If the information matches what is stored in the database, the user should be redirected to their profile page where a personalized greeting message is displ ...