Nuxt

N

Nuxt

Nuxt Community Chat Server

Join

@nuxt/turnstile module is acting differently in production

The @nuxt/turnstile module is working well on localhost but if i am using it in production , the tailwind css is not loading and working.

Redirect during SSR

```js const data = await useFetchWrapper(async () => { const person = await FETCH_DOC({ endpoint: 'people', slug: params.slug as string, query: { populate: { profiles: { status: true } } } }); const id = person?.profile?.docs?.[0]?.id; let profile = null;...

huge hydration mismatch, elements are being rendered in the wrong divs

Hey, On first render it seems elements are getting swapped from the header div to the body div, like 1 level down, also some divs get duplicated. ```html <template>...
No description

Any way to specify a key for UTabs instead of index for v-model?

As per title... Just for maintainability I think it would be better.

Drawer pushing page content

On Nuxt UI 3, is it possible the push the content of the page when opening an UDrawer

nuxt ui component to display avatar, username and dropdown

``` <div v-if="!authStore.loading && authStore.user" class="dropdown dropdown-end"> <div tabindex="0" role="button" class="btn m-1"...

Very Poor Lighthouse Performance

Hi, sorry in advance for the very long post. I have been debugging for the past 3 weeks and I have run out of ideas. I have very poor lighthouse performance results in my (rather large) app. To start with, this is the output of nuxi info: ```cmd...
No description

nuxt ui form apply error on specific field

so i have a nuxt ui form with a signupschema but my api checks for compromised passwords so i want to display a zod like error on the password field if my api returns this. what's the cleanest way to do this

Nuxt UI Pro Components Questions

so 1st q is what's the difference between UDashboardNavbar and UDashboardToolbar?

`useAsnycData` Bug?

Nuxt : 3.17.5 Environment : Bun.js I'm having an issue with useAsyncData in a single page file. I have a pagination feature where /article-list/1 and /article-list/2 both point to the article.vue file, which uses useAsyncData....

Autoimport components in module

I am writing a module that adds several components like Form, Question, Button etc. The module is configured to add auto-import components with addComponentsDir with a prefix (say My). So I can use MyForm and MyQuestion in the Nuxt app and it works fine! However I can't seem to understand how I can use autoimport in the module itself. So I want to import Question in Button but still keep the prefix variable through ModuleOptions and Question component overwriteable in the final app. How can I achieve this?...

eslint on file save

I just setup eslint properly "{ // Disable the default formatter, use eslint instead "prettier.enable": false, "editor.formatOnSave": false, ...

How to do markdown parsing and rendering in real time without performance drops for streaming text?

Well just as the titles says, I want to know the best way to parse and render streaming markdown in real time, without performance drops and without sacrificing good UI/UX. I know it is doable, because a lot of people are doing it, but I just didn't find a solid way to implement it in Nuxt or Vue. I tried @nuxtjs/mdc and it works fine, it delivers top notch UI/UX. However, I then noticed that in long prompts it hinders performance so much and eventually always results in an entire page freeze, which is not optimal at all... I really need help doing this and figuring it out. anything would be so much appreciated! I can provide code snippets immediately....

Visual Editing with Sanity Nuxt module

According to the documentation, a createSanityDataAttribute helper function is available to manually map the content in a component to its source code. But when I use this code locally, it creates a server error "createSanityDataAttribute" is not a function. Is this function not safe to use wihout checking first if we are in preview mode? When visual editing is enabled, this module exports a createSanityDataAttribute helper function which allows you to manually map content in a component to its source. It is globally available throughout your project (both within your server routes and your Vue app) via auto-imports. ...

A bunch of deployment only errors

I have my a branch on my repo that doesn't produce any errors in dev, but produces a few notable errors when building. Some of these errors include: ``` error: Cannot find package 'jose' from '/app/.output/server/node_modules/openid-client/lib/client.js' app-1 | cause: error: Cannot find package 'jose' from '/app/.output/server/node_modules/openid-client/lib/client.js', app-1 | statusCode: 500, app-1 | fatal: false,...

explain nuxt ui form + zod + drizzle how well do these work together to simplify form validation

Hi kappa can you provide a minimal example of nuxt ui form, zod, drizzle as I want to see how clean that would look if i were to migrate to it

Sharing types from Server to Client

In my nuxt project, I want to use drizzle-zod to generate types based on my database schema. Currently the schema file is in the server folder but the place I want to use the type is on the client ( in the app folder ). In order to properly do this would I need to move the drizzle schema to the shared folder or would I import the schema into a file in the shared folder, generate the type there and then export it?

Nesting multiple dynamic routes in Nuxt

I am currently in the process of scoping out a migration of our current Web Application to Nuxt 4, trying to figure out what works of the current design, and what might end up being a breaking change. I am currently looking at the routing, and would like confimation that my thinking is correct. Each section of the application follows the same general pattern, where we have a Search Page, followed by the search result, which might have serval pages. ...

Add public assets at build time

Hi, i'm creating a local module for my project, and I'm stuck on adding public assets with the nitro:config hook. I did this: ```ts nuxt.hook('nitro:config', (nitroConfig) => { nitroConfig.publicAssets ||= []...

vue export error during build

SyntaxError: The requested module 'node_modules/.pnpm/vue@3.5.17_typescript@5.8.3/node_modules/vue/index.mjs' does not provide an export named 'default'