Vue.js Sample Frontend

Sample Application

Note: This is a reference implementation for external developers who want to build their own applications on top of the API. It is NOT the main frontend for end users — see Web Interface (Blade/Livewire) for the production UI.

This Vue 3 single-page application demonstrates how to consume the Inventory Management API using the published TypeScript client package (@metanull/inventory-app-api-client). It is not intended for production use by end users.

Quick Start

All commands are run from the /spa directory:

npm install          # Install dependencies
npm run dev          # Start development server
npm run build        # Build for production
npm run test         # Run tests
npm run quality-check # Full quality check

Architecture

• Views — Page-level components (list pages, detail pages)
• Components — Reusable UI elements (cards, forms, tables, display)
• Stores — Pinia stores managing data and API calls
• Router — Vue Router configuration

Integration with Laravel

Laravel serves the initial HTML shell at the /cli route. From there, Vue Router takes over client-side navigation. API calls are authenticated through Laravel Sanctum.

Documentation Sections

• Quick Reference — Developer cheat sheet
• Application Architecture — Structure and design patterns
• Page Patterns — Standardized page implementations
• Frontend Guidelines — Coding standards and testing
• Component Reference — All Vue.js components