Newzen Blog

A powerful Nuxt module for managing blog content with built-in SQLite database integration using Drizzle ORM.

• ✨  Release Notes

Features

• 📝  Blog management with SQLite database
• 🗄️  Database migrations with Drizzle ORM
• 🔌  Server-side API for blog content
• 🎯  Composable useNewzenBlog for easy access
• 🛠️  CLI tool for database migrations

Quick Setup

Install the module to your Nuxt application with one command:

npx nuxt module add newzen-blog

That's it! You can now use Newzen Blog in your Nuxt app ✨

Configuration

export default defineNuxtConfig({
  modules: ['newzen-blog'],
  newzenBlog: {
    dbPath: './database.sqlite',
    projectMigrationsDir: './drizzle'
  }
})

Usage

Use the useNewzenBlog composable in your components:

const { getAllBlogs } = await useNewzenBlog()

Access getAllBlogs via the API endpoint:

GET /api/blogs

CLI Usage

The module includes a CLI tool for managing database migrations.

Basic Command

Run migrations with default settings:

newzen-blog-migrate

This will:

1. Generate SQL migration files from the schema
2. Execute the migrations to update the database
3. Create a SQLite database at ./blog.db (default location)

Custom Database Path

Specify a custom database file location:

newzen-blog-migrate ./path/to/database.sqlite

Custom Migrations Folder

Specify a custom migrations folder location:

newzen-blog-migrate ./database.sqlite ./drizzle

Full Example

# Create/migrate database in a custom location
newzen-blog-migrate ./data/blog.sqlite ./drizzle

How It Works

Module Workflow Overview

The Newzen Blog module operates in three main phases:

Phase 1: Module Setup (Installation & Configuration)

1. Install module via nuxt module add
   ↓
2. Configure in nuxt.config.ts with dbPath and projectMigrationsDir
   ↓
3. Module registers:
     - Server plugin (initializes database connection)
     - Client plugin  
     - Server handler (/api/blogs endpoint)
     - useNewzenBlog composable

Phase 2: Database Initialization (CLI)

When you run newzen-blog-migrate:

1. Read database schema definition (src/runtime/server/db/schema.ts)
   ↓
2. Compare schema with existing migrations using Drizzle Kit
   ↓
3. Generate new SQL migration files (DDL scripts)
   ↓
4. Connect to SQLite database file
   ↓
5. Execute migrations sequentially
   ↓
6. Track completed migrations in migrations table
   ↓
7. Close database connection safely

Database Schema:

• blogs table: Stores blog content with id, title, slug, content, and createdAt

Phase 3: Runtime (Your Application)

On Server Side:

1. Database connection pool initialized via server plugin
   ↓
2. When request comes to GET /api/blogs
   ↓
3. Server handler queries all blogs from database
   ↓
4. Returns safe formatted JSON response

On Client Side:

1. Use composable in your component:
   const { getAllBlogs } = useNewzenBlog()
   ↓
2. Call getAllBlogs() to fetch from /api/blogs
   ↓
3. Component receives blog data for rendering

Data Flow Diagram

┌─────────────────────────────────────────────────────────┐
│  Your Nuxt Application                                   │
│  ┌───────────────────────────────────────────────────┐  │
│  │  Component (app.vue)                              │  │
│  │  ├─ useNewzenBlog() → getAllBlogs()              │  │
│  │  └─ Makes HTTP request to /api/blogs             │  │
│  └──────────────────────┬────────────────────────────┘  │
└─────────────────────────┼────────────────────────────────┘
                          │ GET /api/blogs
                          ↓
        ┌─────────────────────────────────┐
        │  Newzen Blog Module             │
        │  ┌─────────────────────────────┐│
        │  │ Server Handler              ││
        │  │ /api/blogs endpoint         ││
        │  └────────────┬────────────────┘│
        └───────────────┼──────────────────┘
                        │ Query
                        ↓
        ┌─────────────────────────────────┐
        │  SQLite Database                │
        │  ┌─────────────────────────────┐│
        │  │ blogs table                 ││
        │  │ (id, title, slug, content)  ││
        │  └─────────────────────────────┘│
        └─────────────────────────────────┘

Key Components

• Module (src/module.ts): Registers all plugins, handlers, and composables
• Database (src/runtime/server/db/): Initializes SQLite connection and manages migrations
• Schema (src/runtime/server/db/schema.ts): Defines blog data structure
• API Handler (src/runtime/server/api/blogs/index.get.ts): Serves blog data over HTTP
• Composable (src/runtime/app/composables/useNewzenBlog.ts): Client-side interface for fetching blogs
• CLI (src/bin/cli.ts): Command-line tool for database setup and migrations

Contribution

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release