Skip to content

dayjs reverts to defaultLocale when rendered server side #401

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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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