arrow_back Back to Guides
Integration

Build a blog with Nuxt 3 & Directus

By Conner Bachmann on April 7, 2022

Build a blog with Nuxt 3 & Directus

This guide shows you how to build a blog with Nuxt 3 and Directus step by step.

What is Nuxt 3?

Nuxt 3 is an open source framework making web development simple and powerful. With Vue 3 and experience hybrid rendering, powerful data fetching and new features. Visit the offical website.

Setup 🚀

1. Create a new Nuxt 3 project

npx nuxi init my-blog

cd my-blog/

npm install

This created your Nuxt 3 application 💚.

2. Create your Directus application here

3. Install the Directus module & a CSS framework. We use TailwindCSS in this guide.

npm install nuxt-directus @nuxtjs/tailwindcss

4. Start the development server.

npm run dev

Your Nuxt 3 application is now running at http://localhost:3000.

Configuration ⚙️

1. Update yournuxt.config.ts

Change the URL to your Directus server in the configuration and add the modules we just installed. ✨

import { defineNuxtConfig } from "nuxt3";

export default defineNuxtConfig({
modules: ["nuxt-directus", "@nuxtjs/tailwindcss"],
directus: {
url: "https://<my-project-slug>.directus.app",
},
});

Create a collection in the Directus admin dashboard 📄

Creating a Directus collection

We call this collectionblog, we can add an ID by selecting TypeGenerated UUID. Now, we check the boxdate_createdto have a date for the blog post.

Create two new fields:

Configure the Directus model

Input field:title(type string required) - Title of the Blog article. Input field:short_content(type string required) - Short description of the article content. And a textarea field:content(type string required) - Article content.

Our blog data model should look like this:

Custom fields

Configure the Directus permissions 🛑

Add the permission to see all items to the public role in the just createdblog collection.

Update roles & permissions

Go to your collection and create example items.

You are ready to code! 💻

Open your Editor (In this Guide: Visual Studio Code) and go to the directory of the Nuxt project

Delete the fileapp.vue, and create a new filepages/index.vue.

This is our new homepage.

Add the script to the page

<script setup>
const { getItems } = useDirectusItems();

const posts = await getItems({ collection: "blog" });
</script>

Now the page fetches the Blog collection items from your Directus server.

Create the page content:

<template>
<div>
<div class="px-4 py-16 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8 lg:py-20">
<div class="max-w-screen-sm sm:text-center sm:mx-auto">
<h2 class="mb-4 font-sans text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl sm:leading-none">My Directus Blog</h2>
<p class="text-base text-gray-700 md:text-lg sm:px-4">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque rem aperiam, eaque ipsa quae.</p>
<hr class="w-full my-8 border-gray-300" />
</div>
<div class="grid gap-5 lg:grid-cols-3 sm:max-w-sm sm:mx-auto lg:max-w-full" v-for="post in posts">
<div class="overflow-hidden transition-shadow duration-300 bg-white rounded">
<div class="py-5">
<p class="mb-2 text-xs font-semibold text-gray-600"></p>
<NuxtLink :to="`/articles/${post.id}`" class="inline-block mb-3 text-black transition-colors duration-200 hover:text-deep-purple-accent-700"><p class="text-2xl font-bold leading-5 text-blue-800"></p></NuxtLink>
<p class="mb-4 text-gray-700"></p>
</div>
</div>
</div>
</div>
</div>
</template>

Home Preview

Now all your blog posts will be displayed on the page, if you click on the title you will be redirect to a blank page, to fix this we create a dynamic page.

Create a new filepages/articles/[...id].vue

<template>
<div class="px-4 py-16 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8 lg:py-20">
<div class="max-w-screen-sm sm:text-center sm:mx-auto">
<h2 class="mb-4 font-sans text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl sm:leading-none"></h2>
<hr class="w-full my-8 border-gray-300" />
<p class="text-base text-gray-700 md:text-lg sm:px-4"></p>
</div>
</div>
</template>

<script setup>
const { getItemById } = useDirectusItems();
const route = useRoute();

const post = await getItemById({ collection: "blog", id: route.params.id });
if (!post) throwError("No article found, 404");
</script>

If you click on the title of an article you will be redirected to a dynamic page, which gets the id and fetches the corresponding article and renders it.

Slug page Preview

We are finished!

We created a simple and minimalistic blog using Nuxt 3 and Directus. The design can be customized at any time, this guide should only show step-by-step how to build a blog. TailwindCSS did a lot of the design work for us, the nuxt-directus module gives us a quick and easy solution to access our Directus server.

If you have questions feel free to ask on the Nuxt Discord Server or Directus Discord Server You can find the code here: https://github.com/directus/examples/tree/main/nuxt3/nuxt3-directus-blog

Interested in contributing guides like this?

Just like our software, these guides are open-source! Getting started is as easy as submitting a pull-request to our Guides repository!

Press and Media
For any press or media inquiries, feel free to reach out via our contact form and we can discuss. Contact us
Brand Assets
Use the link below to download a zip file containing of our brand guidelines, vector logo, or other resources. Download brand assets

Take back control of your data.

No spam, just important updates regarding Directus.