Cannot deploy to Vercel after v3 upgrade

[PikachuEXE]

Environment

• Operating System: Darwin
• Node Version: v22.12.0
• Nuxt Version: 3.15.3
• CLI Version: 3.20.0
• Nitro Version: 2.10.4
• Package Manager: [email protected]
• Builder: -
• User Config: modules, css, colorMode, compatibilityDate, content, i18n, vite, ssr, devtools, future
• Runtime Modules: @nuxtjs/[email protected], @nuxt/[email protected], @nuxtjs/[email protected], @nuxt/[email protected], @nuxt/[email protected], @pinia/[email protected], @nuxt/[email protected], @nuxt/[email protected]
• Build Modules: -

Version

v3.0.1

Reproduction

https://github.com/PikaSer-Cosmos/pikaser-website-main/tree/upgrade/nuxt-content-3

Description

I haven't config anything for database
https://content.nuxt.com/docs/getting-started/configuration#database

Additional context

Building locally is fine though (yarn run build

Logs

Build log:

[larbish]

Hey @PikachuEXE, for serverless deployment you need to configure a database: https://content.nuxt.com/docs/deploy/serverless#deploy-with-serverless.

For Vercel deployment the module is manually switching to a PostgreSQL database. It's really easy to setup one with Neon.

[SomethingNew71]

While adding a database service to this is a good solution, I feel like this needs to be more clear in the migration guide. Many people are using services like Vercel to deploy with zero additional config using v2 and now are going to require a pretty large change to architecture and potentially cost as a result of this upgrade.

[asadmalik]

My only reason for using nuxt content was it's free file based blogging/documentation functionality.
And first value proposition on nuxt content home is:

File-based CMS
Write your content in Markdown, YAML, CSV or JSON and query it in your components.

Why the database limit? Is there any workaround to avoid DB integration?

Thanks.

[calamina]

It's working on my end with SSG (Static Site Generation) and no database :

So if that's an option for you just edit your nuxt config.

[SomethingNew71]

It's working on my end with SSG (Static Site Generation) and no database :

So if that's an option for you just edit your nuxt config.

While that does "make it work" you are essentially defeating the purpose of Nuxt SSR by doing this. So no longer SSRing anything, static generating the entire site which takes away the speed, performance, and functionality benefits that come with SSR as well. :-/

[calamina]

I can agree with the functionality part, but SSG is as fast if not faster than SSR for many use cases.
And such use cases are documentations or blogs, your server is already using and serving static md files, it might as well serve html.

[PikachuEXE]

Either way needing a DB on server side is a new requirement and really should be communicated better
Also if there are ways to avoid DB they should be presented in doc as well (and I don't see them yet?

[victor-ponamariov]

Yesterday I asked the question on Bluesky, and someone told me to use Node 20 or 22 version and it will work.

It indeed deployed, but I don't understand why/how it works, when I navigate to the page with. my posts, I can see them listed, when I refresh the page the asyncData doesn't fire. I'm Nuxt newbie so it might be something silly.

But what has sqlite to do with Node version...

I also tried to deploy to nuxt hub, since it looks like it's better since it suitable for Nuxt projects, but also stuck somewhere =\

[farnabaz]

@victor-ponamariov It's always recommended to use the LTS version of Node (now it's 22), and some of the Content dependencies are not compatible with Node 16 or 18.

when I navigate to the page with. my posts, I can see them listed, when I refresh the page the asyncData doesn't fire

Do you mean when you refresh the page, the list is not there? If so try loging error value of useAsyncData to get more information

const { data, error } = await useAsyncData(.....)

console.log(error.value)

[larbish]

Hey everyone,

I’d like to clarify a few things regarding Nuxt Content v3 and possible regression / loose of DX compared to v2:

• Classic SSR deployment still requires zero configuration in a standard Node.js environment. The default setup now uses SQLite, improving performance compared to the previous memory-based storage (using unstorage). The change is transparent for users.
• Same for static generation since the build is also handled with SQLite, requiring no additional setup from the user.
• You can also pre-rendered you pages combining both SSR/SSG modes.
• Concerning Serverless deployment, while v2 technically worked for small projects, it was slow and didn’t scale. The move to database storage significantly improves performance and enables larger applications to run on serverless platforms.

Improvements needed in documentation:

• A database is now required for serverless deployments and needs specific setup (except for NuxtHub that should handle everything for you under the hood). The documentation needs to make this clearer, and we’ll work on improving that!
• If you guys can share specific pain points in the documentation so we can refine it pertinently
• A PR to improve the docs and be able to discuss about changes would be awesome!

One last point about Vercel deployment and the DB pricing: there are some free alternative like Turso you can use or even Neon free plan that should be enough for 90% of cases.

[victor-ponamariov]

@farnabaz there won't be any error or data since the request is not being run after refresh at all. It only runs when I navigate to it from another page

[farnabaz]

@victor-ponamariov It's strange, but the error.value is outside of async data and it should be logged in server, at least it should log null value. Do you see any errors or exceptions or warnings in Vercel's server logs?

[victor-ponamariov]

@farnabaz when I deploy to Vercel (the 3 version) I get 404 all the time. Even though the built was successful.

Here is the build log

https://pastebin.com/Q5w4uKXA

[farnabaz]

@victor-ponamariov It seems you registered @nuxthub/core module in nuxt.config. Using NuxtHub module forces Nuxt to target Cloudflare workers on build and not Vercel. Try again by removing @nuxthub/core from modules.

You don't need @nuxthub/core module on other deployment platforms.

[victor-ponamariov]

@farnabaz I see...makes sense

But when I tried to deploy via Nuxt Hub with @nuxthub/core, I got the same behaviour when you update the page and nothing happens (asyncData doesn't get envoked). I'll try to deploy on Vercel without the module, and check any logs I find. NodeJS should be 20 or 22, right? It's better to choose 22 I believe

Nuxt Hub eventually didn't work for me (I made a post on Bluesky). I'll try Vercel without Nuxt hub module, but should I do any extra steps since sqlite was introduced? That's what is strange: with Node 18 I couldn't even build on Vercel, while with 20/22 the build was successful, but how it is related to sqlite - no idea.

The error (with NodeJS 18) was related to g++ or something like that, it asked me to install extra packages, supposedly related to sqlite

[farnabaz]

I recommend 22.
Lets see with Vercel and after this we can check NuxtHub.

should I do any extra steps since sqlite was introduced?
You only need to connect a database to your project in Vercel, Like Neon (You can find it in Vercel marketplace)

[victor-ponamariov]

@farnabaz The build was successful, but the request in useAsyncData doesn't work even if I just navigate through my pages (https://vpon.me/posts)

In logs I can see, which is related to sqlite.. that's the cornerstone I guess

What's interesting is that I don't have anywhere 127.0.0.1:5432 in my code. Now I need to figure out how to setup sqalite on Vercel and provide production credentials to it. I can see https://content.nuxt.com/docs/getting-started/configuration#sqlite but there is nothing about IP address, host, user, password?

update So if I get it right, I need to use Postgres on Vercel, I can't see sqlite there. And then it'll work. Will try it now

[farnabaz]

As for client navigation, it seems you didn't return the result, you've returned console.log(). You can see in the image that query returned 11 articles.

but there is nothing about IP address, host, user, password?

If you connect a database to your project Vercel will inject POSTGRES_URL environment variable to app and Nuxt Content will use that URL.

update So if I get it right, I need to use Postgres on Vercel, I can't see sqlite there. And then it'll work. Will try it now

Indeed Nuxt Content can connect to Postgress and in Vercel the only option is Postgress database.

If you like, you can invite me to the repo so I can try and check Vercel deployement

[victor-ponamariov]

@farnabaz Interesting, I don't get console.log inside useAsyncData executed at all. But I'll connect Postgres and hopefully it'll work

[drewbaker]

@larbish I'm super surprised to learn that for SSR on Vercel (serverless) in all uses cases requires a 3rd party database provider. Very unlike Nuxt to do this.

I only have 6 pages (an app landing page, contact page etc) so I'm more than happy to ship all my MD files in my build to the user. I need to be SSR because I need Open Graph meta tags to be generated in my source code for the dynamic parts of my site.

I think it makes sense to have an external DB if I have 100s of dynamically generated pages (like a news site), but I don't in this case. I should be able to use NuxtContent's powerful ContentRenderer component with locally packaged MD/JSON files if I want to.

Also, even if I didn't want to ship my MD files to my users, isn't this kind of the best reason for Nitro being packaged into Nuxt? You have a built in server that works great in serverless environments already, wouldn't that be the perfect place to run the DB and serve up the queries, cached and everything? Can we get a fetchNuxtContent() composable for example.

My only reason for using nuxt content was it's free file based blogging/documentation functionality. And first value proposition on nuxt content home is:

File-based CMS
Write your content in Markdown, YAML, CSV or JSON and query it in your components.

Why the database limit? Is there any workaround to avoid DB integration?

Thanks.

I agree with @asadmalik on this 100%. Shocked at this decision.

As it stands, I have to cobble together something from these:
https://nuxt.com/modules/mdc
https://github.com/vanillaes/frontmeta
https://github.com/unplugin/unplugin-vue-markdown

[atinux]

I can understand the frustration if you were already using a serverless platform and it was working beforehand (until a certain limit that you may have not reached). Hosting nuxt.com on serverless was not possible if we wanted dynamic SSR with great performance without achieving it using a database for the query builder.

Reminder, it works perfectly when using a node.js server or static hosting (nuxt generate) without any 3rd party database because we use SQLite, sadly, this file-based database is not supported on Vercel or Netlify...

We are brainstorming to have a SQLite Emulator for such environments so it could work without 3rd party database.

If you don't need the query builder and generated navigation, you can use https://nuxt.com/modules/mdc which is the core module of Nuxt Content and made for simpler usage.

You have a built in server that works great in serverless environments already, wouldn't that be the perfect place to run the DB and serve up the queries, cached and everything? Can we get a fetchNuxtContent() composable for example.

Of course, you can create an API route that call queryCollection(event, 'your-collection') and pre-render this route at build time if you want!

[hdwebpros]

I started a discussion about this last week: #3049

@atinux mentioned something here that was interesting for me:

If you don't need the query builder and generated navigation, you can use https://nuxt.com/modules/mdc which is the core module of Nuxt Content and made for simpler usage.

I had no idea about that module honestly. But that's not really helpful for most people. I'd imagine the most common setup for using Markdown on a simple business website is to hold blog content, maybe other items like portfolio, etc. But either way, you will have a collection of data in the most common setup (most likely). Since we are now talking about collections, the queryContent is a must have feature for these websites -- making Nuxt Content the module that is needed typically.

@atinux also mentioned:

Reminder, it works perfectly when using a node.js server or static hosting (nuxt generate) without any 3rd party database because we use SQLite, sadly, this file-based database is not supported on Vercel or Netlify...

This is 100% true! However, a very powerful part of Nuxt is being able to use the /server folder to pass sensitive information and now have it in the DOM / browser, and being able to do this on Vercel or Netlify. Doing SSG takes that away. Back to my basic setup I mentioned, typically if you have a contact form, there are credentials to be passed, making SSG not a usable thing. So a standard website with a blog and a form hosted on Vercel, which I imagine happens a lot, is completely not doable on Vercel with Nuxt Content V3.

Another point:

We are brainstorming to have a SQLite Emulator for such environments so it could work without 3rd party database.

That seems very complicated on your end. I just don't understand the fixation on wanting SQLite and not considering going without it. I get that with extremely large datasets you'd get a performance boost. For your standard marketing site with 15 blog posts and a few other small collections, I don't see the benefit and it seems like its overengineered at that point.

My Suggestion:

I'd suggest that Nuxt Content should make the DB an opt-in feature, disabled by default. If I had more time in my day I'd try to commit something and do a pull request, but I am trying to hire a few positions at work and things are just too crazy for me -- I just don't have the time to jump in and help on this feature.

If you are still stuck here, you can downgrade to V2 and it works. I am doing that right now on two Nuxt Content on Vercel sites.

And anyone that read all of that, thank you. Thanks to the Nuxt team and contributors, you guys rock.

[atinux]

In Nuxt Content v1, we used LokiJS for the query builder which is now unmaintained for years.

In Nuxt Content v2, we used unstorage + our own query builder which was slower and making the server bundle bigger (was impossible to deploy on workers for instance).

The main issue that I understand perfectly is when you want to deploy a prerendered website on Vercel while keeping the server directory for API routes. I just checked, and yes, this is a pain and we don't want to leverage an external database for this use case.

I opened #3093 to remove forcing PG when using Vercel, this should allow you to easily prerender your site, I made an open source demo on https://github.com/atinux/nuxt-content-v3-demo to showcase and explain it.

[hdwebpros]

Thank you for your efforts!

I think the disconnect is that V2 (unstorage + your own query builder) worked totally fine for a lot of people. People are under the impression that V2 works well, which apparently it did but not in all situations. This clarifies things a lot.

[farnabaz]

As the next iteration on @atinux work, with #3108, projects can be deployed to Vercel without the need to use third-party db or pre-rendered. SSR works in Vercel with zero config.

Just make sure you are using Node 20 or higher, Node 22 is Recommended.

You try with

npm i https://pkg.pr.new/@nuxt/content@bfc58cc