Trying Nuxt & VitePress

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.

Nuxt Content CMS and its ambicious roadmap (a full MIT git based CMS) was a great surprise too: https://content.nuxt.com/docs/studio/roadmap

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

Apache v2 | Portfolio template made with Nuxt 3, Nuxt Content v3, NuxtUI v3 and TailwindCSS v4

The theme brings multilanguage/i18N working out of the box!

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.

• https://docs.npmjs.com/downloading-and-installing-node-js-and-npm
• https://nodejs.org/en/download/package-manager

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

And the repo :)

#git clone https://github.com/HugoRCD/canvas
git clone https://github.com/JAlcocerT/canvas
#bun install
#bun dev #dev server
#bun generate #static proy
#bun start #prod server

sudo docker compose -f docker-compose.local.yml up -d
#sudo docker compose -f docker-compose.local.yml down

The Canvas theme was so great to me, that i decided to fork it to understand it better:

NEW repository - Canvas Fork

Testing NUXT and NUXT Content CMS for a blog

What I liked:

#make help
make install
make dev

See at localhost:3000

0. NuxtCMS integration

1. The search+tag system working together: and also during dev

2. The docker compose support out of the box: i just added the makefile

make docker-up

3. Static build and serving:

make generate
#@npx serve .output/public
#cd .output/public && python3 -m http.server 8080

only to realize that something is off…

4. Cloudflare D1 Database x NUXT CMS?

When using serverless platforms, it’s important to note that Nuxt Content v3 relies by default on SQLite for content storage.

Since these platforms do not support SQLite natively, we recommend connecting Canvas Portfolio to an external database such as:

• PostgreSQL
• Turso
• Cloudflare D1

5. Integration with Resend mail API to get leads

About Nuxt

Nuxt is a free and open-source framework (not an SSG!)

Wth 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
  • https://nuxt.com/deploy
    • https://nuxt.com/templates
    • https://nuxtjstemplates.com/

MIT | The Intuitive Vue Framework.

Nuxt and Next.js both offer full stack features but have differences reflecting their Vue and React bases, respectively.

Nuxt Full Stack Features

• Nuxt (based on Vue) provides built-in server-side rendering (SSR), static site generation (SSG), automatic routing, and zero-config TypeScript support. It includes a server framework to create APIs, handle backend logic, and fetch data from databases within the same codebase.
• It uses Vite as a bundler for fast development with hot module replacement and code splitting.
• Nuxt emphasizes convention-over-configuration, providing a modular architecture with pre-built modules for authentication, PWA support, and SEO optimization, speeding up development.
• The Nitro engine in Nuxt enables flexible deployment targets and backend functionality, supporting a full-stack experience seamlessly integrated with Vue syntax.

Overall, Nuxt excels in developer velocity for Vue-based full stack apps with intuitive setup and modularity, while Next.js offers greater flexibility, advanced React features, and scalability for complex projects.

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.

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:

1. 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.
2. 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.
3. 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 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.

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 Content CMS

If you have been finding that connecting a CMS to a SSG is hard, Nuxt Content CMS is a great option.

• https://github.com/nuxt/content

MIT | The powerful Git-based CMS designed specifically for Nuxt developers.

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.

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

Dont forget to validate the web performance:

And…VitePress SSG

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

• https://github.com/vuepress/awesome-vuepress

• https://github.com/vuejs/vitepress

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

Have a look to: https://vitepress.dev/guide/routing

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

FAQ

node_modules

#add .env files if any

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

• https://github.com/tabler/tabler-icons

• https://icons.getbootstrap.com/

• https://github.com/tabler/tabler-icons

• https://iconoir.com/

• https://github.com/iconic/open-iconic#License-1-ov-file

• https://github.com/feathericons/feather (MIT Licensed)

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.

1. Go to the theme folder
2. Add a /static folder
3. Add the files generated with the website

Adding addsense

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

1. 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

AB Testing and adsense

Experiments with Google adsense

You can plug google adsense not only to Nuxt, but to any other website you build.

google.com, pub-123456, DIRECT, abcdef123456