Vue3JS-Tutorial

Welcome to the Vue3JS-Tutorial repository! This repository is a comprehensive, hands-on guide to learning Vue.js 3, the latest major version of the popular JavaScript framework for building modern web applications. Whether you are a beginner or looking to deepen your Vue 3 knowledge, this repository provides step-by-step projects, code samples, and best practices to help you master Vue 3.

Table of Contents

• About Vue.js 3
• Repository Structure
• Getting Started
• Project Overviews
  • 01_basics
  • 02_modals-project
  • 03_reaction-timer-project
  • 04_signup-form-project
  • 05_jobs-project
  • 06_dojo-blog-project
• Learning Path & Recommendations
• Advanced Vue 3 Topics
• Contribution Guidelines
• FAQ
• Troubleshooting
• Resources
• License

Advanced Vue 3 Topics

This repository is designed to take you from beginner to advanced Vue 3 developer. As you progress, consider exploring these advanced topics:

• Composition API vs Options API: Learn when and why to use each, and how to migrate code.
• Custom Composables: Create reusable logic with custom hooks for state, API calls, and more.
• Vuex & State Management: For larger apps, integrate Vuex or Pinia for centralized state management.
• TypeScript with Vue 3: Strongly type your components and composables for better maintainability.
• Testing Vue Apps: Use tools like Vue Test Utils and Jest to write unit and integration tests.
• Performance Optimization: Lazy loading, code splitting, and optimizing reactivity for large-scale apps.
• SSR & SSG: Explore Nuxt 3 for server-side rendering and static site generation.
• Accessibility (a11y): Build accessible components and follow best practices for inclusive web apps.

Contribution Guidelines

Contributions are welcome! If you have ideas for new tutorials, improvements, or bug fixes, please follow these steps:

1. Fork the repository and create your branch:

   git checkout -b feature/your-feature-name

2. Make your changes and ensure code quality and consistency.
3. Test your changes locally.
4. Submit a pull request with a clear description of your changes and the problem they solve.

Please follow the existing code style and add comments where necessary. For major changes, open an issue first to discuss your proposal.

FAQ

Q: Do I need prior experience with Vue.js to use this repository? A: No prior experience is required! The tutorials start from the basics and gradually introduce more advanced concepts.

Q: Can I use these projects for my own learning or teaching? A: Absolutely! Feel free to use, modify, or share these projects for educational purposes.

Q: How do I run a specific project? A: Navigate to the project folder, install dependencies with npm install, and start the dev server with npm run dev.

Q: What if I encounter errors or issues? A: See the Troubleshooting section below or open an issue in the repository.

Troubleshooting

Here are some common issues and solutions:

• Dependency Errors:
  • Delete node_modules and package-lock.json, then run npm install again.
• Port Already in Use:
  • Change the port in vite.config.js or stop the process using the port.
• Blank Page or Console Errors:
  • Check the browser console for errors and ensure all dependencies are installed.
• Hot Reload Not Working:
  • Restart the dev server and ensure your editor is not interfering with file watching.
• API/Data Fetching Issues:
  • Make sure the local JSON files are in the correct location and paths are correct.

If you need further help, please open an issue with detailed information about your problem.

About Vue.js 3

Vue.js 3 is a progressive JavaScript framework for building user interfaces. It introduces several new features and improvements over Vue 2, including the Composition API, improved TypeScript support, better performance, and more flexible component logic organization. Vue 3 is ideal for both small and large-scale applications.

Key Features:

• Composition API for better logic reuse
• Improved reactivity system
• Fragments, Teleport, and Suspense components
• Enhanced TypeScript integration
• Smaller bundle size and faster rendering

Repository Structure

This repository is organized into several folders, each serving a specific purpose:

01_basics/                # Basic Vue 3 concepts and syntax
02_modals-project/        # Building and managing modals
03_reaction-timer-project/# Interactive reaction timer app
04_signup-form-project/   # Form handling and validation
05_jobs-project/          # Routing, dynamic routes, and data fetching
06_dojo-blog-project/     # Blog app with advanced features
docs/                     # In-depth documentation for HTML, CSS, JS, Vite, Vue 2, Vue 3
  ├─ css.md               # CSS reference and best practices
  ├─ html.md              # HTML reference and best practices
  ├─ js.md                # JavaScript reference and examples
  ├─ vitejs.md            # Vite usage and configuration
  ├─ vue2js.md            # Vue 2 core concepts and usage
  └─ vue3jd.md            # Vue 3 core concepts and usage

Each project folder contains its own index.html, package.json, source code, and assets, allowing you to run and explore each topic independently. The docs folder provides detailed guides and references to support your learning journey and deepen your understanding of web development fundamentals and Vue.js ecosystem.

Getting Started

1. Clone the repository:

   git clone https://github.com/NhanPhamThanh-IT/Vue3JS-Tutorial.git
   cd Vue3JS-Tutorial

2. Install dependencies: Each project that uses Vite or npm has its own package.json. Navigate to the project folder and run:

   cd 02_modals-project
   npm install
   npm run dev

   Repeat for other projects as needed.

3. Open in your browser: Follow the terminal output to open the local development server in your browser.

Project Overviews

01_basics

Goal: Learn the fundamentals of Vue 3, including data binding, directives, event handling, and component basics.

• Topics Covered:
  • Vue instance creation
  • Data and methods
  • Template syntax
  • Event handling
  • Conditional rendering and lists
• Files:
  • app.js: Main JavaScript file with Vue logic
  • index.html: HTML structure
  • assets/styles/index.css: Basic styling

02_modals-project

Goal: Build a reusable modal component and learn about component communication and slots.

• Topics Covered:
  • Component creation and props
  • Emitting custom events
  • Using slots for content distribution
  • Managing modal state
• Files:
  • src/components/Modal.vue: Modal component
  • src/App.vue: Main app logic
  • src/main.js: App entry point

03_reaction-timer-project

Goal: Create an interactive reaction timer game to practice reactivity, timers, and computed properties.

• Topics Covered:
  • Reactivity and state management
  • Timers and delays
  • Computed properties
  • Passing data between components
• Files:
  • src/components/Block.vue: Clickable block for timing
  • src/components/Results.vue: Display results
  • src/App.vue: Game logic

04_signup-form-project

Goal: Build a signup form with validation, using Vue 3's form handling capabilities.

• Topics Covered:
  • Form input binding
  • Validation and error messages
  • Handling form submission
  • Component-based form structure
• Files:
  • src/components/SignupForm.vue: Signup form component
  • src/App.vue: App logic

05_jobs-project

Goal: Learn about Vue Router, dynamic routes, and fetching data from a local JSON file.

• Topics Covered:
  • Vue Router setup and navigation
  • Dynamic and nested routes
  • Fetching and displaying data
  • Error handling and 404 pages
• Files:
  • src/router/index.js: Router configuration
  • src/views/: Home, About, Jobs, JobDetails, NotFound views
  • data/db.json: Sample job data

06_dojo-blog-project

Goal: Build a feature-rich blog application using advanced Vue 3 features and best practices.

• Topics Covered:
  • Composition API and custom composables
  • Advanced component communication
  • Routing and navigation guards
  • Fetching and displaying posts
  • Error handling and loading states
• Files:
  • src/components/PostList.vue: List of blog posts
  • src/components/SinglePost.vue: Single post display
  • src/composables/: Custom hooks for fetching posts
  • src/views/: Home and Details views
  • data/db.json: Blog post data

Learning Path & Recommendations

1. Start with 01_basics to understand the core concepts of Vue 3.
2. Progress to 02_modals-project to learn about components and slots.
3. Try 03_reaction-timer-project for hands-on experience with reactivity and computed properties.
4. Move to 04_signup-form-project to master form handling and validation.
5. Explore 05_jobs-project to learn about routing and dynamic data.
6. Finish with 06_dojo-blog-project for advanced patterns and real-world app structure.

Each project builds on the previous one, gradually introducing more complex concepts and best practices.

Resources

• Vue.js 3 Official Documentation
• Vue Router
• Vite
• Awesome Vue

Documentation

Explore in-depth guides and references in the docs folder:

• HTML Documentation: Structure and best practices for HTML.
• CSS Documentation: Styling, layout, and responsive design with CSS.
• JavaScript Documentation: Core JS concepts, examples, and DOM manipulation.
• Vite Documentation: Using Vite for fast development and builds.
• Vue 2 Documentation: Vue 2 core concepts, SFCs, and lifecycle.
• Vue 3 Documentation: Vue 3 features, Composition API, and examples.

License

This repository is licensed under the MIT License. See the LICENSE file for details.

Conclusion

The Vue3JS-Tutorial repository is designed to be your comprehensive guide to mastering Vue.js 3 through practical, real-world projects. By working through each project, you will gain hands-on experience with the core and advanced features of Vue 3, preparing you to build modern, scalable web applications.

We encourage you to experiment, extend the projects, and contribute your own ideas. The Vue.js ecosystem is vibrant and constantly evolving—keep learning, stay curious, and join the community!

---

Made by NhanPhamThanh-IT. Happy coding! 🚀