Nuxt3 deployment with Cloudflare pages failed - nuxtjs3

Question

I have successfully compiled my nuxt3 project locally. But the deployment is not working with cloud flare page
00:14:35.140 Executing user command: npm run generate
00:14:35.613
00:14:35.613 > generate
00:14:35.613 > nuxt generate
00:14:35.614
00:14:35.725 Nuxt CLI v3.0.0-rc.3-27567768.c1f728e
00:14:38.919 ✔ Using ~/components/content for components in Markdown
00:14:43.437 ℹ Vite client warmed up in 3072ms
00:14:44.646 ℹ Client built in 4280ms
00:14:44.681 ℹ Building server...
00:14:47.053 ✔ Server built in 2373ms
00:14:47.249 ✔ Generated public dist
00:14:47.249 ℹ Initializing prerenderer
00:14:50.871 ℹ Prerendering 4 initial routes with crawler
00:14:50.891 ├─ / (20ms)
00:14:50.894 ├─ /200 (3ms)
00:14:50.897 ├─ /404 (3ms)
00:14:50.958 ├─ /api/_content/cache (61ms)
00:14:50.971 ✔ You can now deploy .output/public to any static hosting!
00:14:51.017 Finished
00:14:51.018 Note: No functions dir at /functions found. Skipping.
00:14:51.018 Validating asset output directory
00:14:51.018 Error: Output directory ".output/public" not found.
00:14:52.095 Failed: build output directory not found
This is failed with "Error: Output directory ".output/public" not found." but actually the directory is generated few lines before. Any clue to resolve this problem?

Answer 1

I worked around the problem with:
Adding Nitro output config [1] [2] to nuxt.config.ts:
export default defineNuxtConfig({
"nitro": {
"output": {
dir: 'output',
serverDir: 'output/server',
publicDir: 'output/public'
}
}
})
In Cloudflare Pages, setting build output directory to: server/output/public.
I think the issue is caused by the default deployment script at CloudFlare side, checking the existence of .output, but not being able to see "hidden" (starting with dot) folders.
17:27:08.682 Validating asset output directory
17:27:08.682 Error: Output directory ".output/public" not found.
Edit (2022-07-10) found a cleaner way:
add "target" : "static" to nuxt.config.ts
Use as CloudFlare Pages build command: ./node_modules/.bin/nuxt generate
Set CloudFlare Pages build output directory to dist

Answer 2

I also had this issue, after testings, this is what i found.
The documentation says Use the nuxi generate command to build your application. (https://v3.nuxtjs.org/getting-started/deployment#static-hosting).
Configure Node Version
First, i'll add an .nvmrc file at the root of the project, so that Cloudflare doesn't use its default 12.18.0 version on deploy.
The content of the file is :
16
sources:
nuxt 3 prerequisites : https://v3.nuxtjs.org/getting-started/installation/#prerequisites
Node version on Cloudflare Pages : https://developers.cloudflare.com/pages/platform/build-configuration/#language-support-and-tools
Configure the Cloudflare Page
Then i'm adding the configuration in the cloudflare interface with following :
Build command: npx nuxi generate
Build output directory: /.output/public
Root directory: /
🚀
Going further
Actually, it shouldn't be a problem to deploy easily on CF Pages: the team has added a cloudflare_pages preset right into nitro, the server library behind nuxt 3. https://nitro.unjs.io/deploy/providers/cloudflare#cloudflare-pages
I wasn't able to make this preset work for now, i'll update my answer when this has changed :)