Vue.js Component Organization - Complete Guide

# Vue.js Component Architecture

# 1. Atomic Design Pattern
// atoms/Button.vue






# 2. Molecules - Input Group
// molecules/InputGroup.vue






# 3. Organisms - User Card
// organisms/UserCard.vue






# 4. Templates - Page Layout
// templates/PageLayout.vue






# 5. Pages - User Management
// pages/UserManagement.vue






# 6. Composables - User Management
// composables/useUsers.js
import { ref, computed } from 'vue';

export function useUsers() {
  const users = ref([]);
  const loading = ref(false);
  const error = ref(null);
  
  const userCount = computed(() => users.value.length);
  
  const admins = computed(() => 
    users.value.filter(user => user.role === 'admin')
  );
  
  const guests = computed(() => 
    users.value.filter(user => user.role === 'guest')
  );
  
  async function fetchUsers() {
    loading.value = true;
    error.value = null;
    
    try {
      const response = await fetch('/api/users');
      if (!response.ok) throw new Error('Failed to fetch users');
      users.value = await response.json();
    } catch (err) {
      error.value = err.message;
    } finally {
      loading.value = false;
    }
  }
  
  async function addUser(userData) {
    try {
      const response = await fetch('/api/users', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(userData)
      });
      
      if (!response.ok) throw new Error('Failed to add user');
      
      const newUser = await response.json();
      users.value.push(newUser);
      return newUser;
    } catch (err) {
      error.value = err.message;
      throw err;
    }
  }
  
  async function updateUser(id, userData) {
    try {
      const response = await fetch(`/api/users/${id}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(userData)
      });
      
      if (!response.ok) throw new Error('Failed to update user');
      
      const updatedUser = await response.json();
      const index = users.value.findIndex(user => user.id === id);
      if (index !== -1) {
        users.value[index] = updatedUser;
      }
      return updatedUser;
    } catch (err) {
      error.value = err.message;
      throw err;
    }
  }
  
  async function deleteUser(id) {
    try {
      const response = await fetch(`/api/users/${id}`, {
        method: 'DELETE'
      });
      
      if (!response.ok) throw new Error('Failed to delete user');
      
      users.value = users.value.filter(user => user.id !== id);
    } catch (err) {
      error.value = err.message;
      throw err;
    }
  }
  
  return {
    users,
    loading,
    error,
    userCount,
    admins,
    guests,
    fetchUsers,
    addUser,
    updateUser,
    deleteUser
  };
}

# 7. Store - Pinia State Management
// stores/userStore.js
import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
  state: () => ({
    users: [],
    currentUser: null,
    loading: false,
    error: null
  }),
  
  getters: {
    userCount: (state) => state.users.length,
    admins: (state) => state.users.filter(user => user.role === 'admin'),
    guests: (state) => state.users.filter(user => user.role === 'guest'),
    isAuthenticated: (state) => !!state.currentUser
  },
  
  actions: {
    async fetchUsers() {
      this.loading = true;
      this.error = null;
      
      try {
        const response = await fetch('/api/users');
        if (!response.ok) throw new Error('Failed to fetch users');
        this.users = await response.json();
      } catch (error) {
        this.error = error.message;
      } finally {
        this.loading = false;
      }
    },
    
    async addUser(userData) {
      try {
        const response = await fetch('/api/users', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(userData)
        });
        
        if (!response.ok) throw new Error('Failed to add user');
        
        const newUser = await response.json();
        this.users.push(newUser);
        return newUser;
      } catch (error) {
        this.error = error.message;
        throw error;
      }
    },
    
    setCurrentUser(user) {
      this.currentUser = user;
    },
    
    logout() {
      this.currentUser = null;
    }
  }
});

# 8. Component Communication Patterns
// Parent Component




# 9. Component Testing Structure
// components/__tests__/Button.test.js
import { mount } from '@vue/test-utils';
import Button from '../atoms/Button.vue';

describe('Button', () => {
  it('renders correctly', () => {
    const wrapper = mount(Button, {
      slots: {
        default: 'Click me'
      }
    });
    
    expect(wrapper.text()).toBe('Click me');
    expect(wrapper.classes()).toContain('btn');
  });
  
  it('emits click event', async () => {
    const wrapper = mount(Button);
    await wrapper.trigger('click');
    
    expect(wrapper.emitted('click')).toBeTruthy();
  });
  
  it('applies variant classes', () => {
    const wrapper = mount(Button, {
      props: { variant: 'danger' }
    });
    
    expect(wrapper.classes()).toContain('btn--danger');
  });
});

# 10. Project Structure
src/
├── components/
│   ├── atoms/
│   │   ├── Button.vue
│   │   ├── Input.vue
│   │   └── Icon.vue
│   ├── molecules/
│   │   ├── InputGroup.vue
│   │   ├── SearchBox.vue
│   │   └── Card.vue
│   ├── organisms/
│   │   ├── UserCard.vue
│   │   ├── Navigation.vue
│   │   └── DataTable.vue
│   └── templates/
│       ├── PageLayout.vue
│       └── DashboardLayout.vue
├── pages/
│   ├── Home.vue
│   ├── Users.vue
│   └── Settings.vue
├── composables/
│   ├── useUsers.js
│   ├── useAuth.js
│   └── useApi.js
├── stores/
│   ├── userStore.js
│   ├── authStore.js
│   └── settingsStore.js
├── utils/
│   ├── validators.js
│   ├── formatters.js
│   └── constants.js
└── assets/
    ├── styles/
    │   ├── main.css
    │   ├── components.css
    │   └── utilities.css
    └── images/