CMS Development

The CMS is a Nuxt 4 application that interfaces with the backend API.

Architecture

State Management (Pinia)

We use Pinia stores to manage application state.

• auth.ts: Handles login state and JWT tokens.
• blog.ts: Manages blog posts.
• projects.ts: Manages portfolio projects.

// stores/auth.ts
export const useAuthStore = defineStore('auth', {
  state: () => ({
    user: null,
    token: null
  }),
  actions: {
    async login(credentials) {
      // ...
    }
  }
})

API Integration

The useApi composable handles all requests to the backend, automatically attaching the Authorization header.

const { data } = await useApi('/admin/posts', {
  method: 'POST',
  body: newPost
})

UI Components

The CMS uses a custom design system built with TailwindCSS.

• Forms: Reusable form inputs (Input, Textarea, Select).
• Tables: Data tables with sorting and pagination.
• Modals: For confirmations and quick edits.