A personal blogging platform built by Nuxt4 and Directus

By /

Supports comments, likes, favorites, user online or offline status, update prompts, real-time subscriptions and other functions. It’s cool

project ericdit.com-refactor the main developer supebase（Eric Dit） The core goal of the personal website project being restructured is to create a modern, content-driven blog platform with the following characteristics:

🔧Technical architecture:

  1. Nuxt 4（Vue 3 + Vite）
    • Provides front-end page rendering, routing, static generation (SSG) and other functions.
    • use pages/ Directory automatically generates routes.
    • app.vue and layouts/ Provide page layout capabilities.
  2. Directus CMS
    • A code-less content management system that serves as the content backend of the website.
    • Store data such as articles, users, comments, likes, and favorites.
    • Provides GraphQL / REST APIs for front-end access.
  3. Tailwind CSS + UnoCSS
    • Provide a flexible CSS tool system to quickly build responsive interfaces.
  4. Pinia + Nuxt UseState
    • Manage status (such as user login, comment caching, real-time updates, etc.).
  5. Socket real-time communication (may be integrated with Directus ‘WebSocket or self-built)
    • Used for online user status, comment notifications, subscription updates, etc.

💡Core functional modules:

functiondescription
Article systemUse Directus to manage article releases, drafts, label classifications, and more
Comment systemSupports user comments, replies, likes, favorites, etc., which may have nested structures
User systemLogin, registration, status display, personal page (author file)
Real-time notificationSubscribe to the system to remind users of new articles or comments
🌐SEO and PWA supportNuxt has natural SEO optimization and progressive application (PWA) capabilities

📁Project directory structure (simplified version):

/components //Reusable components, such as CommentBox, PostCard
/pages //Page views, such as/index,/blog/slug][
/layouts //Page layout
/composables //Combined functions, such as useUser, useDirectus
/plugins //Nuxt plug-ins, such as Directus API client
/assets //Pictures, styles, etc.

Usage scenario:

This project is suitable for:

  • Bloggers or creators build content platforms
  • Blog system development and learning that requires complete front-end logic
  • Learn the combined usage of Nuxt 4 + Headless CMS such as Directus

Learning suggestions:

If you want to study this project in depth, you can start with the following aspects:

  1. Run first project(Requires configuration of Directus backend)
  2. reading plugins/directus.ts Document to understand how the front end communicates with the CMS;
  3. attention components/ How to build comment and like components in;
  4. look at useUser and useAuth How to manage login status by combined functions such as:
  5. How to follow the page useAsyncData() Get content and render it.

Github：https://github.com/supebase/ericdit.com-refactor

Oil tubing:

Scroll to Top