How to configure netlify dev to run with nuxt 3 for local testing of netlify functions?

Support
, ,
1

Netlify Site Name: https://bivignano.netlify.app

Hello there!

i just created a new nuxt 3 beta project. It’s quite empty at the moment. It only contains the app.vue which displays a 'hello world!"
Running local dev server and show site works!
Deploying site on Netlify works! “Hello World” is shown.

BUT!!! I will use netlify functions within my project and therefore to be able to develop and test locally i need to use netlify-cli’s “netlify dev” command.
So i installed netlify-cli and run the command.

i get this console output:

Bildschirmfoto 2021-10-16 um 22.54.03
Bildschirmfoto 2021-10-16 um 22.54.031646×696 91.1 KB

and when accessing http://localhost:8888 i get a “Not Found” page as it cannot find my site displaying “hello World”. So my question is how do i need to configure netlify dev to get it to work?

This is my netlify.toml file:

[build]
  command = "npm run build"
  functions = "netlify/functions"
  publish = "dist"

[dev]
  command = "npm run dev"
  autoLaunch = true

[functions]
  node_bundler = "esbuild"
  directory = "netlify/functions"

[[headers]]
  # Define which paths this specific [[headers]] block will cover.
  for = "/*"
    [headers.values]
    Access-Control-Allow-Origin = "*"
  • some environment variables which values i don’t want to show here.

Can anyone help me with my problem?

2

Hi @awacode

As Nuxt 3 is a very newly announced beta it would appear Netlify CLI is having a little trouble working with it.

I was able to get things working by creating a netlify.toml in the project root with the following

[dev]                                          
   framework = "#custom"                                                    
   command = "npm run dev"             
   targetPort = 3000
   debug = true
   port = 8888
   publish = "dist"

See Project detection documentation.

Edit:
The above testing was done with Netlify CLI v6.9.15. After upgrading to v6.13.2 the above [dev] section is not required in the netlify.toml as it automatically detects Nuxt 3.

1 Like
3

Hi @coelmay ,

thank you very much for your reply! You perfectly helped me. With your [dev] part in netlify.toml i also get it to work.

But as i recognized with your post that my netlify version ist also older (netlify-cli/6.9.17) i thought, ok, i should better update.

But here i get problems. When i try npm install -g netlify-cli@latest i still endup with my 6.9.17 version. and when i run npm uninstall -g netlify-cli it remains there. It does not seem to uninstall it. Whatever i try i am stuck to 6.9.17.

Do you maybe have an idea what my problem could be?

4

i could help myself. Running the above commands did not work, but running:

npm uninstall --global netlify-cli

and

npm install -g netlify-cli@latest

did the job! Now i am on netlify-cli 6.14.0 and it also works without the [dev] part in netlify.toml.

@coelmay thank you a lot for your perfect and quick help!

2 Likes
5

Thanks for coming back and letting us know everything is working, @awacode! @coelmay, thanks for the terrific insights!

2 Likes