FrontEnd template

This project is a comprehensive front-end starter kit built with Vue 3, Quasar Framework, and Tailwind CSS, designed to accelerate the development of modern web applications. It provides a robust foundation with pre-configured routing, state management, API integration, and internationalization capabilities.

Technologies Used

• Vue.js 3: A progressive JavaScript framework for building user interfaces.
• Quasar Framework 2: A high-performance Material Design 2 framework for Vue.js, enabling rapid development of responsive web, mobile, and desktop applications.
• Tailwind CSS 3: A utility-first CSS framework for rapidly building custom designs.
• Pinia: The official state management library for Vue.js, providing a simple and intuitive API.
• Vue Router 4: The official router for Vue.js, enabling declarative routing.
• Axios: A promise-based HTTP client for making API requests.
• Vue I18n: Internationalization plugin for Vue.js.

Features

• Authentication Module: Ready-to-use API integration for user authentication (src/api/auth.js, src/components/auth/OAuthButtons.vue).
• Modular API Services: Organized API calls for various resources (src/api/).
• Reusable UI Components: A collection of basic and complex components (src/components/basic/, src/components/icons/).
• Layouts: Pre-defined layouts for different sections of the application (e.g., MainLayout, OnboardingLayout, VerificationLayout in src/layouts/).
• State Management: Centralized state management using Pinia stores (src/stores/).
• Routing: Configured Vue Router with middleware for navigation control (src/router/).
• Internationalization (i18n): Support for multiple languages (src/i18n/).
• Utility Functions: Helper functions and composables for common tasks (src/utils/, src/composables/).
• Asset Management: Organized assets including images and icons (src/assets/, public/icons/).

Setup and Installation

To get started with this project, follow these steps:

1. Clone the repository:

   git clone [repository-url]
   cd [project]

2. Install dependencies: Use your preferred package manager:

   yarn install
   # or
   npm install

Running the Project

Development Mode

To run the app in development mode with hot-code reloading and error reporting:

npm run dev

This will typically start the development server at http://localhost:8080.

Production Build

To build the app for production, which will generate optimized and minified assets in the dist directory:

npm run build

Project Structure Overview

.
├── public/                 # Static assets (favicon, manifest, icons)
├── src/
│   ├── api/                # API service modules (auth, users)
│   ├── assets/             # Static assets (images, icons)
│   ├── boot/               # Quasar boot files (axios, i18n, head)
│   ├── components/         # Reusable Vue components (auth, basic, icons, layout, skeletons)
│   ├── composables/        # Vue 3 Composition API functions
│   ├── css/                # Global CSS and Quasar variables
│   ├── data/               # Static data files
│   ├── i18n/               # Internationalization files and locales
│   ├── layouts/            # Application layouts
│   ├── pages/              # Vue pages/views
│   ├── router/             # Vue Router configuration and middleware
│   ├── stores/             # Pinia state management stores
│   ├── utils/              # Utility functions
│   └── App.vue             # Main application component
├── quasar.config.js        # Quasar CLI configuration
├── tailwind.config.js      # Tailwind CSS configuration
├── postcss.config.cjs      # PostCSS configuration
├── package.json            # Project dependencies and scripts
└── README.md               # This file

Customization

For detailed configuration options for Quasar, refer to the official documentation:

• Configuring quasar.config.js
• Tailwind CSS Documentation

License

This project is open-sourced under the MIT License.