lorenzofiamingo Posts - Answer Overflow

lorenzofiamingo

•Created by lorenzofiamingo on 4/17/2025 in #❓・help

Nuxt Content is slow

I’m using Nuxt Content as a CMS for some of my pages, but I’m experiencing noticeable delays during page loading. I’m not sure what’s causing it. I also tried integrating NuxtHub with the following configuration in nuxt.config.ts

content: {
  preview: {
    api: 'https://api.nuxt.studio',
  },
  database: {
    type: 'd1',
    bindingName: 'DB',
  },
}

content: {
  preview: {
    api: 'https://api.nuxt.studio',
  },
  database: {
    type: 'd1',
    bindingName: 'DB',
  },
}

However, this call remains consistently slow:

const { data: page } = await useAsyncData('index', () => {
  return queryCollection('content').path('/').first()
})

const { data: page } = await useAsyncData('index', () => {
  return queryCollection('content').path('/').first()
})

It’s really strange because other pages where I make calls to hubDB in the setup function load instantly. Is there anything I can do to improve performance when using Nuxt Content with D1 and NuxtHub? I came across this GitHub issue, but it doesn’t seem to be resolved yet. Would my only real alternative be to stop using Nuxt Content altogether, or are there workarounds or best practices to speed it up?

12 replies

NNuxt

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

Focus Nuxt UI UInput

I would like to know how to focus UInput (Nuxt UI v3). I tried this 2 methods but aren't working: Method 1

const nameInput = useTemplateRef('nameInput')
const input = nameInput.value?.$el.querySelector('input') // return the correct input
input.focus() // doesn't work

const nameInput = useTemplateRef('nameInput')
const input = nameInput.value?.$el.querySelector('input') // return the correct input
input.focus() // doesn't work

Method 2

const nameInput = useTemplateRef('nameInput')
const input = nameInput.value?.$refs.input as any // return undefined
input.focus() // doesn't work (since it's undefined)

const nameInput = useTemplateRef('nameInput')
const input = nameInput.value?.$refs.input as any // return undefined
input.focus() // doesn't work (since it's undefined)

Method 2 was suggested by the creator of NuxtUI, so probably it's just outdated for v3: https://github.com/nuxt/ui/issues/318

4 replies

NNuxt

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

Auth flow secret encryption

I'm implementing a simple password authentication registration, using nuxt-auth-utils and nuxt-hub. I’d like to enforce email verification before completing the actual registration. Here are the steps on the client side: - 1 The user enters their email and requests an OTP. - 2 The user enters the OTP and verifies it. - 3 The user enters a display name. - 4 The user enters a password and registers. To prevent users from tampering with the request and changing the email to another one, I thought it would be a good idea to verify on the server that the email used in step 4 matches the one verified in step 2. Since I’m new to this, I found that a good solution is to generate a UUID token in step 2, bind it to the email (using Cloudflare KV), and verify it in step 4. Does this sound like a good approach? Do you think there’s a better alternative? Anyway, to send this token with the request in step 4, I initially considered setting it as an HTTP-only cookie in step 2:

setCookie(event, 'otpToken', btoa(token), {
  httpOnly: true, secure: true, sameSite: 'strict', path: '/auth', maxAge: 60 * 5 
})

setCookie(event, 'otpToken', btoa(token), {
  httpOnly: true, secure: true, sameSite: 'strict', path: '/auth', maxAge: 60 * 5 
})

However, I later found out that I can store secrets using nuxt-auth-utils:

setUserSession(event, {
  secure: {
    otpToken: token
  }
})

setUserSession(event, {
  secure: {
    otpToken: token
  }
})

Which is the better approach? setUserSession encrypts the session, but its max age might be too high. Since I’m struggling with this, I want to ensure this is the best way to achieve the desired functionality and that I’m not introducing any security pitfalls into my flow. Thank you very much!

4 replies

Gaming

Programming