CS
CS
Explore posts from servers
DIAdiscord.js - Imagine an appNNuxtDTDrizzle Team
PostsComments
NNuxt
Created by CS on 4/21/2024 in #❓・help
Route switching when using i18n setLocale doesn't work...?
Hey there Nuxt community! I've been having a problem with my Nuxt application, (seemingly after upgrading my Nuxt package from 3.11.1 to 3.11.2 - but I'm not sure if that's the sole reason....) My problem is that when I switch the locale for my webapp, I don't have a "re-route" to the new route (for example from english ("/") to german ("/de-DE"), it stays on "/"). My current code looks something like this (like I said, after various iterations of things that didn't appear to work) 
<template>
  <nav>
    <div class="nav-icons">
      <div
        v-for="language in locales"
        :key="language.code"
        class="language"
        :class="{ active: locale === language.code }"
        @click.prevent.stop="onLocaleChange(language.code)"
      >
        <Icon :name="language.icon" />
        <span>{{ language.name }}</span>
      </div>
    </div>
    <div class="links">
      <NuxtLink v-for="link in links" :key="link.to" :to="localePath(link.to)">{{ link.text }}</NuxtLink>
      <NuxtLink :to="localePath({ path: '/', hash: '#sport-select' })">Sport Selection</NuxtLink>
    </div>
  </nav>
</template>

<script lang="ts" setup>
const { locale, locales, setLocale } = useI18n();
const localePath = useLocalePath();
const router = useRouter();
const localeRoute = useLocaleRoute();
const switchLocalePath = useSwitchLocalePath();

const onLocaleChange = async (l: string) => {
  await setLocale(l);
  const switchPath = switchLocalePath(l);
  console.log(switchPath);
  router.push({
    replace: true,
    path: switchPath,
  });
};
<template>
  <nav>
    <div class="nav-icons">
      <div
        v-for="language in locales"
        :key="language.code"
        class="language"
        :class="{ active: locale === language.code }"
        @click.prevent.stop="onLocaleChange(language.code)"
      >
        <Icon :name="language.icon" />
        <span>{{ language.name }}</span>
      </div>
    </div>
    <div class="links">
      <NuxtLink v-for="link in links" :key="link.to" :to="localePath(link.to)">{{ link.text }}</NuxtLink>
      <NuxtLink :to="localePath({ path: '/', hash: '#sport-select' })">Sport Selection</NuxtLink>
    </div>
  </nav>
</template>

<script lang="ts" setup>
const { locale, locales, setLocale } = useI18n();
const localePath = useLocalePath();
const router = useRouter();
const localeRoute = useLocaleRoute();
const switchLocalePath = useSwitchLocalePath();

const onLocaleChange = async (l: string) => {
  await setLocale(l);
  const switchPath = switchLocalePath(l);
  console.log(switchPath);
  router.push({
    replace: true,
    path: switchPath,
  });
};
I'm pretty sure that switchPath version used to work before I upgraded my Nuxt version.... But currently it doesn't anymore. The cookie value does get changed, but the site url doesn't, which sucks, cause when refreshing the page it will swap back to the original language (not the new one that it was supposed to use)... I'd really appreciate it if anyone could give me some pointers/things to try or knows any other tips! Thanks!
19 replies
DTDrizzle Team
Created by CS on 4/12/2024 in #help
Is there a way to define "nullable" types for magic SQL?
For example sql<number | null>...? It seems that you can't pass a union like that, but you can pass a type that you define as type NumOrNull = number | null, but when looking at the type hints of my return value it still shows just number. Not a really important question at this point - just thought I'd ask! :)
1 replies
DTDrizzle Team
Created by CS on 3/24/2024 in #help
What am I doing wrong with migrations?
No description
19 replies