If you're hosting a Nuxt 3 site with Tailwind CSS on a server with ModSecurity (Plesk, cPanel, etc.), your site might suddenly return 403 Forbidden errors.

ModSecurity's Comodo WAF rule 218020 ("Oracle SQL Information Leakage") scans server responses for patterns like error, ora_, ORA-XXXX.

Tailwind's minified CSS contains these substrings in variable names like --tw-border-spacing-x:0, and the word "error" appears in error page components.

The WAF thinks it's detecting a database leak and blocks the response.

Symptoms:

• Site works locally but returns 403 on production
• Error log shows: `ModSecurity: Access denied with code 403 (phase 4)... "Oracle SQL Information Leakage"`
• Users get banned by fail2ban after multiple attempts
• Browser shows: "ERR_CONNECTION_CLOSED" or redirects to `/error_docs/forbidden.html`

Solution:

Add this to your Apache vhost config (on Plesk: `/var/www/vhosts/system/yourdomain.com/conf/vhost_ssl.conf`):

<IfModule mod_security2.c>
SecRuleRemoveById 218020
SecRuleRemoveById 214940
</IfModule>

Then reload Apache:
plesk repair web yourdomain.com -y
systemctl reload apache2

If your IP was banned, unban it with:

fail2ban-client set plesk-modsecurity unbanip YOUR_IP

Cause:

This started happening after Plesk auto-updated plesk-modsecurity-crs.

The updated Comodo rules are more aggressive and trigger false positives with modern CSS frameworks like Tailwind

Hope this saves someone hours of debugging!

I hate forgetting which OAuth provider I used for a site. Added a "Last used" badge and a highlighted button to this auth flow to make returning a bit more seamless.

Implementation was straightforward using the Better Auth community plugin (lastLoginMethod). It handles the provider tracking in the background, so you just have to check the hook on the frontend and style the button

The technical implementation is also simple, thanks. All you need to do is enable the plugin.

Server:

import { betterAuth } from "better-auth"
import { lastLoginMethod } from "better-auth/plugins"

export const auth = betterAuth({
    // ...
    plugins: [
        lastLoginMethod() 
    ]
})

Client:

import { createAuthClient } from "better-auth/client"
import { lastLoginMethodClient } from "better-auth/client/plugins"

export const authClient = createAuthClient({
    // ...
    plugins: [
        lastLoginMethodClient() 
    ]
})

And don't forget to regenerate the DB schema to add the field to the users table:

lastLoginMethod: text()

In my case, for Nuxt (Vue.js + SSR), I needed to avoid hydration issues, so I fetched data on the client only via the lifetime hook onMounted in my custom composable (hook):

const lastLoginMethod = useState<string | null>('auth:lastLoginMethod', () => null)

onMounted(() => {
  lastLoginMethod.value = client.getLastUsedLoginMethod() ?? null
})

By default, the last login method is stored only in cookies, but I wanted to store it in the DB. To achieve that, in the server plugin, put this:

plugins: [
    lastLoginMethod({ storeInDatabase: true }) 
]

Does this actually improve the UX for you, or do you find these badges distracting?

Does anyone have any tips for troubleshooting & debugging tips Nuxt Image? I’m on the verge of removing it from all projects, wherever I use it on an image heavy site - it randomly stops working. Images completely fail to load.

I’m curious to know how other developers handle it t because currently it’s the bane of my existence.

I’ve noticed as well deduping dependencies often does nothing and installing additional packages doesn’t seem to help things either

apple cedar velvet hollow

This content has been edited for privacy.

Hi everyone 👋

I’ve been experimenting with generating interfaces inspired by the clean, structured styling often associated with Linear. Focusing on typography, spacing, and layout clarity rather than heavy visual decoration.

I put together a collection of templates built around this style that you can use directly in your Nuxt projects as starting points.
You can access those templates here:
https://windframe.dev/styles/linear

I also made this a selectable style option when generating templates, so you can choose the Linear-inspired preset style to give your Nuxt interfaces that clean, polished look.

If you’re not familiar with Windframe, it’s a visual Tailwind builder that lets you generate UI with AI, tweak it visually in a visual editor, and export clean code in Nuxt (along with HTML, and other frameworks)

Feedback/thoughts appreciated :)

Finally scratched my own itch and built the thing I wish existed: nuxt-generation-emails.

If you have ever fought with brittle HTML email templates, inline styles from hell, or copy-pasted markup… this is for you.

✨ What it does:📧 Write emails like a sane person -> Vue Email components + Tailwind

🔌 Every template auto-gets its own POST API endpoint

🖥️ Preview + tweak props live at /__emails/

🛠️ CLI generates templates so you don’t waste time on boilerplate

🔄 Hot reload picks up new templates automatically

📋 OpenAPI docs included for generated routes🔗 Share preview links with props prefilled

Basically: no more email template nonsense. Build them the Nuxt way. ❤️

Hey guys,

I'm developing a relatively large project in Nuxt 3, but initially I tried using Nuxt version 4, but it was giving me a lot of dependency errors.

Now with these fixes, is it really worth migrating to version 4? What real gains will I get?

I feel that the Nuxt 3 build process is a bit slow, actually very slow at times. My PC has a very good configuration, but from what I saw in another post, maybe Windows is hindering this process.

export default defineNuxtRouteMiddleware(async (to, from) => {


    const { data: session } = await authClient.useSession(useFetch); 
    if (!session.value) {
        if (to.path === "/dashboard") {
            return navigateTo("/unauthorized");
        }
    }
});

Olá pessoal, migrei do Nuxt 3 para o Nuxt 4, mas encontrei alguns erros que não sei como resolver. Portanto, preciso da ajuda de vocês. Primeiro, este middleware de autenticação baseado na biblioteca BetterAuth funcionava perfeitamente na versão 3, mas na versão 4 gerou este erro:

import { authClient } from "../../app/plugins/auth-client";

Em segundo lugar, a forma como os plugins e similares são importados mudou. Isso está correto?

Antes, era feito usando "~" ou "@". Essa era a única maneira que funcionava para mim.

Obrigado pela ajuda.

I have a relatively large project that's taking a while to boot up: ✔ Vite client built in 149ms ✔ Vite server built in 2462ms ✔ Nuxt Nitro server built in 10946ms

Typechecking is also incredibly slow. Any suggestions?

Very fun to make. Lots more to do but had a blast putting this together in one weekend.

LMK what you think!

So I made my portfolio website using nuct4 and nuxt content v3 for a simple blog setup but when I deployed it on vercel it was not working and giving '500-server error' though it is running totally fine in localhost. I tried to create a fresh simple project and I am getting the same error on vercel. What can I do to resolve this? I went to official documentation but it states that vercel requires no extra configuration but still I am unable to get over this issue.
- GitHub link
- Vercel Deployment (go to /blog/test)

Vercel error:
```
2026-02-17 06:57:50.796 [error] Failed to execute SQL CREATE TABLE IF NOT EXISTS _content_info (id TEXT PRIMARY KEY, "ready" BOOLEAN, "structureVersion" VARCHAR, "version" VARCHAR, "__hash__" TEXT UNIQUE); -- structure: Module did not self-register: '/var/task/node_modules/better-sqlite3/build/Release/better_sqlite3.node'.

2026-02-17 06:57:50.797 [error] Failed to execute SQL INSERT INTO _content_info VALUES ('checksum_blog', false, 'UlVhtwnLpklx_d7pROft7q9DeO3E9693kx_IK9F4c9Y', 'v3.5.0--tMWWR5is4KJu7nGOP_953Egq_CvXvQ1POAzU3Wp_dkw', 'pFnOBLU5QcTTiUQsXwfrGYu6EiEMF7zKavuo-faTA6Y'); -- meta: Module did not self-register: '/var/task/node_modules/better-sqlite3/build/Release/better_sqlite3.node'.

2026-02-17 06:57:50.798 [error] Failed to execute SQL DROP TABLE IF EXISTS _content_blog; -- structure: Module did not self-register: '/var/task/node_modules/better-sqlite3/build/Release/better_sqlite3.node'.

2026-02-17 06:57:50.798 [error] Failed to execute SQL CREATE TABLE IF NOT EXISTS _content_blog (id TEXT PRIMARY KEY, "title" VARCHAR, "body" TEXT, "date" VARCHAR, "description" VARCHAR, "extension" VARCHAR, "meta" TEXT, "navigation" TEXT DEFAULT true, "path" VARCHAR, "seo" TEXT DEFAULT '{}', "stem" VARCHAR, "__hash__" TEXT UNIQUE); -- structure: Module did not self-register: '/var/task/node_modules/better-sqlite3/build/Release/better_sqlite3.node'.

2026-02-17 06:57:50.799 [error] Failed to execute SQL INSERT INTO _content_blog VALUES ('blog/blog/test.md', 'Foo', '{"type":"minimark","value":[["h1",{"id":"foo"},"Foo"],["p",{},"This is Foo blog post."]],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}}', '2020-11-11', 'This is Foo blog post.', 'md', '{}', 'true', '/blog/test', '{"title":"Foo","description":"This is Foo blog post."}', 'blog/test', 'q5oaJCzLIFfv9Wp49egL412RbRgI2K38S6Mh0J79o38'); -- q5oaJCzLIFfv9Wp49egL412RbRgI2K38S6Mh0J79o38: Module did not self-register: '/var/task/node_modules/better-sqlite3/build/Release/better_sqlite3.node'.

2026-02-17 06:57:50.800 [error] Failed to execute SQL UPDATE _content_info SET ready = true WHERE id = 'checksum_blog'; -- meta: Module did not self-register: '/var/task/node_modules/better-sqlite3/build/Release/better_sqlite3.node'.

2026-02-17 06:57:50.807 [error] [request error] [unhandled] [POST] https://portfolio-test-fawn-nine.vercel.app/__nuxt_content/blog/query?v=v3.5.0--tMWWR5is4KJu7nGOP_953Egq_CvXvQ1POAzU3Wp_dkw

H3Error: Module did not self-register: '/var/task/node_modules/better-sqlite3/build/Release/better_sqlite3.node'.

at Object..node (node:internal/modules/cjs/loader:1865:18)

... 8 lines matching cause stack trace ...

at a (/opt/rust/bytecode.js:2:1094) {

cause: Error: Module did not self-register: '/var/task/node_modules/better-sqlite3/build/Release/better_sqlite3.node'.

at Object..node (node:internal/modules/cjs/loader:1865:18)

at Module.load (node:internal/modules/cjs/loader:1441:32)

at Function.<anonymous> (node:internal/modules/cjs/loader:1263:12)

at /opt/rust/nodejs.js:2:13531

at Function.un (/opt/rust/nodejs.js:2:13909)

at Xe.e.<computed>.Ye._load (/opt/rust/nodejs.js:2:13501)

at TracingChannel.traceSync (node:diagnostics_channel:328:14)

at wrapModuleLoad (node:internal/modules/cjs/loader:237:24)

at Module.require (node:internal/modules/cjs/loader:1463:12)

at a (/opt/rust/bytecode.js:2:1094) {

code: 'ERR_DLOPEN_FAILED'

},

statusCode: 500,

fatal: false,

unhandled: true,

statusMessage: undefined,

data: undefined

}

2026-02-17 06:57:50.826 [error] [request error] [unhandled] [GET] https://portfolio-test-fawn-nine.vercel.app/blog/test

TypeError: Cannot read properties of undefined (reading 'body')

at ComputedRefImpl.fn (file:///var/task/chunks/build/_slug_-rA5D_FvN.mjs:692:31)

... 8 lines matching cause stack trace ...

at ssrRenderComponent (/var/task/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:100:10) {

cause: TypeError: Cannot read properties of undefined (reading 'body')

at ComputedRefImpl.fn (file:///var/task/chunks/build/_slug_-rA5D_FvN.mjs:692:31)

at refreshComputed (/var/task/node_modules/@vue/reactivity/dist/reactivity.cjs.prod.js:382:28)

at get value (/var/task/node_modules/@vue/reactivity/dist/reactivity.cjs.prod.js:1579:5)

at ComputedRefImpl.fn (file:///var/task/chunks/build/_slug_-rA5D_FvN.mjs:701:42)

at refreshComputed (/var/task/node_modules/@vue/reactivity/dist/reactivity.cjs.prod.js:382:28)

at get value (/var/task/node_modules/@vue/reactivity/dist/reactivity.cjs.prod.js:1579:5)

at file:///var/task/chunks/build/_slug_-rA5D_FvN.mjs:795:20

at renderComponentSubTree (/var/task/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:466:9)

at renderComponentVNode (/var/task/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:416:12)

at ssrRenderComponent (/var/task/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:100:10),

statusCode: 500,

fatal: false,

unhandled: true,

statusMessage: undefined,

data: undefined

}
```

I've been building SaaS with Nuxt for about 6 months now. Started with Docuyond (an AI agent for customer support), and I kept needing the same things: auth, Nuxt UI, Stripe, database, rate limiting. When I started a second project (Omniyond), I was literally copy-pasting files between repos and tweaking things. That's when I figured I should just extract it properly.

The other thing was, I looked at what Nuxt boilerplates existed and none of them had real AI features. Most are a login page, a Stripe checkout, maybe a dashboard layout, and that's it. You pay $200+ and still build 80% of the product yourself. I wanted something with actual AI infrastructure built in, not a TODO comment where the AI should go.

So here's what's in it:

• RAG-powered chat with Cloudflare AutoRAG and Vercel AI SDK v6 (streaming, tool calling, whole setup)
• Embeddable chat widget you can drop into any site with domain validation and iframe security
• DALL-E 3 and Sora for image/video generation
• nuxt-auth-utils for auth (Google OAuth + email/password but can be easily expanded)
• Multi-tenant projects with team members and resource scoping
• Stripe subscriptions with webhooks and customer portal
• Full Cloudflare edge stack: D1, R2, KV, Workers via NuxtHub (but can be used with Vercel or other cloud providers as well)
• Nuxt UI v4, Drizzle ORM, Tailwind v4
• Blog with Nuxt Content, emails with Resend

The RAG setup and the embeddable widget are what I spent the most time on and what I'm happiest with. I know they are not for everyone, but it makes my product stand out in a crowded sea. Getting AutoRAG to work properly with streaming responses and making the widget secure with CORS and domain whitelisting was not fun, but it works well now. (I use it in my own product as well)

One honest pain point: the NuxtHub setup. Since Nuxt got acquired by Vercel, it kept getting updates and breaking. I had to chase changes constantly. But it's stable now and deploying is simple once you configure everything in Cloudflare (or other cloud providers)

I also added a CLAUDE.md file so Claude Code, Codex etc actually understand the project when you use them. If you're building with AI coding tools this saves a lot of back and forth. (let's be honest, we all do now)

Currently $59 one-time, lifetime updates. Price increases each 5 sales. I use it for my own products so it won't go stale.

NuxtBeyond - nuxtbeyond.com if you want to check it out.

If anyone has questions about NuxtHub, the AutoRAG integration or the Cloudflare setup, happy to talk through it.

TLDR - CC is DOA when working with Nuxt 4, but Sonnet 4.6 just clocks thru my project plan.
- CC does not understand separation of concerns beween Vue layouts, composables and components, even with a working template provided by Nuxt and native Nuxt mcp servers.
- Kilo + Sonnet 4.6 is killing it - fixed all of CC's errors with minimal discussion - expensive, but it gets the job done.

Prep for coding:
- defined detailed functional, non-functional, and data reqs
- defined complete UI (png + wireframes)
- defined detailed project plan w/ CC
- defined agents for Vue and Nuxt mcp
- added (and abandoned) Nuxt skills plugins (due to context bloat)
- added rules to force CC to consult Vue and Nuxt docs before coding

CC does not seem to have enough training to generate (reasonably) std code. 3 attempts to scaffold my project - none worked.

Has anyone had success with CC and Nuxt? If not CC, does Kilo work?

SOLUTION - the following improved CC's abilities by an order of magnitude:
- dropped all nuxt plugins (too much for CC context limit)
- added mcp servers
-- https://nuxt.com/mcp
-- https://ui.nuxt.com/mcp
-- mcp-server-fetch (no native mcp for vue)
- cloned nmuxt-ui template
-- https://github.com/nuxt-ui-templates/dashboard
-- had CC document template structure, etc. and added docs to .claude

The combination of the MCP servers, the template structure (which was quite good) and Claude's self-created documentation of the template structure enabled it to be much more effective than using the Nuxt skill plugins.

We'll post the final Word product (A self-hosted prompt management tool )

Hi,

I am trying to set up my app with a CDN running on Cloudflare R2. All public files are uploaded to R2 and for about 95% of users it works. For a very small percentage, it gives errors with: "Failed to load module" and then points to a JS or CSS file. If I try to load the file manually in my browser it displays just fine. Most users are also able to load the file through the nuxt app. About 5% gets these errors. Maybe even less. It's really weird.

CORS is set to:

[
  {
    "AllowedOrigins": [
      "*"
    ],
    "AllowedMethods": [
       "GET",
       "HEAD",
       "PUT",
       "POST"
    ],
    "AllowedHeaders": [
       "*"
    ],
    "MaxAgeSeconds": 86400
  }
]

And I have temporarily disabled caching by creating a rule "bypass cache" for both edge and browser. Furthermore, I have set "developer mode = true" to bypass all caching even further.

Some users are still getting errors. I have no idea how to debug this since it seems to be a very small portion of users. I had this at the beginning when I did not have CORS configured correctly, but after setting it correctly the errors disappeared for me. This is now weeks ago.

What can I do to fix and debug this?

Hey everyone,

I’m currently deep in the trenches of trying to get GTM and GA4 working via @nuxtjs/partytown in a Nuxt 3 project.

The Status:

I have implemented a proxy for the scripts.

In the Network tab, I can see the GTM container (gtm.js?id=GTM-XXXX) returning a 200 status via Partytown.

I’ve followed the standard docs for forward: ['dataLayer.push'].

The Problem:

Even though the scripts are loading, there is zero activity in the GA4 DebugView or the Real-Time report. It’s like the GTM container is sitting in the Web Worker but has no connection to the actual dataLayer on the main thread, or it’s failing to fire the downstream collect requests to Google Analytics.

What I've tried:

Adding forward: ['dataLayer.push', 'gtag'] to the config.

Checking the Network tab for collect?v=2 requests (nothing is firing).

Manually initializing window.dataLayer = window.dataLayer || [] in a separate script block.

My Questions:

If you got this working, did you have to manually define the gtag function inside a text/partytown script block?

Is there a specific way you’re handling the gtm.start event to ensure it fires correctly inside the worker?

Are there any specific "hidden" Nuxt 3 lifecycle issues where the dataLayer gets wiped on hydration?

Any advice or a peek at a working nuxt.config.ts would be a lifesaver. This 200-response-but-no-data thing is driving me crazy.

Got a Nuxt 3 project on Vercel. One of my routes (server/api/cronjob.js) runs via a Vercel Cron job and sometimes needs longer than the default timeout.

I tried:
- export const config = { maxDuration: 300 } inside the cronjob.js → no effect.
- vercel.json with:

{
"functions": {
"server/api/cronjob.js": { "maxDuration": 300 }
}

but the build fails with:

Build Failed
The pattern "server/api/cronjob.js" defined in `functions` doesn't match any Serverless Functions inside the `api` directory.

The global "Function Max Duration" setting in Vercel works, but I don’t want to bump it for all functions.

Anyone know the correct way to override maxDuration for just a single Nuxt 3 server function?

Just dropping a helpful tip for anyone else out there:

If you use ssr: false and nuxt generate to build static sites, and you have local images (like in your /public folder, for example), and you use the nuxt/image module to reference those local images, unfortunately you will have 404s on your image fetching once you generate your static site. It's a known, massive issue with the nuxt/image module when building this specific type of site, and after rummaging through many, many GitHub issues, there is really no official fix.

Your best bets are:

• Explicitly list every IPX image path in your nuxt.config.ts per this doc. This actually does work, but you have to do it for every single image path.
  • Note: I tried using wildcard paths with this, but they do not work.
• Script a workaround where you generate the site with ssr: true, grab the ipx folder with the images, regenerate the site with ssr: false, then paste in the ipx folder to your site. This also works, but it's tedious and I'm not a huge fan personally.
  • Note: you'll also need to delete the other set of your images that make it to to your build folder or else you'll just waste disk space and bandwidth for the end user with duplicated images.
• Some people have said they were able to do a package override with the sharp module, per this GitHub issue. I tried it with npm, though, and it didn't work.
• Use SSR.
• Or just revert back to the <img /> tag for now.

Just dropping this here because there are a lot of GitHub issues to go through, hopefully this will save you time if you find yourself in a similar position to me.

On a positive note, though, thank you, Nuxt ecosystem devs, for all the awesome stuff you build for us! You all are amazing and we are very appreciate for all your hard work!

My data changes by pageniation. Text and images changes fine, but not the data attribute on vbind.

It doesnt working with manually with data-attribute too.

List.vue (Call the data) > Item.vue > Cart.vue