Nuxt3 deployment with Cloudflare pages failed

user_776645 0
Viewed 426

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

enter image description here

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?

cloudflare-pages nuxtjs3
1 Answers

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
user_4015540
Related