Skip to content

01-frontend.md

Latest commit

 

History

History
80 lines (61 loc) · 1.86 KB

01-frontend.md

File metadata and controls

80 lines (61 loc) · 1.86 KB
Raw

Frontend Development with Vue 3

This section covers building the frontend application using Vue 3, TypeScript, and modern tooling.

Technology Stack

  • Vue 3: Progressive JavaScript framework
  • TypeScript: Type-safe JavaScript
  • Vite: Fast build tool and dev server
  • Vue Router: Client-side routing
  • Pinia: State management
  • Axios: HTTP client for REST API calls
  • Apollo Client: GraphQL client

Project Structure

frontend/
├── src/
│   ├── views/          # Page components
│   ├── components/     # Reusable components
│   ├── stores/         # Pinia stores
│   ├── types/          # TypeScript type definitions
│   ├── App.vue         # Root component
│   └── main.ts         # Application entry point
├── package.json        # Dependencies and scripts
├── vite.config.ts      # Vite configuration
└── index.html          # HTML template

Key Features

1. Modern Vue 3 Setup

  • Composition API with <script setup>
  • TypeScript integration
  • Single File Components (SFC)

2. API Integration

  • REST API calls using Axios
  • GraphQL queries using Apollo Client
  • Proxy configuration for development

3. Routing

  • Vue Router 4 with history mode
  • Route-based code splitting
  • Navigation guards

Development Commands

# Install dependencies
cd frontend && npm install

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

API Integration Examples

REST API Call

const response = await axios.get('/api/users')
const users = response.data

GraphQL Query

const { result } = await useQuery(GET_USERS)
const users = result.value?.users || []

Next Steps

Continue to Backend Development to learn about the Golang API server.