What does Nuxt add to Vue?

Nuxt gives a Vue app a place to put its pages and the code that handles requests. For a repair shop, the appointment page can show the available times, and a server route in the same project can receive the booking when someone clicks Reserve.

A Vue component can make the time picker interactive on an existing page. Consider Nuxt when the app needs several web addresses or you want a consistent place to keep both the screens and the server code. In a Nuxt 4 project, a page file such as app/pages/repair.vue can supply the /repair address. A file under server/api can receive requests from that page.

What do you need to start a Nuxt 4 project?

For a local start, use a code editor, a terminal and a compatible version of Node.js, the program that runs the project’s JavaScript outside the browser.

For Nuxt 4.6.4, the package accepts Node 22.22.3 or later within 22.x, Node 24.15.0 or later within 24.x, or Node 26 and later. For example, a supported 24.x release from 24.15.0 meets that requirement. Check the installed Nuxt version and the requirements of any add-ons before matching your local version to the host.

If you inherited a project, check its saved package versions before following a tutorial. Nuxt 2 and 3 have reached upstream end of life. Use the version-specific upgrade guide to plan changes in a copy.

Set up a local Nuxt 4 project

How can you tell that a Nuxt booking was saved?

Open the saved booking in a fresh visit. A message below the Reserve button could be showing only what you picked. The appointment needs to survive after you leave the page.

Make a private practice copy
Use the setup above to create a fresh blank Nuxt project. Before you start the local app, confirm it has no connections to live bookings, sign-in, payments or messages. If you cannot confirm that, do the exercise on paper. Once the connections are clear, start the app and use two made-up times, 3:00 and 3:30.
Give the form a place to send the choice
Make the /repair page show the two choices. Set the Reserve button to send a POST, the request this app uses to save a booking, to /api/bookings. In Nuxt 4 you can put that handler in server/api/bookings.post.ts. Have it accept only the two practice times. Add a separate /repair/saved page that only reads the bookings.
Make the database enforce one booking per time
Use a new SQLite file inside this disposable project and confirm the handler writes to that file. Ask your coding tool or developer to create a bookings table with a required, unique slot field. Have the handler attempt one insert and confirm the booking only after the write commits. Reply that a time is taken only when its existing booking is confirmed. For an uncertain save, read the saved list before retrying.
Try a fresh visit and a second request
Reserve 3:00. Open /repair/saved in a fresh tab without sending the form again. Confirm 3:00 appears there, then try to book 3:00 again in another tab. The second attempt should say it is taken, the list should still have one booking and 3:30 should still be available.

When does Nuxt need a running server?

If this project accepts bookings through its own server route, the host has to run that code when a visitor submits. Fixed pages such as opening hours can be prepared as files before you publish.

The static export leaves out the app’s request handlers. A static booking screen can still send requests to a separate running service if you set one up.

Nuxt is MIT-licensed. Budget separately for hosting and the services the app uses, such as database storage. Check your chosen host’s billing units for running code and storing or transferring data.

What your host needs to deliver
What visitors need	What to deploy
Read opening hours or see a portfolio	Generate static files in .output/public. Check that a direct visit to each important address and a missing address behave as expected.
Save a new booking in this project	Build for a compatible server. The Node server preset has an entry point at .output/server/index.mjs. The server needs access to the booking database.
Run the booking app on a host with its own deployment format	Use the matching Nuxt deployment preset and check its runtime and dependencies. The local exercise can use one SQLite file. If your host runs multiple copies of the app that accept bookings, connect all of them to the same durable booking database and confirm it supports writes from every copy.

What should you keep if you change hosts?

Keep the editable project and its lockfile, which records dependency versions. Also save the build settings and make a list of the database, uploads and account settings the live app relies on.

Arrange a separate export and test restore of the saved data. Recreate private settings on the destination host without putting them in the source files. Values in Nuxt’s runtimeConfig.public reach the browser. Set private runtime values on the host because the built server does not load the development .env file by default.

Before switching visitors, open one existing address directly and check that a sample booking can be read from the restored test copy.