Kyllian Posts - Answer Overflow

Kyllian

•Created by Kyllian on 4/22/2025 in #❓・help

Hydration error I can not figure out

Currently, this page displays a map with markers on it. When clicking a marker it (should) take me to a different url. I use navigateTo and the URL itself gets changed just fine. It seems like it simply does not update my specificLocation:

const slug = computed(() => route.params.slug);

const specificLocation = ref();
watch(slug, async () => {
    console.log("slug changed", slug.value);
    if (slug.value.length === 3) {
    const { data: location } = await useLazyFetch(`/api/v2/locations/search`, {
        params: {
            countryCode: slug.value[0],
            cityName: slug.value[1],
            locationName: slug.value[2],
        }
    });

    console.log("Location updated")
    specificLocation.value = location.value;
}
}, {immediate: true})

const slug = computed(() => route.params.slug);

const specificLocation = ref();
watch(slug, async () => {
    console.log("slug changed", slug.value);
    if (slug.value.length === 3) {
    const { data: location } = await useLazyFetch(`/api/v2/locations/search`, {
        params: {
            countryCode: slug.value[0],
            cityName: slug.value[1],
            locationName: slug.value[2],
        }
    });

    console.log("Location updated")
    specificLocation.value = location.value;
}
}, {immediate: true})

<div v-if="slug !== ''" class="w-full">
                    <div v-if="specificLocation">
                        <h1 class="text-white text-left w-full font-bold text-xl">{{ specificLocation.location.name }}
                        </h1>
                        <!-- <h2 class="text-gray-300 text-left w-full text-sm">{{ specificLocation.cityName }}</h2>
                        <ClientOnly>
                            <p id="richtext" class="text-white text-left w-full mt-2" v-html="description"></p>
                        </ClientOnly> -->
                    </div>
                    <div v-else>
                        Loading...
                    </div>
                </div>

<div v-if="slug !== ''" class="w-full">
                    <div v-if="specificLocation">
                        <h1 class="text-white text-left w-full font-bold text-xl">{{ specificLocation.location.name }}
                        </h1>
                        <!-- <h2 class="text-gray-300 text-left w-full text-sm">{{ specificLocation.cityName }}</h2>
                        <ClientOnly>
                            <p id="richtext" class="text-white text-left w-full mt-2" v-html="description"></p>
                        </ClientOnly> -->
                    </div>
                    <div v-else>
                        Loading...
                    </div>
                </div>

It simply keeps in the loading state, what could this be.

12 replies

NNuxt

•Created by Kyllian on 4/7/2025 in #❓・help

Mongoose 'Cannot overwrite `PhotoRequest` model once compiled.'

I have this Mongoose model:

import mongoose, { type ObjectId } from "mongoose";

interface IPhotoRequest {
    locationId: ObjectId,
    photo: string,
}

const schema = new mongoose.Schema<IPhotoRequest>({
    locationId: {
        type: mongoose.Schema.Types.ObjectId,
        ref: 'Location',
        required: true
    },
    photo: {
        type: String,
        required: true
    },

});

const PhotoRequest = mongoose.model<IPhotoRequest>('PhotoRequest', schema, 'photorequests');
export default PhotoRequest;

import mongoose, { type ObjectId } from "mongoose";

interface IPhotoRequest {
    locationId: ObjectId,
    photo: string,
}

const schema = new mongoose.Schema<IPhotoRequest>({
    locationId: {
        type: mongoose.Schema.Types.ObjectId,
        ref: 'Location',
        required: true
    },
    photo: {
        type: String,
        required: true
    },

});

const PhotoRequest = mongoose.model<IPhotoRequest>('PhotoRequest', schema, 'photorequests');
export default PhotoRequest;

Which I import on my server like this:

import PhotoRequest from "~/models/photo_request";

import PhotoRequest from "~/models/photo_request";

And in my front-end:

<script lang="ts" setup>
import PhotoRequest from '~/models/photo_request'

const props = defineProps<{ request: typeof PhotoRequest}>()
const emit = defineEmits<{

}>()

</script>

<script lang="ts" setup>
import PhotoRequest from '~/models/photo_request'

const props = defineProps<{ request: typeof PhotoRequest}>()
const emit = defineEmits<{

}>()

</script>

Yet I still get this error: 'Cannot overwrite PhotoRequest model once compiled.' How can this be?

10 replies

NNuxt

•Created by Kyllian on 3/20/2025 in #❓・help

Loading in large dataset

Hi, I currently have a huge .json file (40mb) which I'm trying to import. const { default: availableCities } = await import('~/assets/cities.json') console.log(Object.keys(availableCities)) But I run out of memory. What would be the best way to get this data into Nuxt.

17 replies

NNuxt

•Created by Kyllian on 3/10/2025 in #❓・help

useFetch, how to type correctly.

I have this useFetch:

const updateRef = ref(0)
const { data, status } = useFetch(`/api/v2/locations/${parsedId}`, {
    watch: [updateRef],
})

const updateRef = ref(0)
const { data, status } = useFetch(`/api/v2/locations/${parsedId}`, {
    watch: [updateRef],
})

The route always returns 'status'. The optional return types are 'statusMessage', 'city', 'stones' and 'location'. The only type my IDE returns is 'status', as it's always present. How can I properly access optional fields without overriding the type in useFetch.

32 replies

NNuxt

•Created by Kyllian on 3/6/2025 in #❓・help

Nuxt UI table, tooltip on row.

How would one create a tooltip on a complete row. Couldn't figure it out with the templating...

16 replies

NNuxt

•Created by Kyllian on 3/5/2025 in #❓・help

Nuxt TipTap, how to get the content to a parent component

Nuxt TipTap suggest we create a component for the editor. But how do I get data from the editor to my child component?

4 replies

NNuxt

•Created by Kyllian on 3/3/2025 in #❓・help

Hydration mismatch in Nuxt UI

Using

<UInput/>

<UInput/>

And custom config

input: {
            wrapper: "relative",
            base: "relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0",
            default: {
                size: "md",
                color: "gray",
                variant: "outline",
            },
            error: {
                size: "md",
                color: "red",
                variant: "outline",
                style:
                    "ring-1 ring-red-300 focus:ring-red-300"
            },
            color: {
                white: {
                    outline:
                    "ring-1 ring-gray-300 focus:ring-1 focus:ring-main-500 py-2 px-3 leading-tight transition duration-150 ease-in-out"
                }
            },
        },

input: {
            wrapper: "relative",
            base: "relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0",
            default: {
                size: "md",
                color: "gray",
                variant: "outline",
            },
            error: {
                size: "md",
                color: "red",
                variant: "outline",
                style:
                    "ring-1 ring-red-300 focus:ring-red-300"
            },
            color: {
                white: {
                    outline:
                    "ring-1 ring-gray-300 focus:ring-1 focus:ring-main-500 py-2 px-3 leading-tight transition duration-150 ease-in-out"
                }
            },
        },

- rendered on server: class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 form-input rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400" - expected on client: class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 form-input rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm ring-1 ring-gray-300 focus:ring-1 focus:ring-main-500 py-2 px-3 leading-tight transition duration-150 ease-in-out" how does one fix this? shouldnt nuxt ui take my styling into account

5 replies

NNuxt

•Created by Kyllian on 3/2/2025 in #❓・help

Emit not working

I use this to open a modal:

    useModal().open(PanelModalsAddOrEditUser, {
        onUserAdded: (user: {}) => {
            console.log("Add hook");
            if (data.value && data.value.users) {
                data.value.users.push(user)
            }
        },
        onUserEdited: (user: {}) => {
            console.log("Edit hook");
        }
    })

    useModal().open(PanelModalsAddOrEditUser, {
        onUserAdded: (user: {}) => {
            console.log("Add hook");
            if (data.value && data.value.users) {
                data.value.users.push(user)
            }
        },
        onUserEdited: (user: {}) => {
            console.log("Edit hook");
        }
    })

Define my emits in AddOrEditUser:

const emit = defineEmits<{
    (e: 'userAdded', user: {}): void;
    (e: 'userEdited', user: {}): void;
    (e: 'random') : void
}>();

const emit = defineEmits<{
    (e: 'userAdded', user: {}): void;
    (e: 'userEdited', user: {}): void;
    (e: 'random') : void
}>();

And then call them like this:

if (props.user) {
            console.log("userEdited", response.user);
            emit('random');
            // emit('userEdited', response.user as IUser);
        } else {
            emit('userAdded', response.user as IUser);
        }

if (props.user) {
            console.log("userEdited", response.user);
            emit('random');
            // emit('userEdited', response.user as IUser);
        } else {
            emit('userAdded', response.user as IUser);
        }

Problem being, userAdded works perfectly fine. But userEdited or random does not. How can this happen?

10 replies

NNuxt

•Created by Kyllian on 3/2/2025 in #❓・help

Common way to read /assets/ dir in server side code

Hi, I'm wondering what the best way to read from the assets directory is. Using FS doesn't feel right considering it might differ on prod builds.

7 replies

NNuxt

•Created by Kyllian on 2/28/2025 in #❓・help

Hydratation mismatch when using lazyFetch

This piece of code gives me a hydratation mismatch, when removing the for loop that displays the users it's gone.

<script lang="ts" setup>
import type { IUser } from '~/models/user';


definePageMeta({
    layout: 'panel'
})

if (!(await allows(editUsers))) {
    navigateTo('/panel')
}

const { data, status } = useLazyFetch<{ users: IUser[] }>('/api/v2/users/all', {
    server: false
});

const onSearch = (query: string) => {
    console.log("onSearch", query)
}

const onAdd = () => {
    console.log("onAdd")
}
</script>

<template>
    <NuxtLayout class="flex">
        <PanelBarsEditBar title="Users" @search="onSearch" @add="onAdd"
            :breadcrumb="{ text: 'Dashboard', href: '/panel' }" :bulk-actions="[
                { name: 'Delete', action: () => console.log('delete') }
            ]" :search="true" />
        <div v-if="status === 'pending'">
            <p>pending...</p>
        </div>
        <template v-else-if="data && data.users">
            <div v-for="theUser in data.users" :key="theUser.username">
                {{ theUser.username }}
            </div>
        </template>
    </NuxtLayout>
</template>

<script lang="ts" setup>
import type { IUser } from '~/models/user';


definePageMeta({
    layout: 'panel'
})

if (!(await allows(editUsers))) {
    navigateTo('/panel')
}

const { data, status } = useLazyFetch<{ users: IUser[] }>('/api/v2/users/all', {
    server: false
});

const onSearch = (query: string) => {
    console.log("onSearch", query)
}

const onAdd = () => {
    console.log("onAdd")
}
</script>

<template>
    <NuxtLayout class="flex">
        <PanelBarsEditBar title="Users" @search="onSearch" @add="onAdd"
            :breadcrumb="{ text: 'Dashboard', href: '/panel' }" :bulk-actions="[
                { name: 'Delete', action: () => console.log('delete') }
            ]" :search="true" />
        <div v-if="status === 'pending'">
            <p>pending...</p>
        </div>
        <template v-else-if="data && data.users">
            <div v-for="theUser in data.users" :key="theUser.username">
                {{ theUser.username }}
            </div>
        </template>
    </NuxtLayout>
</template>

16 replies

NNuxt

•Created by Kyllian on 2/25/2025 in #❓・help

API Keys

Asked this question before, but its still not quite clear for me. I'm trying to implement API keys into my server part, the frontend does requests to the backend API. I would like for the API key to not be exposed to the frontend. What are my options here? The client wants data to show on the frontend for everyone, but for people to use the API they should receive a key. For me it kind of sounds like we're solving exactly nothing. Please let me know your thoughts

6 replies

NNuxt

•Created by Kyllian on 2/23/2025 in #❓・help

Website not working on prod, no useful errors.

9 replies

NNuxt

•Created by Kyllian on 2/12/2025 in #❓・help

Input background color does not work

16 replies

NNuxt

•Created by Kyllian on 5/15/2024 in #❓・help

Distinguish app/desktop users with SWR

Hi, Currently using SWR and I was wondering how I can distinguish users in the API. A use case would be where I want to show different products for users on mobile. Will this not invalidate the SWR response and cause a reload?

2 replies

NNuxt

•Created by Kyllian on 4/10/2024 in #❓・help

RayGun maximum call stack size exceeded

Hi, I'm trying to implement RayGun (kind of like sentry) into my nuxt application. Running in dev mode works fine, unfortunately running it in preview mode always leads to a Maximum call stack size exceeded. How would I debug this? Or is it a RayGun issue?

1 replies

NNuxt

•Created by Kyllian on 4/8/2024 in #❓・help

Very inconsistent JS execution time

Hi guys, We're currently experiencing very inconsistent loading times for our site. A sample would be: https://pagespeed.web.dev/analysis/https-www-minecraftiplist-com-server-tags-Aternos/qsfii3250j?utm_source=search_console&form_factor=mobile&hl=nl How would we even start to debug those? As running them now will probably bring the time down. This hurts our SEO really bad.

6 replies

NNuxt

•Created by Kyllian on 3/30/2024 in #❓・help

How to decrease server response time?

Hi, I know it's a broad question, but let me explain. I'm currently experiencing some issues with Nuxt under 'high' load. The server response time will increase from ~300ms to ~700m. But the API is done within 10ms according to the logs. Which makes me think somewhere there might be a bottleneck in the network itself. Pinging the domain takes around 20ms at most. Where would I begin looking for those issues? DNS resolving seems fine according to the network tab. The content download itself is 80ms, but the 'Waiting for server response' is easily 300ms+.

9 replies

NNuxt

•Created by Kyllian on 3/29/2024 in #❓・help

LCP Insanely high with 'dynamic' text

Hi guys, we've been struggling for a while with our web-vitals. To keep it simple; we fetch 15 objects using useFetch. We throw this into a component and read a textual value of this. This causes a huge LCP from 2.5 seconds on the mobile test. This component also includes a video, which might be the reason why it's slow in the first place. Is there any way to improve the LCP or statistics in general. We already optimized the server/api a lot. It takes around 2-10ms to respond. Please let me know if you need any code, don't want to throw the complete project on here 😛

23 replies

NNuxt

•Created by Kyllian on 3/18/2024 in #❓・help

nuxt-gtag unused javascript

4 replies

NNuxt

•Created by Kyllian on 2/11/2024 in #❓・help

$fetch catches error, but not able to read body

32 replies

Gaming

Programming