Nuxt

N

Nuxt

Nuxt Community Chat Server

Join

Layer with Component Prefix

I am trying to append a prefix "Special" to the components that comes from the Layer. So that there is a clear difference between each of it. But when ever I use the component in the main app, it is not showing and gives this error. How can I fix this? ``` [Vue warn]: Failed to resolve component: SpecialLayerComponent If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. ...
No description

useId() not passing value in function parameter

im trying to create an object list of toast configurations to render a list of toasts. when passing useId into any function exported by the composable it returns undefined ```typescript <script lang="ts" setup>...

Layers architecture and performance

I'm using a simple monorepo to separate the code: ```pnpm-workspace.yaml packages: - 'libs/*'...

[Nuxt 3.16] useFetch data empty on SSR

Let's take a basic api fetch: ```<script setup> const { data: initialData,...

Multiple mockNuxtImport

Hi ! I'm using mockNuxtImport from @nuxt/test-utils/runtime to mock the useLazyFetch method, which works fine. As mentioned in the documentation, we can't use multiple mockNuxtImport as it'll be hoisted but we can use vi.hoisted to expose mocks and use them in a single mockNuxtImport use. ...

Add google map with nuxt

Hi guys, do you have any idea on how to add google map with nuxt project ? Both vue3-google-map and @fawmi/vue-google-maps doesn't work for me, got error like hydratation, or module doesn' t existe. I'm starting to go crazy...

Inconsistent queryCollection

Hello, we've coded up our first nuxt (v3.15.4) project. We've used nuxt for all sorts of SEO, gtag and more. Neat stuff!
We're having an issue with queryCollection. It's returning different array sizes across multiple calls for the same query: ```...

Nuxt, backend required?

Hi all, I’m building a SaaS in Nuxt. I know this has been mentioned multiple times but I’ve spent the last few nights researching if it’s a good idea to use Nuxt has the backend and the answers are never straight forward....

HTML lang broken

I upgrade my project and its dependencies and now my HTML-Attribute is set to lang="[object Object]" I didn't change anything and I set the lang as usual in my htmlAttrs. I also use Nuxt SEO....

WebP Styling Issues on Cloudflare Pages (Nuxt 3, cloudflare_pages preset)

Hi everyone, I'm running into a strange issue when deploying my Nuxt 3 app on Cloudflare Pages using the cloudflare_pages preset in nuxt.config.ts. It appeared only after migrating my png images to webp. Problem:...
No description

How to test Nuxt 3 Nitro Server endpoints and middlewares (avoiding defineEventHandler not defined)

Hi, how would you test a Nuxt server api endpoint or middleware? I do struggle with ReferenceError: defineEventHandler is not defined errors. defineEventHandler is a Nitro-specific runtime utility that is not available in my test environment. The way my test is currently set up, I am trying to execute the middleware file directly, but defineEventHandler is not properly mocked. How could I do that? I haven't found any working online resources for examples of testing Nuxt server routes / Nitro routes with Vitest in a Nuxt project :/ Would be very happy if anyone could look into my setup or provide me with resources so that I can get my setup to work ...

Nuxt Devtools inspector/go to file is not working in v2.2.0 and above. but it works in v2.1.3

I was wondering if anyone else has this problem? it wont even highlight the components while hovering on them, and also when i click on the regular menu (toggling it) it wont work unless i toggle it to on then refresh the page.

Deployment failed on cloudflare

I got this error when deploying to cloudflare `15:50:51.219 [error] [ nuxi ] Nuxt Build Error: [vite]: Rollup failed to resolve import "unenv/runtime/mock/noop" from "/opt/buildhome/repo/node_modules/@nuxt/scripts/dist/runtime/validation/mock.js". 15:50:51.219 This is most likely unintended because it can break your application at runtime. 15:50:51.219 If you do want to externalize this module explicitly add it to...

SameSite "does not have a proper SameSite attribute"

Hello, I try add a cookie this way : ```ts const token = useCookie('token', {...

How to activate preview of website when sending the url to whatsapp

Hello everyone, does anyone know about how we can use seo to activate the preview of our website when sending the url to whatsapp. I have already did this way, but the preview is still not appear.

How To Cloudflare workers with Nuxt 3 ?

Hello community, I’m trying to deploy a nuxt site to cloudflare. I used the nuxt starter from the cli. But I haven’t been able to use the workers for the /server/api together with the hono library. ...

Nuxt image, how can I add dynamic images in tabs.

Hi, IPX generates a static image only for the first tab for the other 2 which are hidden by default (v-if) does not generate images. How to do it correctly to point these photos to prerender? I already tried to import them. I use <transition> so in the inside I can't give a list with v-show with v-for...
No description

[SOLVED] NuxtUI and/or Tailwind apply only selective styles

Hi. I've just read the blog post regarding the new version of Nuxt, v3.16. I updated one of my local projects via the stated command npx nuxi@latest upgrade --dedupe. The upgrade seemed to work fine. However, once I started the development server via bun dev (I also tried yarn dev and others), I noticed that it seemed to be not compatible with the nuxt-og-image module, which is contained in @nuxtjs/seo....

If I have several routes cached with swr, how do I bypass that cache if the user is authenticated?

I want to be able to page cache certain routes, like: ```js routeRules: { '/blog/**': { swr: 600 }, }...

To allow this host, add "xxx.ngrok-free.app" to `server.allowedHosts` in vite.config.js.

To allow this host, add "xxx.ngrok-free.app" to server.allowedHosts in vite.config.js.