Nuxt

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 deploying both fully static and on-demand rendered Nuxt 4 projects:

• The static rendering mode is ideal for most content-oriented websites where you don’t need per-visitor server-side customization. Consider using a Static runtime when using this mode, with the automatic site generation. Learn more about static hosting with Nuxt.
• The server or hybrid rendering modes are optimal for dynamic applications requiring server-side customization or a mix of static and server-rendered pages. For these modes, consider using a Node.js runtime. Learn more about Node.js hosting with Nuxt.

If you need an example source code compatible with Nuxt static generation, get Nuxt Boilerplate (you’ll 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

Automatic build

Nuxt is one of the many Static Site Generator (SSG) that Clever Cloud automatic build supports in the static runtime. Then, you don’t have anything special to manage. To use a pico instance with a dedicated build instance change it in the Console or with Clever Tools:

clever scale --flavor pico

# To select a bigger build instance, use:
clever scale --build-flavor M

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

To deploy your Nuxt project to Clever Cloud, you need to create a new application.

Create a Node.js application

You can create an application from the Console or through Clever Tools:

npm i -g clever-tools
clever login

cd myStaticApp
clever create -t node

To deploy on Clever Cloud, your local folder needs to be a git repository (if not, git init) 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

Environment variables

Next, configure the application with a medium build instance. The host instance is XS, enough for a simple website. As Clever Cloud uses industry standards, you only need to define a few variables:

clever scale --build-flavor M
clever scale --flavor XS

clever env set CC_PRE_BUILD_HOOK "npm run build"
clever env set CC_RUN_COMMAND "node .output/server/index.mjs"

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

Learn more