Nuxt Component Structure for Small Projects

Even small projects benefit from thoughtful organization. Here's how I structure Nuxt portfolio projects to stay maintainable as they grow.

The Problem

Portfolio projects tend to start simple and grow organically. Without structure, you end up with:

• Giant components doing too much
• Styles scattered everywhere
• Hard-coded data mixed with logic
• Difficulty finding and updating content

My Approach

1. Section-Based Components

Break the page into logical sections:

components/
├── pro/
│   ├── ProHero.vue
│   ├── ProAbout.vue
│   ├── ProProjects.vue
│   ├── ProSkills.vue
│   └── ProContact.vue
├── common/
│   ├── ThemeToggle.vue
│   └── LanguageSelector.vue
└── layout/
    └── ModeSwitcher.vue

Each section is self-contained with its own:

• Template structure
• Scoped styles
• Local state if needed

2. Separate Data from Components

Move content into data files:

// data/projects.ts
export const projects = [
  {
    title: "Project Name",
    description: "Project description",
    tech: ["Nuxt", "Three.js"],
    link: "https://github.com/..."
  }
]

Then import in components:

<script setup>
import { projects } from '~/data/projects'
</script>

This makes updates easier—change data in one place, not scattered through templates.

3. Composables for Shared Logic

Create reusable composables:

// composables/useLanguage.ts
export function useLanguage() {
  const language = ref('en')
  
  const setLocale = (locale) => {
    language.value = locale
  }
  
  return { language, setLocale }
}

4. Style Organization

Use CSS variables for theming:

:root {
  --bg: #0b0b0f;
  --text: #f6f7fb;
  --primary: #00c853;
}

:root[data-theme="light"] {
  --bg: #f5f7fb;
  --text: #111827;
}

Components stay clean by referencing variables:

.section {
  background: var(--bg);
  color: var(--text);
}

Benefits

This structure provides:

• Easy updates: Change content in data files
• Reusability: Share composables and components
• Maintainability: Find things quickly
• Scalability: Add sections without breaking existing code

When to Refactor

Start simple. Refactor when:

• A component exceeds 200 lines
• You're duplicating logic
• Finding things takes too long
• Adding features feels difficult

Conclusion

Good structure doesn't mean over-engineering. It means organizing code so future you (or collaborators) can work efficiently. Start with clear separation, add abstraction only when it provides value.