Deploying a Nuxt.js static site can seem daunting at first, but with the right steps, you can have your site live on popular platforms quickly. This guide provides a clear, step-by-step process to deploy your Nuxt.js static site on platforms like Netlify, Vercel, and GitHub Pages.

Prerequisites

  • Node.js and npm installed on your machine
  • Basic knowledge of Nuxt.js
  • A GitHub account (for version control and deployment)
  • Accounts on Netlify, Vercel, or GitHub Pages

Step 1: Prepare Your Nuxt.js Project for Static Deployment

Configure your Nuxt.js project to generate a static site. Open nuxt.config.js and set the target to static.

export default {
  target: 'static',
  // other configurations
}

Build your project to generate static files by running:

npm run generate

Step 2: Push Your Project to GitHub

Initialize a git repository if you haven't already, commit your changes, and push to GitHub.

git init
git add .
git commit -m "Prepare Nuxt.js static site for deployment"
git branch -M main
git remote add origin 
git push -u origin main

Step 3: Deploy on Netlify

Connect your GitHub repository to Netlify. In Netlify dashboard, click "New site from Git" and select your repository. Set the build command and publish directory:

Build command: npm run generate

Publish directory: dist

Click "Deploy site" and wait for the process to complete. Your static Nuxt.js site is now live on Netlify.

Step 4: Deploy on Vercel

Login to Vercel and import your GitHub repository. Vercel automatically detects Nuxt.js projects. Ensure the build command is npm run generate and the output directory is dist. Click "Deploy" and wait for the deployment to finish.

Step 5: Deploy on GitHub Pages

Install the gh-pages package to deploy your site:

npm install --save-dev gh-pages

Add the following scripts to your package.json:

"scripts": {
  "build": "nuxt build",
  "generate": "nuxt generate",
  "deploy": "gh-pages -d dist"
}

Build and generate your static files, then deploy:

npm run build
npm run generate
npm run deploy

Configure your GitHub repository to serve the site from the gh-pages branch in the repository settings. Your site will be available at https://.github.io//.

Conclusion

Deploying your Nuxt.js static site is straightforward once you understand the process. Whether you choose Netlify, Vercel, or GitHub Pages, following these steps will help you get your site live quickly and efficiently. Happy deploying!