Elevate your Nuxt 3 blog with Tailwind Typography and Front-matter in 2023

Introduction

👋 Hi all, in our previous article we created a starter blog in just one hour. Today, I will show you how to elevate its visual appeal by integrating Tailwind Typography and enrich its content with essential details such as the author's name and publication date using Front-matter.

This is how it will look like at the end.

Getting Started

Make sure you have a Nuxt 3 blog installed with Nuxt Content and Tailwind CSS. You can also refer to our article here to create a blog in one hour or just download the source file there to begin. Let's fire up our blog with the following command in our project and start working on it!

pnpm run dev

Tailwind Typography

We will be using the official Tailwind CSS Typography plugin that offers beautiful typography styling for our content. Install the plugin with the command below in a terminal inside your project.

pnpm install -D @tailwindcss/typography

Once completed, make sure you have the tailwind.config.ts in your project root folder or use the command below to generate it.

npx tailwindcss init

Add the plugin in your tailwind.config.ts file:

//tailwind.config.ts/** @type {import('tailwindcss').Config} */export default {  content: [],  theme: {    extend: {},  },  plugins: [    require("@tailwindcss/typography")    ],};

✨ We have now the ability to easily style our blog's content and I will show you how in a while.

Front-matter

Front-matter is a way to provide meta-data to our Markdown pages, like title or author name. These data are available when rendering the content and can hold any information that you would need. You can declare a front-matter block at the top of any .md files in the content directory with the --- identifier. Following is an example that we have created for content/sample-article.md.

//content/sample-article.md---title: Sample Articledescription: This is my first article author: SyLdate: 2023-10-05---# Sample articleHello Everyone! 👋Welcome to my first article!

Adding author's name and date

With the above front-matter, we can retrieve the data of the author's name and published date and show it in our article. As we will be manipulating the date format, we will install the moment package to assist us. Run the below command to install it:

pnpm i -D moment

We can now begin by creating an ArticleDetails.vue file under our components folder, where we will display our author's name and published date. Insert the following code inside the ArticleDetails file:

//components/ArticleDetails.vue<script lang="ts" setup>import moment from "moment";import { ParsedContent } from "@nuxt/content/dist/runtime/types";/* An article object will be passed over for us to use and it will contain our Front-matter data including the author and date. */const props = defineProps<{  article: ParsedContent; }>();// Format the article date using the moment package we installedconst publishedOn = computed(() => {  return props.article.date    ? moment(props.article.date).format("DD MMM YYYY")    : null;});</script><template>  <div class="flex justify-between gap-12 lg:justify-start">    <div v-if="article.author">      <div class="mb-1 text-sm font-medium text-gray-500">Written by</div>      <div class="text-md font-medium text-gray-900">        {{ article.author }}      </div>    </div>    <div v-if="publishedOn">      <div class="mb-1 text-sm font-medium text-gray-500">Published on</div>      <div class="text-md font-medium">        {{ publishedOn }}      </div>    </div>  </div></template>

✨ With this component all thats left to do is to add it to the article page.

Display our article details

All our articles are being handled by a catch-all route page under pages/[...slug].vue. So this is where we want to add our ArticleDetails.vue component and also style our content with Tailwind Typography. Replace the code under pages/[...slug.vue] with the following:

//pages/[...slug].vue<template>    <main class="my-20 prose max-w-5xl mx-auto"><!-- prose class will style our content beautifully with Tailwind Typography -->    <ContentDoc v-slot="{ doc }"> <!-- Component by Nuxt content to fetch and provide us our article to use as doc -->      <ArticleDetails :article="doc" class="mb-5" /> <!-- Our ArticleDetails component -->      <ContentRenderer :value="doc" /> <!-- Component by Nuxt content to render our article -->    </ContentDoc>  </main></template>

In the code above, Nuxt Content provide us with two components ContentDoc and ContentRenderer. With ContentDoc we are able to retrieve our Article data as doc variable and pass it to our ArticleDetails to use.

✨ You can now see the result at http://localhost:3000/sample-article

What's next?

Download the complete code here at Github.

Check out more related articles below!

Create a Nuxt 3 Content blog with Tailwind CSS in one hour.
Create a front page with articles listing and pagination
Add dark mode to your Nuxt 3 app in 15 mins.