Qortex Nuxt Vue Frontend

A modern, production-ready Nuxt 3 + Vue 3 application template with TypeScript support.

🚀 Features

• ⚡ Nuxt 3 - The Intuitive Vue Framework
• 🎨 Vue 3 - Composition API & Script Setup
• 🔧 TypeScript - Type-safe development
• 📦 Auto-imports - Components, composables, and utilities
• 🎯 File-based Routing - Automatic route generation
• 💅 Modern CSS - With CSS variables and responsive design
• 🔥 Hot Module Replacement - Fast development experience

📋 Prerequisites

• Node.js (v18 or higher)
• npm (v9 or higher)

🛠️ Setup

Local Development (Without Docker)

Install dependencies:

npm install

Start the development server on http://localhost:3000:

npm run dev

Docker Development

Start with Docker Compose:

docker-compose up

Or using Make:

make dev

Access at http://localhost:3000

🏗️ Production

Local Build

Build the application for production:

npm run build

Preview the production build locally:

npm run preview

Docker Production

Build and run production container:

# Using docker-compose
docker-compose -f docker-compose.prod.yml up -d

# Or using Make
make prod-build

See DOCKER.md for detailed Docker instructions.

📁 Project Structure

qortex-nuxt-vue-frontend/
├── assets/          # CSS, images, fonts
│   └── css/
│       └── main.css # Global styles
├── components/      # Vue components
│   └── Welcome.vue
├── layouts/         # App layouts
│   └── default.vue
├── pages/           # File-based routes
│   ├── index.vue    # Home page
│   └── about.vue    # About page
├── public/          # Static files
├── app.vue          # Root component
├── nuxt.config.ts   # Nuxt configuration
├── tsconfig.json    # TypeScript configuration
└── package.json     # Dependencies

🎨 Customization

Styling

Global styles are located in assets/css/main.css. The template uses CSS variables for easy theming:

:root {
  --primary-color: #3b82f6;
  --secondary-color: #8b5cf6;
  /* ... more variables */
}

Configuration

Modify nuxt.config.ts to customize your application:

• Add Nuxt modules
• Configure build options
• Set up environment variables
• Customize meta tags

🐳 Docker Commands

Quick reference for Docker operations:

# Development
make dev              # Start development
make dev-build        # Build and start
make logs             # View logs

# Production
make prod             # Start production
make prod-build       # Build and start production

# Utilities
make clean            # Clean up Docker resources
make shell            # Access container shell

For detailed Docker instructions, see DOCKER.md.

📚 Learn More

• Nuxt 3 Documentation
• Vue 3 Documentation
• TypeScript Documentation
• Docker Documentation

📝 License

MIT License