Trying Nuxt & VitePress [and a SSG Recap]

November 18, 2025

TL;DR

Ive had pening for a while to try Nuxt, and I think it is a great framework for building full-stack web applications and websites with Vue.js.

https://jalcocert.github.io/JAlcocerT/waiting-list-pocketbase/#csr-vs-spa

Intro Almost the end of the year, time to try out some new SSG.

This time it is the turn of Nuxt

https://github.com/HugoRCD/canvas

The first thing I noticed, it takes much more time to load compared to Astro or NextJS sites, and much more than HUGO.

You just need 2 things: NPM and NodeJS.

Setup Node and NPM - x86/ARM64/ARM32 📌

sudo apt update && sudo apt upgrade

#install NodeJS https://deb.nodesource.com/
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo bash -
sudo apt-get install -y nodejs

# Verify installation
node -v   # Should show Node.js version - 20.18.1
npm -v    # Should show npm version - 10.8.2

Bun | Example with NUXT - HUGO Canvas and Resend ⏬

Example - https://github.com/HugoRCD/canvas
- Contact Forms with: https://resend.com/signup - Email for developers (https://resend.com/pricing)

Really cool Portfolio template made with Nuxt 3, Nuxt Content and TailwindCSS

bun install
bun dev #dev server
bun generate #static proy
bun start #prod server

Now you can spin a server and make ASTRO Remote Development in it.

Nuxt SSG

Nuxt is a free and open-source framework with an intuitive and extendable way to create type-safe, performant and production-grade full-stack web applications and websites with Vue.js.

https://github.com/nuxt/nuxt

MIT | The Intuitive Vue Framework.

https://nuxt.com/deploy

Nuxt Content CMS

Nuxt Content CMS | Docker Config 🐋 ↗

VitePress SSG

VitePress is a Vue-powered static site generator and a spiritual successor to VuePress, built on top of Vite.

MIT | Vite & Vue powered static site generator.

Effortlessly create beautiful documentation sites with just markdown.

#npx vitepress init
npm install vitepress --save-dev

#npm run docs:dev
npx vitepress dev docs #go to localhost:5173 and there you go!

git clone https://github.com/vuejs/vitepress
cd vitepress/docs
npm install
npm run dev

https://vitepress.dev/guide/routing

VitePress is a Vue-powered static site generator and a spiritual successor to VuePress, built on top of Vite.

A SSG Recap

So…those are 2 more SSGs to the list!

ℹ️

Im assuming that you are already aware about CSS and JS tricks

Most SSGs will be powered by node.

But not all.

A comparison of Hugo, Astro, Next.js, Jekyll, Gatsby, and Nuxt.

It highlights key aspects of each static site generator or framework.

About	Hugo	Astro	Next.js	Jekyll	Gatsby	Nuxt
Source Code	Hugo on GitHub	Astro on GitHub	Next.js on GitHub	Jekyll on GitHub	Gatsby on GitHub	Nuxt on GitHub
License	Apache License 2.0 ✅	MIT License ✅	MIT License ✅	MIT License ✅	MIT License ✅	MIT License ✅
Performance	⚡️ Lightning-fast static website generation	⚡️ Optimized for static sites with partial hydration	⚡️ Full-stack with static site generation, hybrid support	⏳ Slow generation, suited for simpler blogs	⚡️ Excellent performance with static content & optimized builds	⚡️ Fast, universal applications with server-side rendering and static site generation
Type	Static Site Generator	Static Site Generator (with partial SSR)	Full-stack Framework (with SSR & Static Generation)	Static Site Generator	Static Site Generator (React-based)	Full-stack Framework (with SSR & Static Generation)
Built With	Go	JavaScript (React)	JavaScript (React)	Ruby	JavaScript (React)	JavaScript (Vue.js)
Key Feature	Blazing speed for static sites	Hybrid Static & SSR with partial hydration	SSR & SSG (static generation and server-side rendering)	Easy blog setup using Ruby and Markdown	Rich React ecosystem, GraphQL support	Full-stack, Vue.js framework with server-side rendering
Best For	Developers looking for speed and simplicity in static sites	Developers who need a modern hybrid approach (static + SSR)	Building complex web applications with both static and dynamic content	Simple blogs and personal websites	Content-rich websites with React	Building modern web apps using Vue.js

HUGO

For HUGO you will need to use GO, as explained here.

To use HUGO, you just need to Setup GO & HUGO 📌

Example with v0.108.0

sudo apt update -y
sudo apt install wget

#install go
wget https://go.dev/dl/go1.21.1.linux-armv6l.tar.gz
sudo tar -C /usr/local -xvzf go1.21.1.linux-armv6l.tar.gz
export PATH=$PATH:/usr/local/go/bin
source ~/.bashrc
go version

#https://github.com/gohugoio/hugo/releases/download/v0.108.0/hugo_0.108.0_linux-amd64.deb
go version && \
wget https://github.com/gohugoio/hugo/releases/download/v0.108.0/hugo_0.108.0_linux-amd64.deb -O hugo_specific_version.deb && \
sudo dpkg -i hugo_specific_version.deb && \
rm hugo_specific_version.deb

https://github.com/JAlcocerT/JAlcocerT/blob/main/.github/workflows/pages.yaml

ℹ️

https://github.com/theNewDynamic/awesome-hugo

My Favourite HUGO Themes

Hextra
PaperMod
Lynx

More HUGO Resources

https://awesome-hugo.github.io/

Jekyll

How to self-host a simple, static blog on a Raspberry Pi with Jekyll, Docker and Cloudflare https://myzopotamia.dev/selfhost-your-blog-on-raspberry-pi Kudos to Radoslaw on the post

For Jekyll, you will need Ruby.

Example Jekyll GHA WF

If you plan to use Github Pages with these SSGs, create the proper Github Actions workflow.

RE Calculator - Post Job Offers and CV Creation

More Jekyll Resources

https://github.com/mattvh/jekyllthemes

A directory of the best-looking themes for Jekyll blogs

Astro

ℹ️

https://github.com/one-aalam/awesome-astro?tab=readme-ov-file#%E2%84%B9%EF%B8%8F-repositoriesstarter-kitscomponents

RE Calculator - Post Job Offers and CV Creation

What it is ? 📌

Find the Theme Source Code

Github is a good starting point.

You can take components ideas, like: ::github{repo="saicaca/fuwari"}

Clone The Theme

Make sure you are free to use the theme as per its License and then clone it:

git clone https://github.com/Ruben-Winant/astro_spark_template ./astro_template #it has a cool carousel!
cd ./astro_template
rm -rf .git #remove existing git

Try the Theme

npm run build
npm run dev

Explore the results, most likely at: http://localhost:4321

A typical astro project structure:

_index.md
- _index.md
- introduction.md
- introduction.fr.md

hugo.toml

Astro Themes I find interesting:

Fuwari
VisVRS ()
AstroWind (which uses Tailwind CSS)

Resources to Create Cool Websites Astro Components 101

Wordpress to SSG Web 3 with Astro

NextJS

What it is ? 📌

Whether you’re building a blog, a corporate website, or an e-commerce platform, Next.js provides the tools and scalability to meet your project’s demands.

Gatsby

I got to know about GraphQL thanks to Gatsby.

Conclusions

The good thing about SSGs is that they power content with markdown.

Allowing you to plug easily these kind of LLMs:

Chat with Data

Using LangChain Chains

Data Chat Repository

Source Code for DB Chat with Langchain

Other SSGs

https://github.com/getpelican/pelican

Static site generator that supports Markdown and reST syntax. Powered by Python.

https://github.com/hexojs/hexo

MIT | A fast, simple & powerful blog framework, powered by Node.js.

About Nuxt

Nuxt is an open-source, full-stack framework for building web applications using Vue.js.

It simplifies the development of complex applications by providing an opinionated structure, automatic routing, and multiple rendering modes out of the box.

Nuxt is inspired by Next.js, a similar framework for React.

I need to try NUXT sometime ,soon'

Nuxt and JavaScript ☕️

Nuxt is deeply rooted in JavaScript, as it’s built on top of the Vue.js framework, which is a JavaScript library for building user interfaces.

⚠️

See more about TS and JS Frameworks

It uses JavaScript to handle almost every aspect of an application, from front-end interactivity to server-side logic.

Vue.js: Nuxt is a meta-framework for Vue.js. It leverages Vue’s component-based architecture and reactivity system. All the components and pages you create in a Nuxt application are essentially Vue components written in JavaScript (or TypeScript).
Node.js and Nitro: Nuxt’s server-side capabilities are powered by a server engine called Nitro, which is built on Node.js. This allows Nuxt to run JavaScript code on the server, which is essential for features like Server-Side Rendering (SSR) and API routes.
Tooling: Nuxt integrates popular JavaScript build tools like Vite or Webpack to bundle and optimize your application’s code for production.

Nuxt and SSG (Static Site Generators)

Nuxt is not just a static site generator, but it can act as one.

It offers several rendering modes, including static site generation (SSG), which puts it in a similar category to frameworks like Astro or Hugo, but with some key differences.

Nuxt’s Rendering Modes

Nuxt provides a versatile rendering system that allows you to choose the best approach for your project:

Single-Page Application (SPA): The entire application is rendered by the browser after it loads the initial HTML, CSS, and JavaScript. This is the traditional way of building a Vue app, and it’s great for highly interactive web apps.
Server-Side Rendering (SSR): The server renders the initial HTML for each page, which is then sent to the browser. This improves initial load performance and SEO. Once loaded, the page becomes a fully interactive SPA. Nuxt calls this “Universal” rendering.
Static Site Generation (SSG): Nuxt generates a static HTML, CSS, and JavaScript file for each page at build time. These files can be served from any static host or CDN. This provides the best performance and security and is ideal for content-heavy sites like blogs or documentation.

Nuxt vs. Astro and Hugo

While all three can be used to generate static sites, they have different philosophies and use cases:

Hugo: This is a pure static site generator written in Go. Its primary focus is on lightning-fast build times and serving static content. It’s not a JavaScript framework, so it doesn’t provide the same level of client-side interactivity or component-based development as Nuxt or Astro. It’s best suited for blogs, portfolios, or documentation websites where content is king and interactivity is minimal.
Astro: Astro is a modern SSG that champions a “zero-JS by default” approach. It uses a unique “Islands Architecture,” where pages are pre-rendered to static HTML, with small, interactive “islands” of JavaScript-enabled components added only where needed. This results in incredibly fast websites with a minimal JavaScript payload. Astro is framework-agnostic, meaning you can use components from different frameworks like Vue, React, or Svelte within the same project. It is great for content-heavy sites that need a bit of interactivity.
Nuxt: Nuxt is a full-stack Vue framework. While it can be used as an SSG, its main strength lies in its ability to build complex, full-stack applications with server-side rendering, API routes, and a rich ecosystem of modules. Nuxt ships with more JavaScript by default than Astro, as its core philosophy is building a complete, cohesive application, whether it’s an SPA, SSR, or SSG.

It’s the best choice for developers already in the Vue ecosystem who need a powerful tool for building complex, interactive web applications.

FAQ

Good Practices for Web Repositories📌

Add a .gitignore and include the node_modules folder

node_modules

Add a docker ignore if you plan to build images:

#add .env files if any

Free Hosting and Free Domain

Free Hosting Options with Free domain

Firebase: Host your Next.js SSG on Firebase for scalable hosting and integrated services like authentication, database, and analytics.
Cloudflare Pages: Deploy your Next.js SSG on Cloudflare Pages for fast and secure global distribution with built-in CDN and SSL/TLS encryption.
GitHub Pages: Easily host your Next.js SSG on GitHub Pages, perfect for static sites with seamless integration with your GitHub repository.

Outro

Where to get Free SVGs for my SSG:
- https://www.svgrepo.com/svg/424489/adventure-journey-location?ref=fossengineer.com
- https://fontawesome.com/?ref=fossengineer.com
How to choose proper HEX colors:
- https://github.com/Toinane/colorpicker?ref=fossengineer.com - A mininal but complete colorpicker desktop app
  - https://colorpicker.fr/app/?ref=fossengineer.com - you can try it online as well
- https://github.com/eigenmiao/rickrack?ref=fossengineer.com - Generate harmonious colors freely.
- https://huey.design/?ref=fossengineer.com

Brand colors with F/OSS

https://colorpicker.fr/app/?ref=fossengineer.com
https://huey.design/?ref=fossengineer.com
https://leonardocolor.io?ref=fossengineer.com
- https://github.com/adobe/leonardo?ref=fossengineer.com - Generate colors based on a desired contrast ratio - Apache v2
Icons for NextJS
https://github.com/twbs/icons?ref=fossengineer.com (MIT ❤️ Licensed SVG icons)
- https://icons.getbootstrap.com?ref=fossengineer.com

npm i bootstrap-icons

Official open source SVG icon library for Bootstrap.

Look for icons with - https://github.com/antfu-collective/icones (MIT ❤️)
- https://icones.js.org/

⚡️ Icon Explorer with Instant searching, powered by Iconify

https://github.com/iconify/iconify (MIT ❤️)
- https://iconify.design/docs/iconify-icon/
- example - https://icon-sets.iconify.design/uil/bitcoin-circle/

npm install --save-dev @iconify-icon/react

Universal icon framework. One syntax for FontAwesome, Material Design Icons, DashIcons, Feather Icons, EmojiOne, Noto Emoji and many other open source icon sets (over 150 icon sets and 200k icons). SVG framework, React, Vue and Svelte components!

https://fontawesome.com/v5/search?o=r&m=free
- https://fontawesome.com/license/free
- https://github.com/FortAwesome/Font-Awesome

And more! Font Awesome works with Require.js, Rails with Turbolink, and jQuery!

https://github.com/lightvue/light-icons (MIT ❤️)
- https://icons.lightvue.org/icons

add this to your css

@import "../../node_modules/light-icons/dist/light-icon.css";

Handpicked collection of premium & light-wighted icons as font

Simply beautiful open-source icons

Icons for dashboards
- https://github.com/walkxcode/dashboard-icons?tab=readme-ov-file

FavIcons for NextJS

Just use Real Fav Icon Generator 😍 and place in the the proper folder (where the default icons are on your Theme).
Cool FavIcon with: https://favicon.io/favicon-converter/ - You can upload an image, then you will get the favicon.ico and other artifacts to make the web icons look amazing in any device.

Go to the theme folder
Add a /static folder
Add the files generated with the website

Adding addsense

Including the Google AdSense script in theof every page generated by Hugo is straightforward.

Step 1: Locate Your Header Template

In A Hugo site’s directory, navigate to the layouts folder: themes/PaperMod/layouts/partials/head.html

Find the partial template responsible for thesection of your pages.

This is commonly located in layouts/partials and might be named head.html or similar.

If you use astro, they are normally at src/layouts/BaseLayout.astro

You will add something like this script:

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890"
     crossorigin="anonymous"></script>

https://www.google.com/adsense/new/u/0/pub-1816803660718163/home https://www.google.com/adsense/new/u/0/pub-1816803660718163/privacymessaging

You also need to get the ads.txt (get it here https://www.google.com/adsense/new/u/0/pub-1816803660718163/sites/detail/url=yourwebsite.com)

to the root directory, for example in /public, with info similar to:

google.com, pub-123456789, DIRECT, abcd124fgthrk9876

Making Webs with AI

https://github.com/rapidpages/rapidpages

MIT | Generate React and Tailwind components using AI

How to setup StrapiCMS?

If you are looking from CMS, you can have a look to this post, where I setup KeystaticCMS

https://www.opensourcealternative.to/project/Strapi
- https://docs.strapi.io/dev-docs/installation/docker

Strapi CMS x Astro

Astro JS x Strapi

https://www.youtube.com/watch?v=WI-_gVBoBBg https://github.com/PaulBratslavsky/pauls-strapi-crashcourse https://github.com/JAlcocerT/pauls-strapi-crashcourse

https://github.com/strapi/LaunchPad -> https://launch-pad-roan.vercel.app/en

Official Strapi Demo application

Strapi UI

Strapi | Docker Config 🐋 ↗

https://www.youtube.com/watch?v=Ud9obEHadLI

Gatsby SSG x Ghost How to Save the Internet