Vue 3 Loader Sample - Digimon

🌐 Language / Ngôn ngữ: English | Tiếng Việt

This project is a sample Vue 3 Loader web application, demonstrating how to organize and build a modern Vue 3 project for displaying Digimon data with flexible layouts and multi-language support.

Screenshots

View the project screenshots in the screenshots directory.

Purpose

• Demonstrate a clean, scalable Vue 3 project structure.
• Practice state management, routing, and integration of popular libraries.
• Provide examples of handling mock data, internationalization (i18n), and responsive layouts for lists and details.

Main Folder Structure

• index.html: Main HTML file to launch the application.
• assets/: Contains CSS, images, JSON data, JS helpers, and supporting libraries.
• vue/: Contains Vue components, pages, and reusable components.

Key Components

• App.vue: Root component of the application.
• components/: Components such as DataFetcher, GenericList, Navbar.
• pages/: Main pages like Home, Digimons, DigimonDetail, About, NotFound, and category pages (Attributes, Fields, Levels, Skills, Types).
• stores/: State management logic.
• locales/: Internationalization (vi, en, ja, ko, de).

Technologies Used

• Vue 3
• Pinia (if used)
• Vue Router
• Axios (if used)
• Tailwind CSS (if used)

Getting Started

1. Install necessary dependencies (if using a package manager).
2. Open index.html with Live Server or a static server to view the demo.
3. Customize data in assets/data/ for testing.

Contribution

This is a sample project. You can fork and develop additional features or improve the project structure.