dayjs-module icon indicating copy to clipboard operation
dayjs-module copied to clipboard

dayjs reverts to defaultLocale when rendered server side

Open christian-lorenz opened this issue 3 years ago • 1 comments

So I've got the case that the global language changes depending on some api data:

async fetch() {
    const res = await this.$apollo.query({
      query: eventSeriesBySlug,
      variables: {
        'slug': this.$route.params.slug
      }
    });

    this.eventSeries = res.data.eventSeriesBySlug;

    // "en"
    this.locale = this.eventSeries.language.short;
    
    // i18n works fine and the page updates
    this.$i18n.setLocale(this.locale);

    // just updates and stays at the locale when rendered client side 
    this.$dayjs.locale(this.locale);
  }

The page / dayjs shows up for like 1 second in the right language but then switches back to whatever is standing in the nuxt config. (also watchable with {{ $dayjs.locale() }} "en" => "de" in my case)

dayjs: {
  locales: ['en', 'de'],
  defaultLocale: 'de',
  defaultTimeZone: 'Europe/Berlin',
  plugins: [
    'utc', // import 'dayjs/plugin/utc'
    'timezone' // import 'dayjs/plugin/timezone'
  ] // Your Day.js plugin
},

I'm not sure if this is a bug or a missing feature or if there's a workaround for this (but stackoverflow is suspicious quiet on this).

Edit: This just happens when rendered server side! Client side it's fine. But when doing a hard reload, the switch appears. Link: https://stackoverflow.com/questions/71557315/set-global-dayjs-locale-at-nuxt-ssr

christian-lorenz avatar Mar 21 '22 12:03 christian-lorenz

I also experience this issue, in that locales are ignored when SSR. This isn't an issue for all formats, as often it doesn't matter, but is and issue when formatting 'd' for instance, which would start Monday 0 got en-gb, but Sunday 0 for default.

PeteJStewart avatar Sep 21 '22 11:09 PeteJStewart