re:Building with Nuxt Content v2

When I originally built the Ogre Cave, it was to learn Nuxt 2 and experiment with Core Web Vitals (CWV). I also had every intention of practicing my writing — but the handful of posts since then is proof enough that I didn't meet my own expectations. :)

Installing nuxtjs v3 with content v2

With the recent stable release of Nuxt 3, I decided to rebuild the site over the weekend. Creating a new Nuxt project with Content v2 is pretty straightforward. Just run the following and you have a working blog skeleton:

pnpm dlx nuxi init <content-app> -t content
cd gr-portal-app
pnpm install --shamefully-hoist

Installing tailwindcss dependency

Styling is even easier. I did a quick layout using Vuetify first, but once I finished the initial structure, I realized I wasn't really taking advantage of its prebuilt components. My design is simple enough that a lightweight CSS library would do. I went with Tailwind CSS. There's a Nuxt plugin that makes it easy to add:

pnpm i -D @nuxtjs/tailwindcss

Then add it to the modules section in nuxt.config:

export default defineNuxtConfig({
  // ...
  modules: ['@nuxtjs/tailwindcss']
  // ...
})

Installing typography plugin

The typography plugin simplifies typographic styling with its set of prose classes. Install with:

pnpm i -D @tailwindcss/typography

Then add the following to your tailwind.config.js:

module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}

Configuring code highlighter

I write (or plan to write) a lot of code blocks, so syntax highlighting is a must. Previously I used PrismJS for this. With the current version of Content, you can configure Shiki as the highlighter instead. To enable it, add the following to nuxt.config.ts:

export default defineNuxtConfig({
  content: {
    // ...
    highlight: {
      theme: 'monokai'
    }
    // ...
  }
}

Deploy using Static Site Generation

Static Site Generation (SSG) pre-renders all routes at build time. Since my blog doesn't update frequently, generating everything at build time made the most sense. However, some routes weren't being generated correctly by default. To fix that, I enabled the following experimental configuration:

export default defineNuxtConfig({
  content: {
    // ...
    experimental: {
      clientDB: true,
      stripQueryParameters: true
    }
    // ...
  }

From there, generating and deploying was simple. I deploy the static files to Firebase Hosting.

pnpm run generate
firebase deploy --only hosting:dev

Rebuilding the Ogre Cave with Nuxt 3 and Tailwind CSS was a great learning experience. Looking forward to continuing to experiment with what's next.