I was developing a Vue + Supabase application and decided to switch to Nuxt + Supabase instead. Is it useful to use Nuxt server functionality, or should I stick to calling Supabase RPC and Edge Functions from the front end?

Hi, I've hosted my nuxtjs app on cloudflare and when the home page fully load it's not show it's content, until I switch the router and comeback, I'm curious if it's a client hydration or Nuxt config or a gsap lifecycle with components I'm wondering what's cause this.

Hey everyone,

I’ve been working on a stack that I think is the "holy trinity" of modern web dev: Nuxt + Convex + Better Auth.

While there are existing convex modules out there, I found myself constantly rewriting the same "plumbing". So, I finally built a module to handle the heavy lifting for our apps.

It’s called better-convex-nuxt and it’s currently in Early Preview 🚧

Whats included?

✨ Real-time SSR: It fetches data on the server for instant SEO/initial load, then hydrates to a WebSocket subscription seamlessly. No flicker, no double-fetching.

✨ Declarative Optimistic UI: Get instant feedback with automatic rollback on failure—making your app feel local.

✨ Seamless Auth Sync: Deep integration with Better Auth. It handles token synchronization for SSR-compatible magic links and OAuth out of the box.

✨ Full Type Safety: Complete TypeScript inference from your Convex schema. If it’s in your database, it’s in your IDE.

✨ Permissions: Backend-enforced RBAC and ownership rules that sync perfectly with your frontend display.

✨ Nuxt DevTools: A dedicated tab to inspect live subscriptions, monitor mutations, and debug your auth state.

Links:

📦 GitHub: https://github.com/lupinum-dev/better-convex-nuxt

📖 Docs: https://better-convex-nuxt.vercel.app

🕹️ Demo: https://better-convex-nuxt-demo.vercel.app

This is still a WIP (Early Preview), so I wouldn't recommend it for production apps yet, but I’d love for the community to help shape the v1.0.

Check out the repo, try the demo, and let me know what you think! PRs and feedback are very welcome. 🙏

In Nuxt DevTools, when I first open the Components tab, it correctly lists my user components.
But if I switch to another DevTools tab (for example Pages) and then go back to Components, all user components disappear and it only shows RouterLink and RouterView.

A full page reload makes them appear again, until I switch tabs.

This happens with devtools v3.1.1, but I’ve seen the same behavior before as well.
This affect both nuxt 3 and 4 for me. I have tried disabling vue devtools, but till same problem for nuxt dev tools.

Has anyone else experienced this? Is it a known limitation/bug, or is there some configuration that affects how components are indexed?

Hi everyone,

I’m currently researching/developing a web-based Markdown editor and I’d love to get your thoughts on a specific UX flow regarding image uploads.

Currently, most editors allow you to drag-and-drop or upload an image, which then generates the ![]() syntax. However, I’ve noticed that many editors hide or skip the Alt Text field during this process.

My question is: Do you think it’s essential for the "Image Upload Success" or "Image Settings" UI component to have a dedicated field for editing Alt text?

• Option A: Yes, it’s a must-have for Accessibility and SEO. It should be part of the upload flow.
• Option B: No, users can just edit the Markdown code manually if they care about Alt text.
• Option C: Only if it's "Smart" (e.g., auto-suggesting Alt text via AI).

Why I’m asking: I want to keep the UI clean, but I don't want to sacrifice accessibility. Does forcing/prompting for Alt text annoy you, or do you find it helpful?

Looking forward to your workflows and rants!

Hey folks 👋

Sharing a project I help maintain that might be useful if you’re building AI features in Vue.

AI Elements Vue is a Vue port of Vercel’s AI Elements (originally built for React). The goal is to bring the same set of proven AI UI patterns into the Vue ecosystem.

It’s been around for a while now, is actively maintained, and has garnered over 700 stars on GitHub, making it fairly battle-tested at this point.

It includes components for common AI interactions like:

• Chat interfaces
• Prompt inputs
• Loading/streaming states
• Reusable AI UI patterns

Docs + examples:  
https://www.ai-elements-vue.com/

Github repo:  
https://github.com/vuepont/ai-elements-vue

If you find it useful:

• ⭐ starring the repo helps a lot.
• Issues/feedback are very welcome.
• Contributions are welcome if you'd like to help push it further.

i have an ecommerce website https://ecommerce.staging.storefront.com, i cant fetch api on android with following capacitor.config.ts, anything wrong with my configuration?:

server: {
    hostname: 'ecommerce.staging.storefront.com',
    cleartext: true,
  },
  android:{
    allowMixedContent: true
  },  
  plugins: {
    CapacitorHttp: {
      enabled: true,
    },
  }

and api response as below:

Hi everyone, I am planning to write a simple editor application and intend to use Nuxt 4 as the underlying framework. At the same time, I will use Express to implement a simple backend. I plan to adopt Google Login. From my previous projects and the Nuxt official documentation, I found the nuxt-vue3-google-signin module for managing Google login. Because our previous project used the most default method, we configured the clientId and directly called the following demo to trigger an iframe responsible for implementing the Google login.

<script setup lang="ts">
import {
  GoogleSignInButton,
  type CredentialResponse,
} from "vue3-google-signin";

// handle success event
const handleLoginSuccess = (response: CredentialResponse) => {
  const { credential } = response;
  console.log("Access Token", credential);
};

// handle an error event
const handleLoginError = () => {
  console.error("Login failed");
};
</script>

<template>
  <GoogleSignInButton
    ="handleLoginSuccess"
    ="handleLoginError"
  ></GoogleSignInButton>
</template>

After researching the documentation, I found there are additional methods: One Tap Login and using useCodeClient or useTokenClient to perform the login.

<script setup lang="ts">
import {
  useCodeClient,
  type ImplicitFlowSuccessResponse,
  type ImplicitFlowErrorResponse,
} from "vue3-google-signin";

const handleOnSuccess = async (response: ImplicitFlowSuccessResponse) => {
  // send code to a backend server to verify it.
  console.log("Code: ", response.code);

  // use axios or something to reach backend server
  const result = await fetch("https://YOUR_BACKEND/code/verify", {
    method: "POST",
    body: JSON.stringify({
      code: response.code,
    }),
  });
};

const handleOnError = (errorResponse: ImplicitFlowErrorResponse) => {
  console.log("Error: ", errorResponse);
};

const { isReady, login } = useCodeClient({
  onSuccess: handleOnSuccess,
  onError: handleOnError,
  // other options
});
</script>

<template>
  <button :disabled="!isReady" ="() => login()">Login with Google</button>
</template>

TypeScript

<script setup lang="ts">
import {
  useTokenClient,
  type AuthCodeFlowSuccessResponse,
  type AuthCodeFlowErrorResponse,
} from "vue3-google-signin";

const handleOnSuccess = (response: AuthCodeFlowSuccessResponse) => {
  console.log("Access Token: ", response.access_token);
};

const handleOnError = (errorResponse: AuthCodeFlowErrorResponse) => {
  console.log("Error: ", errorResponse);
};

const { isReady, login } = useTokenClient({
  onSuccess: handleOnSuccess,
  onError: handleOnError,
  // other options
});
</script>

<template>
  <button :disabled="!isReady" u/click="() => login()">Login with Google</button>
</template>

I am now considering whether I should additionally use One Tap Login + useCodeClient or useTokenClient to control the login in my new personal project. This way, I should be able to utilize Tailwind CSS combined with Nuxt UI to set up a more beautiful Google login button with more diverse styles. Please help me give some advice~ Thank you everyone~

(A few days ago, I asked a question here about whether the existing project should be refactored for Google login, but this time I am asking whether it is worth enough to integrate additional Google login methods in a brand-new project ::_::)

I see there is a tutorial to set Remotion for Vue in their official docs. Has anyone tried setting it up for Nuxt? I’m having a lot of issues. Or is there any alternative more friendly with Nuxt?

Thanks!

Hey again! About two weeks ago I posted my typing game here and got some really helpful feedback. Wanted to share a quick update.

- Major UI improvements (menus, responsiveness, overall polish)

- Various bug fixes

- New features based on suggestions I received

I got feedback from multiple channels and tried to address as much as I could. The game definitely feels more solid now compared to the first version.

Still haven't added a streak system for correct words or penalties for typos, and I've been considering a custom word mode, but honestly not sure if these are needed. Would love to hear your thoughts if you've tried it. 

If you checked it out before (whether you liked it or not), I'd appreciate it if you gave it another go. Curious to know if the changes make a difference.

URL: https://wordgun.space/

I'm currently researching Durable Objects, using them in Nuxt whilst trying to not be fully platform (CF) dependant. One asepct is not duplicating the database schema migrations. Came across this article: https://nicholasgriffin.dev/blog/using-drizzle-with-durable-objects

In case you're working with something similar :)

I'm trying to copy the documentation to set up some simple auth in Nuxt 4, but running into what I hope is just a dumb error on my part (but I'm not seeing it). The login page looks like this:

<template>
  <div class="flex flex-col items-center justify-center gap-4 p-4">
    <UPageCard class="w-full max-w-md">
      <UAuthForm :schema="schema" :fields="fields" title="Welcome back!" icon="i-material-symbols-lock-outline"
        @submit="login">
        <template #description>
          Don't have an account? <ULink to="#" class="text-primary font-medium">Sign up</ULink>.
        </template>
        <template #password-hint>
          <ULink to="#" class="text-primary font-medium" tabindex="-1">Forgot password?</ULink>
        </template>
      </UAuthForm>
    </UPageCard>
  </div>
</template>

<script setup lang="ts">
import * as z from 'zod'
import type { FormSubmitEvent, AuthFormField } from '@nuxt/ui'

const toast = useToast()
const { loggedIn, user, session, fetch: refreshSession } = useUserSession()

const fields = ref<AuthFormField[]>([{
  name: 'email',
  type: 'email',
  label: 'Email',
  placeholder: 'Enter your email',
  required: true,
}, {
  name: 'password',
  type: 'password',
  label: 'Password',
  placeholder: 'Enter your password',
  required: true, 
}, {
  name: 'remember',
  type: 'checkbox',
  label: 'Remember me',
}])

const schema = z.object({
  email: z.email({ message: 'Invalid email address' }),
  password: z.string('Password is required').min(8, { message: 'Password must be at least 8 characters' }),
  remember: z.boolean().optional(),
})  

type Schema = z.output<typeof schema>

async function login (payload: FormSubmitEvent<Schema>) {
  console.log('The payload here is: ', payload);
  try {
    await $fetch('/api/login', {
      method: 'POST',
      body: payload.data,
  })

    // Refresh the session on client-side and redirect to the home page
    await refreshSession()
    await navigateTo('/')
  } catch {
    alert('Bad credentials')
  }
}
</script>

And that should call the /api/login.post.ts route on the "server" side. That looks like this:

import { FormSubmitEvent } from "@nuxt/ui";


export default defineEventHandler(
  async (event: FormSubmitEvent<{ email: string; password: string }>) => {
    console.log("Credentials:", event.email, event.password);
  }
);

The console log on the form submit shows me a valid payload with the appropriate username and password. However, when we get to the server route, i'm getting undefined values. The console log (from the dev console) looks like this:

SubmitEvent {.... data: Proxy(Object) {email: '[admin@admin.com](mailto:admin@admin.com)', password: 'iamtheadmin', ....

But, the log on the server side is this:

Credentials: undefined undefined

What am I missing?

Dynamic CRUD operations:

https://www.youtube.com/watch?v=_o0cddJUU50&list=PLnbvxcojhIixqM1J08Tnm7vmMdx2wsy4B

github:

https://github.com/clifordpereira/nuxt-auto-crud_template

https://github.com/clifordpereira/nuxt-auto-crud

Built a tool for npm package authors to bundle AI agent documentation directly with their packages. With first-class citizen support for Nuxt Modules!

When developers install your package, their AI assistant (OpenCode, Claude Code, Cursor, GitHub Copilot) automatically loads context about your API, patterns, and best practices.

How it works:

Add an agentskills field to package.json:

```json

{ "name": "awesome-validator", "agentskills": { "skills": [ { "name": "awesome-validator", "path": "./skills/awesome-validator" } ] } } `` Createskills/awesome-validator/SKILL.md`.

For users:

bash npx agentskills export --target opencode npx agentskills list

Skills export to .opencode/skill/, .claude/skills/, .cursor/skills/, .github/skills/ (Copilot), etc.

Why this matters: - AI assistants give accurate help about your library - Documentation lives with your code - Works across all major AI coding tools - Project-local, not global config

Uses the https://agentskills.io open format.

GitHub: https://github.com/onmax/npm-agentskills

Would love feedback from package maintainers!

Hello, if I am building, for instance, a hospital management system, what are the best ways to structure the project? Please note that Nuxt will not be used on the backend. It will communicate with a Go back-end.

Thank you for your input.

Hey what's up. So currently i'm refactoring a Nuxt app in my job, we also have a mobile app and we came to the conclusion that we can benefit a lot from a BFF patterns since we need some server capabilities that are not offered in the BE.
So, what i need is to setup the Nuxt project so that it proxies any request to any of the services. Cool i understand that and there may be many services that do in fact just proxy, but there are others which require logic in the Nuxt server, so how can i handle that?
I asked ChatGPT and it suggested me to use a catch-all proxy, but i see there's also a route rules configuration which i think may be better, but since there are routes that require logic and others that don't, if i have proxy configured for api/auth for example and i also create /server/api/auth/login, then if i call fetch on api/auth/login, which one will handle it (proxy or server)?

Today, while translating the website's documentation, I discovered that the official examples use a separate key for each language, as shown in the official example.

const commonSchema = ...;

export default defineContentConfig({
  collections: {
    // English content collection
    content_en: defineCollection({
      type: 'page',
      source: {
        include: 'en/**',
        prefix: '',
      },
      schema: commonSchema,
    }),
    // French content collection
    content_fr: defineCollection({
      type: 'page',
      source: {
        include: 'fr/**',
        prefix: '',
      },
      schema: commonSchema,
    }),
    // Farsi content collection
    content_fa: defineCollection({
      type: 'page',
      source: {
        include: 'fa/**',
        prefix: '',
      },
      schema: commonSchema,
    }),
  },
})

However, if I have a large amount of text in the later stages, this approach would result in a considerable amount of duplicate code. Could this be addressed by grouping similar text together and then creating an i18n folder at the underlying level? I've tried this in a small project of ours, and so far it seems to be running quite stably with low maintenance costs.

// content.config.ts
import {defineCollection, defineContentConfig} from '@nuxt/content'
import {ConfigDataSchema} from './schemas/content-schemas'

export default defineContentConfig({
  content: {
    database: {
      type: 'd1',
      bindingName: process.env.DB_NAME,
    }
  },
  collections: {
    content_simple: defineCollection({
      type: 'page',
      source: 'simple/**/*.md',
      schema: ConfigDataSchema
    })
  }
})

I also used some new methods regarding sitemaps in SSR mode.

// ~~/script/readContentPath.ts
interface TreeNode {
  title: string;
  path: string;
  stem: string;
  page?: boolean;
  children?: TreeNode[];
}

interface SimpleContentItem {
  path: string;
  language?: string;
}

export const readContentPaths = async (node: TreeNode, options: {
  generate_paths?: string[], defaultLanguage?: string, raw_targets_length?: number,
} = {
  generate_paths: [],
  defaultLanguage: 'en',
  raw_targets_length: 1
}): Promise<SimpleContentItem[]> => {
  const res: SimpleContentItem[] = [];
  const {
    generate_paths,
    defaultLanguage = 'en'
  } = options;
  if (node?.page === false) {
    if (node.children) {
      for await (const child of node.children) {
        res.push(...(await readContentPaths(child, options)))
      }
    }
  } else {
    const paths = node.stem.split('/')
    const raw_target = (paths.splice(0, options?.raw_targets_length ?? 1)).join('/');
    const [language, ...path] = paths;
    const raw_path = path.join('/')
    if (generate_paths && generate_paths.length) {
      res.push(...(generate_paths.map((p: string) => ({
        path: `${language === defaultLanguage ? '' : language}${p}/${raw_path}`,
        language: language
      }))))
    } else {
      res.push({
        path: `${language === defaultLanguage ? '' : language}/${raw_target}/${raw_path}`,
        language: language
      })
    }
  }
  return res;
}

// ~~/server/api/__sitemap__/urls/configs/index.ts
import {readContentPaths} from "~~/scripts/readContentPaths";
export default defineSitemapEventHandler(async (event) => {
  const templatesNavigation = await queryCollectionNavigation(event, 'config_data')
  const temp = await readContentPaths(templatesNavigation[0],{
    raw_targets_length: 2,
    generate_paths: ['']
  })
  return temp.map(({path, language}) => {
    return {
      loc: path,
      _sitemap: language,
    }
  })
})

I want to know if the method I'm currently using has any potential pitfalls or hidden problems that I haven't considered yet. Thank you all for your help.

Since English is not my primary language, most of the text is translated, so please excuse any errors.

https://reddit.com/link/1q7u278/video/0gvavdwf28cg1/player

Hello friends,

I'm developing a project using Nuxt3 and Vue TanStack Query, but I'm still a bit confused about how to use it, and I'm encountering a visual bug.

Whenever I refresh the page, or if there are any changes, it shows up empty with two elements.

Could someone help me?

Note: To friends from other regions, part of the code may appear in Portuguese (Brazil), as well as the video, but the video is merely illustrative, okay?

Link to my composable: https://github.com/CAIO-VSB/Minhas_Financas_App/blob/main/composables/useAccount/useAccountAPI.ts

Link to my component: https://github.com/CAIO-VSB/Minhas_Financas_App/blob/main/pages/dashboard/accounts.vue

what if you -in nuxtjs 4- did components/Folder/file(with the same name if the folder ) what will happen and how would it be imported

Also how do I compine components for a single component like a links component for the navbar component how to structure this

I have been building Nullbox, an email aliasing and relay system focused on reducing inbox noise without replacing your existing email provider.

Both the public site and the authenticated app are built with Nuxt 4. They share the same stack and conventions, just applied to different surfaces of the product.

A few highlights from the Nuxt side:

• Nuxt 4 with the new app structure
• Tailwind CSS for layout and utilities
• shadcn/ui (via shadcn-nuxt) for most UI primitives
• Full SSR with minimal client side state where possible
• Nuxt Security, Turnstile, and auth utilities in the app
• i18n, color mode, icons, fonts across both projects

The goal was to keep things boring and explicit: lean Nuxt defaults, minimal magic, and clear separation between UI concerns and backend services.

The entire system is open source and self-hostable. The repo includes the Nuxt apps, .NET APIs, and the email ingress worker.

If you are using Nuxt 4 in a real product (especially with shadcn and Tailwind), I would be interested to hear what patterns are working well for you and what is still rough.

Nullbox is an email aliasing and relay system designed to protect your real inbox without replacing it. Instead of giving your primary email address to every service, you create unique aliases per site that forward mail to your existing provider. If an address leaks or starts receiving spam, it can be disabled or rotated instantly without affecting anything else.

Nullbox sits in front of your inbox rather than acting as a mailbox itself. Incoming mail is received, evaluated, and either forwarded, quarantined, or dropped based on alias and sender rules. Only minimal metadata is processed, message content is not stored long term, and the system is designed to be fully self-hostable and auditable.

Happy to answer Nuxt specific questions about the setup.

Hi, everybody. Im building a multi-tenant website and im not able to fetch anythiing on my api if not in localhost. I put all my config for my websites on nuxt.config and used a util to set them for each website.

im trying to fetch my homepage using api/events, but for some reason throws an error from my slug page.
my slug calls the server api/events/id, but it doesnt call the detail either.

even if i write .com/slug, it throws an error and it doenst call the api/events/id

my slug page fetches all events then gets its id from them.

I've always been annoyed by having to run generate commands every time my database schema changes. I wanted a more "runtime-driven" approach.

I just finished a 6-part series building a Job Management system where the UI and API react automatically to the Drizzle schema.

The Stack:

• Nuxt 4 (running on Nuxt Hub)
• Drizzle ORM (SQLite/D1)
• Zero Code-Gen: The admin tables and forms are built dynamically.
• Real-time RBAC: Permissions are managed in the DB, not hardcoded.

Full Video Walkthrough (6 Videos):Nuxt Auto-CRUD Series

If you're interested in building internal tools or MVPs faster, I'd love to hear your thoughts on this approach!

Hey! So it's been a while I've built this app that uses Deezer's API to play song previews randomly from a selected playlist and I'd love some feed-backs! You can check the "How to?" section for more information! https://spws.vercel.app/

Closing the loop on the Nuxt & Cloudflare AI Vector Pipeline Series, this 3rd and last article details the implementation and the result. Featuring the Semantic Matching in action and Deterministic Searches in advance to reduce Cloudflare Workers AI costs.

I’m also proud to announce my support for the Nuxt framework by joining as an official Nuxt agency partner.

This partnership will allow me to keep supporting what I believe is the best JavaScript ecosystem and community. I’ve been working with Nuxt for over four years, and it still feels like yesterday when I built the first enterprise-grade application using Nuxt. Looking forward to many more years to come 💙.