Nuxt

N

Nuxt

Nuxt Community Chat Server

Join

Type declarations with `addServerTemplate` in a module

When using addServerTemplate, how should I add type declarations? The docs here only explain how to do this for addTemplate. Thanks!...

Unwrap SerializeObject.

I get this type from the backend: SerializeObject<ProcessedCar>[] how can I unwrap it from the SerializeObject?

Fastly Edge Caching with Nuxt 3 and NuxtLinks

Hey everyone, I have a question about how Fastly edge caching works with a Nuxt 3 application. I'm trying to understand if Fastly's edge caching is effective when a user navigates between pages using NuxtLinks and client-side routing. My current understanding is that Fastly caching only applies to the initial request from the CDN. So, if a user clicks a NuxtLink to an article, that request is handled by Nuxt's client-side routing, and Fastly's edge cache wouldn't be used. Is this correct, or am I missing something?...

Custom use fetch type error

I'm trying to build a custom use fetch composable and I have followed the nuxt documentation. The custom composable is always screaming a typescript error to me that there is no overload for this useFetchCall with these types. ``` Vue: No overload matches this call. Overload 1 of 2,...

How to type a custom Nuxt plugin instance in TypeScript?

I'm integrating Keycloak into my Nuxt 4 app with SSR disabled (SPA mode). I created a plugin to initialize Keycloak and provide the instance globally via nuxtApp.provide('keycloak', keycloak). I want to: Make $keycloak strongly typed when using const { $keycloak } = useNuxtApp()...

UseLazyAsyncData refresh behaviour

Hello, I'm using useLazyAsyncData on version 3.17.6 in pinia stores. I would like to know how the refresh is managed: on the first launch of the app the refresh is called but does nothing, on the other hand as soon as I refresh my page once, the refresh refetches the data. What could be causing this behaviour? I don't have any problems managing the fetch / status / refresh by myself. Thanks in advance...

useFetch undefined computed

How do I handle dependent values that may be undefined when using useFetch? For instance:
const { data: session } = await useLazyFetch('/api/session')
const { data: me } = await useLazyFetch(`/api/users/${session.value.userId}`)
const { data: session } = await useLazyFetch('/api/session')
const { data: me } = await useLazyFetch(`/api/users/${session.value.userId}`)
...

trailingSlash with query string

Hi I’m using the trailingSlash option to add a trailing slash to <NuxtLink />: ``` router: {...

Get api return type to use with component prop

Is there a way to get the return type of an api endpoint to use with defineProps? I know I can pull it out when I use $fetch or useFetch, but that won't work with the props.

Nuxt 4 TypeScript vue-tsc upgrade error "Compiler option '--noEmit' may not be used with '--build"

The Nuxt4 Upgrade Guide says to use nuxt prepare && vue-tsc -b --noEmit however this results in an error with latest Nuxt (4.0.3) and vue-tsc (3.0.5). ``` $ npm run typecheck
red@0.0.1 typecheck nuxt prepare && vue-tsc -b --noEmit...

Provide function for module

What would be the best way for the user to provide a custom function for a module? The module will execute the function from a registered server routes defineEventHandler I also don't want it set in the nuxt.config.ts

Updating Nuxt and @nuxtjs/composition-api breaks the Jest setup

So I updated Nuxt from 2.15 to 2.18 and @nuxtjs@composition-api from 0.29 to 0.34. But now my Jest setup does not work. I have a global mock for composition api like this: ``` // mocks/@nuxtjs/composition-api.js...

Manually open the ContextMenu component

Is it possible to manually open the ContextMenu component? My ContextMenu should be opened over the canvas. On the canvas, I render some stuff, and it has its own interactivity, including the right mouse button. The context menu trigger is a bit different in my case. Another framework provides the canvas' interactivity, so that I don't have access to the actual DOM element. ...

Request cancellation - dedupe on post requests

I have this useFetch: ```js const { data, execute } = await useFetch('/api/cars/filter', { method: 'POST', ignoreResponseError: true, body,...

Custom useFetch

I'm refactoring my custom use fetch since the api always returns a specific type if there is an error. How can I specify when there is an error response from the api that it is of type MyApiErrorResponse or something else?...

New project - Your project has pages but the `<NuxtPage />` component has not been used.

I've created a project using the nuxt new command, installed with nuxt/ui and nuxt/image and I am getting this error when navigating to any page
No description

Auth solutions for Cloudflare Workers

I think I've decided I want to build a Nuxt app deployed with CF Workers, but I'm getting confused on auth. I'm pretty new to webdev in general so sorry if any of this is dumb: BetterAuth got a lot of recommendations but it looks like it doesn't have good worker compatibility. Auth.js advertises good worker compat but there's some drama about there not being official Nuxt integration (does this matter much?), and the community module doesn't seem to have worker compat because it relies on Nuxt Server? These's a nuxt-auth-utils module with good worker compat but I feel like I'd be straying a bit too far from popular, well-supported standards at that point, which is somewhat important to me in case solutions like this just get randomly archived. Clerk was also highly recommended but the costs seem way too high if the site gets really popular. ...

Links to public assets break after `nuxi generate`

Definitely 'baby's first Nuxt build' issue. In my app I reference public assets like <img src="/images/me.jpg"> and they work. After build the assets are no longer found, but changing them to <img src="images/me.jpg"> fixes it (notice missing leading/)...

Module author upgrading Kit versions

Hi, if I update my module's @nuxt/kit and @nuxt/schema version from 3.x.x to 4, will Nuxt 3 users still be able to use it? I assume as long as meta.compatibility.nuxt is like this it will still work? ```ts...

i18n module - $t is not defined

I am having trouble with nuxt i18n module. Everything works fine in development mode, but when I want to run a production on Ubuntu with Docker, I get 500 error - $t is not defined. Why's that? Everything other works cool, so I wouldn't say that modules aren't installed. But maybe the translations file are missing? Where are they stored in production?