re:Building with Nuxt Content v2

When I originally built the the Ogre Cave, it was for the purpose of learning Nuxt 2 and experimenting with Core Web Vitals (CWV). Of course, back then, I also had the full intention of practicing my writing, but the handful number of posts since then is enough proof of me not meeting my own expectations. :)

Installing nuxtjs v3 with content v2

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

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, but after finishing with the initial layout, I realized I wasn't really taking advantage of the prebuilt components. My design is simple enough that a simple CSS library would probably do the trick. I've decided to use Tailwind CSS for this. Luckily for me, there's a plugin for Nuxt that has made it easy for me to add to my project. You can add the @nuxtjs/tailwindcss dependency to your project with the following command:

pnpm i -D @nuxtjs/tailwindcss

You then add it to the modules section in your nuxt.config:

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

Installing typography plugin

The typography plugin makes simplifies typographic styling with it's set of prose classes. Install with the following command:

pnpm i -D @tailwindcss/typography

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

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

Configuring code highlighter

I write (or plan to write) a lot of code blocks, so having them color-coded is a must for me. Previously, I used PrismJS to achieve this. With the current version of Content, though, this can be configured to use Shiki as the highlighter. To enable this, I added the following to my nuxt.config.ts file:

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

Deploy using Static Site Generation

Static Site Generation (SSG) pre-renders routes of your application at build time. Since my blog doesn't need to be updated frequently, generating the entire website at build time made the most sense. However some of the routes were not being generated properly by default. To fix this I enabled the following experimental configuration:

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

From there it was pretty simple to generate and deploy. In my case I am deploying the static files in Firebase Hosting.

pnpm run generate
firebase deploy --only hosting:dev

In conclusion, rebuilding the Ogre Cave using Nuxt 3 and Tailwind CSS has been a great learning experience. I'm excited to continue experimenting with different technologies and features in the future.