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. Learn in this guide how to deploy a Nuxt site on Clever Cloud.

Clever Cloud supports deploying both fully static and on-demand rendered Nuxt 3 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 site generation handled in a post-build hook. 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 Zooper (you’ll need git and Node.js):

git clone https://github.com/fayazara/zooper myStaticApp

Deploy a static Nuxt site

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

Create a static application

You can create an application in our Console or through Clever Tools:

npm i -g clever-tools
clever login

cd myStaticApp
clever create -t static-apache myStaticApp

To deploy on Clever Cloud, your local folder need 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

Configure environment variables

Next, we configure the application with a medium build instance to quickly generate static files. The host instance is nano-sized, enough for a simple website. As Clever Cloud is based on standards, you only need to define a few variables:

clever scale --build-flavor M
clever scale --flavor nano

clever env set CC_NODE_VERSION "20"
clever env set CC_WEBROOT "/.output/public"
clever env set CC_OVERRIDE_BUILDCACHE "/.output/public"
clever env set CC_PRE_BUILD_HOOK "npm install"
clever env set CC_POST_BUILD_HOOK "npx nuxi generate"

Deploy a server Nuxt site

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 mNuxtApp

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

Configure 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