Vue.js Project with Atomic Design, Pinia, Vue Router, and Services

This project is a Vue.js application structured using the Atomic Design methodology, integrated with Pinia for state management, Vue Router for navigation, and a dedicated services layer for API interactions.

Table of Contents

• Project Structure
• Technologies Used
• Getting Started
  • Prerequisites
  • Installation
  • Development Server
  • Build for Production
• Key Concepts
  • Atomic Design
  • State Management (Pinia)
  • Routing (Vue Router)
  • API Services
  • Utilities
  • Testing
• Docker
• Contributing
• License

Project Structure

The src directory is organized as follows:

src/
├── components/
│   ├── atoms/      # Smallest UI elements (e.g., Button, Input, Icon)
│   ├── molecules/  # Groups of atoms forming simple components (e.g., SearchBar, CardHeader)
│   ├── organisms/  # Complex UI components composed of molecules and atoms (e.g., Navbar, ProductList)
│   └── templates/  # Page-level structures, defining content layout (e.g., DefaultLayout, AuthLayout)
├── pages/          # Page components, typically mapped to routes (e.g., HomePage, AboutPage)
├── router/         # Vue Router configuration and route definitions
├── services/       # API interaction logic (e.g., userApi, productApi)
├── store/          # Pinia stores for centralized state management (e.g., counter.js, user.js)
├── styles/         # Global styles, CSS variables, utility classes
├── utils/          # Utility functions, helpers, constants (e.g., formatters, validators)
├── App.vue         # Main application component
├── main.js         # Application entry point, Vue app initialization
└── vite-env.d.ts   # Vite environment type definitions

Technologies Used

• Vue 3: The progressive JavaScript framework.
• Vite: Next-generation frontend tooling.
• Pinia: The intuitive, type-safe, and flexible store for Vue.
• Vue Router: The official router for Vue.js.
• Axios: Promise-based HTTP client for the browser and Node.js.
• Vitest: A blazing fast unit-test framework powered by Vite.

Getting Started

Prerequisites

• Node.js (LTS version recommended)
• npm or Yarn

Installation

1. Clone the repository:

   git clone <repository-url>
   cd <repository-name>

2. Install dependencies:

   npm install
   # or yarn install

Development Server

Start the development server:

npm run dev
# or yarn dev

This will typically run the app at http://localhost:5173.

Build for Production

Build the application for production:

npm run build
# or yarn build

This command bundles the application into the dist directory.

Key Concepts

Atomic Design

This project adopts the Atomic Design methodology to organize UI components into a hierarchical structure:

• Atoms: Basic HTML elements or UI elements that cannot be broken down further (e.g., buttons, inputs, labels).
• Molecules: Groups of atoms bonded together to form a functional, reusable UI component (e.g., a search form, a navigation item).
• Organisms: More complex UI components composed of molecules and/or atoms, forming distinct sections of an interface (e.g., a header, a product card list).
• Templates: Page-level objects that place organisms into a layout, focusing on the content structure rather than the final content.
• Pages: Specific instances of templates, representing the final UI with real content.

State Management (Pinia)

Pinia is used for centralized state management. Stores are defined in the src/store directory. Components can access and modify the global state by importing and using these stores.

Example (src/store/counter.js):

// src/store/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++
    },
  },
  getters: {
    doubleCount: (state) => state.count * 2,
  },
})

Routing (Vue Router)

Vue Router handles client-side routing, allowing navigation between different views without full page reloads. Routes are defined in src/router/index.js.

API Services

The src/services directory contains modules responsible for interacting with external APIs. This separation ensures that API logic is centralized and reusable. Axios is used as the HTTP client.

Example (src/services/user.js):

// src/services/user.js
import apiClient from './index' // Your Axios instance

export default {
  getUsers() {
    return apiClient.get('/users')
  },
  // ... other user-related API calls
}

Utilities

The src/utils directory is for general-purpose utility functions, helpers, and constants that can be reused across the application.

Testing

This project uses Vitest for unit testing. Tests are located in the tests/ directory, mirroring the src/ directory structure for easy navigation.

To run all tests:

npm run test

Example test (tests/pages/Home.test.js):

// tests/pages/Home.test.js
import { describe, it, expect, beforeEach } from 'vitest'
import { mount } from '@vue/test-utils'
import { createPinia, setActivePinia } from 'pinia'
import Home from '../../src/pages/Home.vue'

describe('Home.vue', () => {
  beforeEach(() => {
    setActivePinia(createPinia())
  })

  it('renders the home page content', () => {
    const wrapper = mount(Home)
    expect(wrapper.text()).toContain('Home Page')
  })
})

Docker

This project includes a Dockerfile to containerize the application, making it easy to deploy consistently across different environments.

To build the Docker image:

docker build -t vue-atomic-app .

To run the Docker container:

docker run -p 8080:80 vue-atomic-app

The application will be accessible at http://localhost:8080.

Contributing

Feel free to contribute to this project. Please follow the existing code style and submit pull requests.

License

MIT License (You might want to create a LICENSE file if you don't have one)