2023 Step-by-Step Guide: Create a Nuxt 3 Content blog with Tailwind CSS in one hour

Introduction

👋 Welcome to my inaugural blog post, where I'm thrilled to walk you through the step-by-step journey of how I started this blog in just one hour! Stick around, and by the time you finish reading, you'll have the knowledge you need to quickly start your very own blog.

Tech stack

For our blog framework, I've chosen the powerful combination of Nuxt 3 and Nuxt Content, and for styling, we'll be harnessing the flexibility of TailwindCss 🎨. Once we've completed, we'll seamlessly deploy our blog to Vercel, ensuring fast and cost-free hosting 🚀.

Getting Started

Before getting started, do make sure to follow through the Nuxt prerequisites. Once you have installed everything, we can start a new Nuxt Content project with this command in the terminal:

npx nuxi@latest init <project-name> -t content

I recommend using "pnpm" when it ask you which package manager to use. When the install is completed, move into your project folder and run this command.

pnpm run dev

✨ Well done! We have completed the starting point for our blog and we can now start writing content using markdown! Now head over to http://localhost:3000 to see your blog.

Styling with Tailwind CSS

Now that we have our blog created, it's time to style it! 🎨 We will be using Tailwind CSS to easily style our blog. Installation is made easy with Nuxt Tailwind by running this command in your terminal.

pnpm i -D @nuxtjs/tailwindcss

When installation is completed, load the package in the nuxt.config.ts file

// nuxt.config.tsexport default defineNuxtConfig({  modules: ["@nuxt/content", "@nuxtjs/tailwindcss"],});

✨ That's it! We now have the power to style our blog and all we need to begin are some blog articles.

Create sample article

Nuxt Content reads the content directory in your project and parses .md files with the MDC syntax into web page with file name as link. So let's create a sample-article.md file in our content directory and insert the following.

//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!

✨ You have now created your first article and you can head over to http://localhost:3000/sample-article to see it.

Site layout and header

It's now time to get creative! 😎 I will add a site header on every page using Layout and this is what it will look.

Let's start by creating a layout under layouts/default.vue and insert the following code.

//layouts/default.vue<template>  <div class="min-h-screen">    <div class="container mx-auto px-4 py-8 lg:py-14">      <SiteHeader /> <!-- We will create this component next-->      <slot /> <!-- Where the main content will be -->    </div>  </div></template>

Now that we have created our layout, we need to instruct Nuxt to use it. We can do so by changing the app.vue file to the following.

//app.vue<template>  <NuxtLayout><!-- NuxtLayout will use the default.vue layout that we have created -->    <NuxtPage />  </NuxtLayout></template>

What's left is to create our Site Header under components/SiteHeader.vue and insert the following.

//components/SiteHeader.vue<template>  <header>    <div class="mx-auto w-24">      <NuxtLink to="/"> <!-- Nuxt link works like <a> tag but with optimizations -->        <img src="/images/logo.svg" alt="Logo" width="100" height="100" /> <!-- Save your image files under the public folder -->      </NuxtLink>    </div>    <p class="mx-auto my-5 max-w-xl text-center">      <h2 class="font-semibold text-xl mb-2">An open source content by         <NuxtLink class="text-orange-600" to="https://sgds.app">SGDS</NuxtLink>      </h2>      This is a starter blog created with Nuxt 3 Content and Tailwind CSS.<br/>      🌟 Check out this      <NuxtLink class="underline" to="https://sgds.app/articles/create-a-nuxt-3-content-blog-with-tailwind-css-in-one-hour">        tutorial here to learn how we build it step by step.      </NuxtLink> 🌈    </p>  </header></template>

✨ Our blog is starting to look better now!

What's next?

Download the complete code here at Github.

🎉 You have now succesfully created a Nuxt blog and you can begin to write articles or further style it with TailwindCSS.

Check out more articles below for futher optimization!

Elevate your Nuxt blog with Tailwind Typography and Front-matter.
Create a front page with articles listing and pagination
Add dark mode to your Nuxt 3 app in 15 mins.
Add table of contents to your Nuxt 3 blog in 10 mins.
Deploy your Nuxt 3 app with Vercel for free in 5 mins