Deploy a Nuxt application

Nuxt is a powerful and versatile web framework for building modern web applications, offering a seamless development experience with server-side rendering, static site generation, and hybrid capabilities.

Clever Cloud supports Nuxt 4 projects as pre-rendered static sites or on-demand rendered applications:

• A pre-rendered site is ideal for most content-oriented websites where you don’t need per-visitor server-side customization. Use the Static runtime to generate and serve it automatically. Learn more about static hosting with Nuxt.
• Server-side or hybrid rendering is better suited to dynamic applications requiring server-side customization or a mix of static and server-rendered pages. Use the Node.js runtime for these modes. Learn more about Node.js hosting with Nuxt.

To follow this guide, clone Nuxt Boilerplate, then choose one of the two deployment methods below. You need Git and Node.js:

git clone https://github.com/renegadevi/nuxt-boilerplate myStaticApp

Deploy a static application

You can create an application in our Console or through Clever Tools. Install them with npm or any supported package manager:

# Install with npm or any supported method
npm i -g clever-tools

# Login to Clever Cloud and check it worked
clever login
clever profile

Go to the folder where you want to create your application, and run the following command:

cd myStaticApp
clever create -t static

# If the folder is not a git repository, initialize it:
git init

To deploy on Clever Cloud, your local folder need to be an initialized git repository linked to an application. If you already have an application on Clever Cloud and want to link it to the current local folder:

clever link your_app_name_or_ID

Clever Tools targets your personal organisation by default. To use another organisation, add --org ORGANISATION or -o ORGANISATION when you create or link the application.

Automatic build

The Static runtime automatically detects nuxt.config.ts, runs the Nuxt static generation command and serves the generated files.

Push your code

Once you complete these steps, commit your content to the local repository and deploy it:

git add .
git commit -m "First deploy"

clever deploy
clever open

You can display your website’s URL or add a custom domain to it (you’ll need to configure DNS):

clever domain
clever domain add your.website.tld

404 page location

If you need to use a specific page for 404 errors, define its location with SERVER_ERROR_PAGE_404 environment variable from Static Web Server, used as default in static runtime. For example : SERVER_ERROR_PAGE_404=404.html.

Deploy a Node.js application

Use a Node.js application for Nuxt server-side rendering and hybrid rendering.

Create a Node.js application

Install Clever Tools, log in and create a Node.js application linked to the cloned repository:

npm i -g clever-tools
clever login

cd myStaticApp
clever create -t node

# Or link an existing Clever Cloud application:
clever link your_app_name_or_ID

Clever Tools targets your personal organisation by default. To use another organisation, add --org ORGANISATION or -o ORGANISATION when you create or link the application.

Environment variables

Install the development dependencies required by Nuxt and build the server after dependency installation:

clever env set CC_NODE_DEV_DEPENDENCIES install
clever env set CC_POST_BUILD_HOOK "npm run build"

The Node.js runtime installs the dependencies before running the post-build hook. It then starts the application with the start script from package.json, which runs the generated .output/server/index.mjs server. Nuxt reads the PORT environment variable injected by Clever Cloud, so you don’t need to configure a listening port.

Push your code

Once you complete these steps, commit your content to the local repository and deploy it:

git add .
git commit -m "First deploy"

clever deploy
clever open

You can display your application’s domains or add a custom domain:

clever domain
clever domain add your.website.tld

Learn more