This is the branch for my Vue3 experimentation.

A list of 20 Vue3 projects ranging from medium to hard difficulty:

Medium Difficulty

  1. Personal Portfolio Website
    • Features: Interactive sections, reusable components, and animations.
    • Concepts: Composition API, custom directives, and transitions.
  2. Task Management App
    • Features: Add, update, delete, and reorder tasks with drag-and-drop.
    • Concepts: State management with Pinia, event handling.
  3. Weather Dashboard
    • Features: Fetch data from an API, display weather info dynamically.
    • Concepts: Fetch API, Vue Router for navigation between cities.
  4. E-commerce Product Page
    • Features: Product listing, search bar, category filters.
    • Concepts: Props, custom events, slots, and conditional rendering.
  5. Real-Time Chat App
    • Features: WebSocket-based chat between users.
    • Concepts: Realtime data handling, Vuex/Pinia for state.
  6. Interactive Quiz Application
    • Features: Timer, dynamic question loading, score calculation.
    • Concepts: Lifecycle hooks, state management, dynamic component rendering.
  7. Expense Tracker
    • Features: Add, edit, delete expenses with graphical representation.
    • Concepts: Computed properties, watch, chart.js integration.
  8. Markdown Editor
    • Features: Two-way binding, live preview of markdown.
    • Concepts: Two-way binding with v-model, third-party library integration.
  9. Recipe Finder
    • Features: Search for recipes via an API, display detailed recipe info.
    • Concepts: API integration, pagination, dynamic routes.
  10. Image Gallery
    • Features: Upload, display, and delete images with modal view.
    • Concepts: File handling, event emitters, lazy loading.

Hard Difficulty

  1. Advanced Todo App with Authentication
    • Features: Login, register, and manage todos.
    • Concepts: Vuex/Pinia, Firebase/Express.js backend, JWT authentication.
  2. Blogging Platform
    • Features: Create, edit, delete, and comment on blogs.
    • Concepts: Nested routes, API integration, SSR/SSG with Nuxt.
  3. Social Media Feed
    • Features: Infinite scrolling, likes, comments, and shares.
    • Concepts: Refs, Vue Router advanced navigation guards.
  4. Stock Portfolio Tracker
    • Features: Fetch real-time stock prices, maintain portfolio value.
    • Concepts: Vuex/Pinia, API handling with rate-limited endpoints.
  5. Music Player
    • Features: Play, pause, seek, and playlist creation.
    • Concepts: Dynamic components, event handling, Vue transitions.
  6. Kanban Board
    • Features: Drag-and-drop cards across columns.
    • Concepts: Custom directives, third-party libraries for drag-and-drop.
  7. E-commerce Storefront with Cart
    • Features: Product catalog, cart functionality, and checkout.
    • Concepts: Vuex/Pinia, nested components, responsive design.
  8. Multiplayer Game
    • Features: Real-time score tracking, WebSocket-based communication.
    • Concepts: WebSockets, Vuex/Pinia, dynamic SVG rendering.
  9. Admin Dashboard
    • Features: Analytics, data visualization, user management.
    • Concepts: Vuex/Pinia, chart.js, Vue Router.
  10. Real-Time Collaboration App
    • Features: Collaborative editing, user presence indicators.
    • Concepts: WebRTC/WebSocket, Vue Router, Pinia for state.

How to Approach These Projects:

  1. Start simple with the Composition API for better modularity.
  2. Use Pinia for state management to replace Vuex.
  3. Explore Vue Router for dynamic navigation and nested routing.
  4. Practice integrating third-party libraries like chart.js or axios.
  5. Ensure responsive design with CSS frameworks like Tailwind CSS or Vuetify.

References: