Learn Vue by doing various kind of projects!

A list of awesome Vue projects to help deepen your Vue knowledge and leverage your Vue coding skill.

The idea is simple: The more your do something, the better at it you become. And for programming in general, it's believed that there is no better way to become a good developer except by "get your hands dirty" - by doing a lot of coding, whether by following a tutorial or doing on your own.

Below is the list of great, free and paid, with and without instructions Vue projects that I find particularly helpful on my way of mastering Vue. I hope that you will find it helpful too. :)

• Getting started projects:

  • Vue 3 Tic Tac Toe:

    • Repo: https://github.com/codingwithjustin/vue-tictactoe
    • Instruction: https://www.youtube.com/watch?v=pFeXPWO4elk&t=5s

  • Vue 3 To do List:

    • Repo: https://github.com/johnkomarnicki/vue-3-crash-course
    • Instruction: https://www.youtube.com/watch?v=KTFH4P8unUQ
    • Demo: https://sparkling-platypus-7955f2.netlify.app/

  • Vue 3 To do List with Pinia:

    • Repo: https://github.com/iamshaunjp/Pinia-with-Vue-3
    • Instruction: https://www.youtube.com/watch?v=u0B9dysw29A

  • Weather App Build (Vue 3 & Tailwind):

    • Repo: https://github.com/johnkomarnicki/net_ninja_vue_3_weather_app
    • Instruction: https://www.youtube.com/watch?v=gUsBaB5ViAo&list=PL4cUxeGkcC9hfoy8vFQ5tbXO3vY0xhhUZ&index=1

• Intermedidate projects:

  • Build a simple Gmail clone (PAID):

    • Repo: https://github.com/Code-Pop/build-gmail-clone-with-vue-3
    • Instruction: https://www.vuemastery.com/courses/build-a-gmail-clone-with-vue3/tour-the-project/

  • Peek-a-Vue Matching Game (By Ben Hong - a Vue core team member):

    • Repo: https://github.com/bencodezen/peek-a-vue
    • Instruction: https://www.youtube.com/watch?v=WQa9-4K3me4
    • Demo: https://peek-a-vue.netlify.app/

  • Create a Vue learning page with Nuxt 3 (PAID):

    • Instruction: https://masteringnuxt.com/nuxt3/lessons
    • Tech stack: Nuxt 3, Supabase, Prisma, Stripe

  • Learn Vue by Solving Vue-mini-challenges :

    • Repo: https://github.com/webfansplz/vuejs-challenges
    • Web: https://vuejs-challenges.netlify.app/

  • Vue 3 Composition API Realworld Example App :

    • Repo: https://github.com/mutoe/vue3-realworld-example-app
    • Demo: https://vue3-realworld-example-app-mutoe.vercel.app/
    • Tech stack: TypeScript, Vite, Pinia