Skip to content

dayjs reverts to defaultLocale when rendered server side #401

@christian-lorenz

Description

@christian-lorenz

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions