Frontend Architecture

The frontend is built with Nuxt 4, utilizing its powerful modular architecture and auto-import features.

Project Structure

The project follows a standard Nuxt 4 structure with some custom organization for better scalability.

app/
├── assets/           # Static assets (CSS, images, fonts)
├── components/       # Vue components (auto-imported)
│   ├── content/      # Content-specific components
│   ├── layout/       # Layout components
│   └── ui/           # Reusable UI components
├── composables/      # Vue composables (auto-imported)
├── config/           # Application configuration
├── data/             # Static data files
├── layouts/          # Page layouts
├── pages/            # File-based routing
├── plugins/          # Nuxt plugins
├── public/           # Public static files
└── utils/            # Utility functions

Tech Stack

• Framework: Nuxt 4
• Language: TypeScript
• Styling: TailwindCSS 4
• Icons: Iconify (via UnoCSS/Tailwind)
• State Management: Pinia (optional, mostly local state)
• Deployment: Cloudflare Pages

Key Concepts

Auto-imports

Nuxt automatically imports components, composables, and utilities. You don’t need to manually import them in your Vue files.

<script setup>
// useApi is auto-imported from composables/useApi.ts
const { data } = await useApi('/posts')
</script>

<template>
  <!-- Button is auto-imported from components/ui/Button.vue -->
  <Button>Click me</Button>
</template>

Data Fetching

We use a custom useApi composable that wraps Nuxt’s useFetch to provide a consistent interface for API calls.

// composables/useApi.ts
export const useApi = (url: string, options = {}) => {
  const config = useRuntimeConfig()
  return useFetch(url, {
    baseURL: config.public.apiBaseUrl,
    ...options
  })
}

SEO & Meta Tags

SEO is handled globally in app.vue and per-page using useSeoMeta.

useSeoMeta({
  title: 'My Portfolio',
  description: 'A showcase of my work',
  ogTitle: 'My Portfolio',
  ogDescription: 'A showcase of my work',
  ogImage: '/og-image.png',
  twitterCard: 'summary_large_image',
})