Getting started with Nuxt3 or Content2? Start here!

Nuxt v3 is getting more and more mature every week. Though Nuxt3 is still technically in Beta, you've probably been itching to migrate over or start new projects from scratch using Nuxt3, especially to take advantage of Vue3 and even Tailwind v3 if you're a Tailwind-buff.

Check out the Nuxt3 road map to see what they're working on next!

On the Cleavr.io side, we've increasingly seen more users deploy out Nuxt3 apps. AND... We've also been receiving some support around Nuxt3 deployments.

Because of the increasing popularity amongst our users, as well as because we've been working on a sister project for Cleavr, Feedmas.com, We decided to utilize Nuxt3 for Feedmas's marketing site. We were also thrilled to see that Nuxt/Content v2 also recently was released, and is compatible with Nuxt3, so of course had to get rolling on that new goodness as well!

After working with the new candy 🍬 from Nuxt and Content, as well as with common Nuxt3 deployment issues we've fielded at Cleavr, we wanted to provide a couple tips to get your started with your own Nuxt3 and Content2 projects!

Get started quickly with a Nuxt3 starter

One of the first places you'll go to get started with Nuxt3 is likely their Quick Start Guide. We definitely recommend reviewing this guide, especially as it is sure to be updated often in the coming days.

Though, the install wizard output may leave you wondering exactly what to do next. If you know what stack you want to start with, we recommend searching Github for some Nuxt3 starter templates. This is just to get you up and running a little bit quicker. However, don't just fork any-ol project. Be sure to review the repo to see what exactly it is you'd be installing and avoid anything suspicious.

Installing Nuxt/Content 2

Installation is easy and pretty straightforward in the Nuxt/Content Get Started Guide.

Assuming you've started with an existing project, all you have to do is (using yarn, npm and pnpm are also available):

yarn add --dev @nuxt/content

And then add the module to your nuxt.config.ts file:

import { defineNuxtConfig } from 'nuxt'
export default defineNuxtConfig({
  modules: [
    '@nuxt/content'
  ],
})

We didn't run across any issues with this part of process. It was all as smooth as butter. 🧈

Using Nuxt/Content2 basic tips

These are probably very painfully obvious tips:

• Read the guide it is sure to change and is full of helpful guidance
• The catch all slug is pages/[...slug].vue - be sure to name your page this if using the <ContentDoc> component. We missed this initially and took a couple rounds of looking at the docs before realizing the mistake.
• <ContentDoc> is pretty awesome. Like seriously awesome. This will automatically locate the /content/doc-name.md file based off the slug (page URI) - no need to have a fetch script! 🎉 Though, we did run across some URI case sensitivy issues. So, you can explicilty call a markdown page by adding the path. For example: <ContentDoc path="/guide">

Tailwind Typography

We also added Tailwind Typograpgy to our project. If you're using Nuxt/Content, we highly recommend installing Tailwind and the Typography plugin to style your converted markdown.

One of the cooler things we just wanted to point out with Typography, is that now you can easily define styles inline for prose.

Check out the list of modifiers here and be relieved. 😅

Nuxt3 deployment tips

Cleavr recently released some enhancements, including improved support for Nuxt3 and NodeJS 16 deployments. You can read more about the goodies here.

However, there are some issues that we've experienced while deploying Feedmas.com that we've also seen some of our users come across during their own deployments of Nuxt 3.

The symptoms are typically memory leaks and high-utilization of the server's processors. We've also see some build and activation failures.

The main tips that we have for deployments that seem to have resolved the majorirty of Nuxt3 deployment issues are:

1. Make sure all of your dependecies are up-to-date
2. If you are using one of the various Tailwind modules, add them to the build > transpile list in nuxt.configs.ts

For example:

build: {
        transpile: ['@heroicons/vue', '@headlessui/vue', '@tailwindcss/typography'],
    },

We hope that you find these tips helpful if you are using Nuxt3, Nuxt/Content2 and have ran into similar issues.