Skip to content
Use casesVue projects

Master Vue.js with real-world projects

Transform your Vue knowledge into job-ready skills through hands-on projects. Build modern Vue applications with professional designs, practice components and reactivity, and get feedback from the Frontend Mentor community.

Start building free

Join 1,100,577 developers building projects, reviewing code, and helping each other improve.

Testimonials

"I highly recommend Frontend Mentor. Skip the search for project ideas and dive into ready-made challenges that help you level up as a developer."

Kevin PowellWeb Developer & YouTuber

"Frontend Mentor is a win-win. You can sharpen your skills building websites and add finished projects to your portfolio to help land a job!"

Jessica ChanWeb Developer & YouTuber

Learn Vue by building, not just watching

Frontend Mentor provides realistic project briefs that allow you to practice Vue on real-world UI challenges. Build anything from simple components using Vue's reactive data to full applications with Vue Router and state management. Compare your solutions, get community feedback, and ship portfolio-ready Vue projects that demonstrate your skills to potential employers.

How to start building Vue projects

  1. Pick a project below that matches your current skill level.

  2. Build it from scratch—don’t just copy-paste code. Make it your own.

  3. Push to GitHub and share your work.

  4. Iterate: Add features, refactor your code, try different approaches.

  5. Want feedback? Submit your project for community review on Frontend Mentor.

Beginner Vue projects

Start with simple Vue components to learn the fundamentals of Vue's template syntax, reactive data, and component props. These projects help you understand Vue's reactivity system and component architecture while building interactive UIs. Perfect for developers transitioning from vanilla JavaScript or starting their Vue journey.

  • Free

    Results summary component

    • HTML
    • CSS
    1newbie

    This challenge has something for everyone. It’s a HTML and CSS only project, but we’ve also provided a JSON file of the test results for anyone wanting to practice JS.

  • Free

    Social links profile

    • HTML
    • CSS
    1newbie

    In this small project, you'll build out your social link-sharing profile. You can even personalize it and use it to share all your social profiles!

  • Free

    FAQ accordion

    • HTML
    • CSS
    • JS
    1newbie

    In this challenge, you'll build an FAQ accordion. This is an extremely common front-end pattern, so it's an excellent opportunity to get some practice in!

  • Free

    Interactive rating component

    • HTML
    • CSS
    • JS
    1newbie

    This is a nice, small project to practice handling user interactions and updating the DOM. Perfect for anyone who has learned the basics of JavaScript!

  • Free

    Expenses chart component

    • HTML
    • CSS
    • JS
    2junior

    In this challenge, you'll create a bar chart component from scratch. We provide a local JSON file, so you can add the chart data dynamically if you choose.

Intermediate Vue projects

Level up with computed properties, watchers, lifecycle hooks, and API integration in Vue. These projects demonstrate your ability to manage component communication, work with external data, and build fully-functional Vue applications with proper state management and event handling patterns.

  • Free

    Advice generator app

    • HTML
    • CSS
    • JS
    • API
    2junior

    The perfect project if you're learning how to interact with 3rd-party APIs. This challenge uses the Advice Slip API to generate random quotes of advice.

  • Free

    Newsletter sign-up form with success message

    • HTML
    • CSS
    • JS
    2junior

    This will test your skills with basic form structure, validation, and submission. The success state will also be an excellent opportunity to work with DOM manipulation.

  • Free

    Time tracking dashboard

    • HTML
    • CSS
    • JS
    2junior

    A perfect opportunity to practice your CSS Grid skills. For anyone wanting to take it up a notch, we provide a JSON data file to practice working with data.

  • Free

    Tip calculator app

    • HTML
    • CSS
    • JS
    2junior

    This small app is perfect for anyone starting to get to grips with JavaScript. The calculator functionality will be a nice test!

  • Free

    Mortgage repayment calculator

    • HTML
    • CSS
    • JS
    2junior

    This mortgage calculator is an excellent project for practicing working with forms, client-side validation, and updating the DOM. Remember to focus on accessibility, too!

  • Premium

    GitHub user search app

    • HTML
    • CSS
    • JS
    • API
    2junior

    In this project, you'll use the GitHub users API to pull profile data and display it. It's a great challenge if you're looking to practice working with a 3rd-party API.

  • Free

    Product list with cart

    • HTML
    • CSS
    • JS
    2junior

    Practice updating the UI in multiple places based on user actions. The starter download also includes a JSON file to help you practice populating the DOM dynamically.

  • Free

    Contact form

    • HTML
    • CSS
    • JS
    2junior

    Building accessible forms is a crucial task for front-end developers. This challenge will help you practice building a form with several input types and validation.

  • Free

    Conference ticket generator

    • HTML
    • CSS
    • JS
    2junior

    In this challenge, you'll create a form that generates a ticket. There's a lot of scope for customizing the generated ticket and putting your own stamp on the project.

  • Premium

    Character counter

    • HTML
    • CSS
    • JS
    2junior

    This project will test a range of your skills, especially your JavaScript, with the counters and letter density graph. The theme switcher is another little challenge.

  • Free

    Weather app

    • HTML
    • CSS
    • JS
    • API
    3intermediate

    Build a responsive weather app with search functionality, unit conversion, and detailed forecasts using the Open-Meteo API.

  • Premium

    Password generator app

    • HTML
    • CSS
    • JS
    3intermediate

    This app will be an excellent test of your HTML, CSS, and JS skills. You'll build custom form controls and use JavaScript to generate random passwords.

  • Free

    Interactive comments section

    • HTML
    • CSS
    • JS
    3intermediate

    This is project will put your JavaScript skills to the test. We provide a JSON file to pull the data, but it's also a perfect project to build as a full-stack CRUD app!

  • Free

    Calculator app

    • HTML
    • CSS
    • JS
    3intermediate

    This calculator app will be a great test of your CSS and JS skills especially. If you're wanting to practice using Grid, this challenge will be perfect for you!

  • Free

    Todo app

    • HTML
    • CSS
    • JS
    3intermediate

    The classic todo app with a few twists! This app includes a dark/light theme toggle and drag & drop reordering for anyone wanting an extra test.

Advanced Vue projects

Challenge yourself with Vue Router, state management, Composition API, and performance optimization. These projects showcase advanced Vue patterns, including composables, provide/inject, and teleport, as well as building a scalable application architecture that impresses employers.

  • Free

    REST Countries API with color theme switcher

    • HTML
    • CSS
    • JS
    • API
    4advanced

    If you're wanting to test your JavaScript skills this is the challenge for you. Use whichever JS framework you prefer and pull data from the REST Countries API.

  • Premium

    Personal blog

    • HTML
    • CSS
    • JS
    3intermediate

    This multi-page personal blog project has a JSON file to practice working with dynamic data. You can even use a headless CMS to take the difficulty up a notch!

  • Premium

    Frontend Quiz app

    • HTML
    • CSS
    • JS
    3intermediate

    This app will test your skills (as well as your knowledge!) as you build out a fully functional quiz. We provide a local JSON file to help you practice working with JSON!

  • Premium

    Devjobs web app

    • HTML
    • CSS
    • JS
    4advanced

    Build a jobs board that pulls data from a local JSON file. This is a great opportunity to practice JS and get to grips with a framework/library of your choice!

  • Free

    Multi-step form

    • HTML
    • CSS
    • JS
    4advanced

    An excellent test for your form-building and JS skills, this project will pose many challenges along the way to completion.

  • Premium

    Bookmark manager app

    • HTML
    • CSS
    • JS
    4advanced

    Build a fully-functional bookmark manager with add, edit, archive, search, and filter features. Perfect for practicing forms and state management.

  • Premium

    Mood tracking app

    • HTML
    • CSS
    • JS
    4advanced

    Building this app will be a fun way to test a range of your skills. From working with JSON data to logging and charting mood entries, there's a lot to get stuck into!

  • Premium

    Pomodoro app

    • HTML
    • CSS
    • JS
    4advanced

    This Pomodoro app will provide some tricky challenges, including building a circular progress bar. You'll also build a range of customizations, like colors and fonts.

  • Premium

    Entertainment web app

    • HTML
    • CSS
    • JS
    4advanced

    This multi-page entertainment web app will have you working with JSON data, routing, state management, and search functionality.

  • Free

    Rock, Paper, Scissors game

    • HTML
    • CSS
    • JS
    4advanced

    This challenge will test your HTML, CSS and JavaScript skills. There's even a Rock, Paper, Scissors, Lizard, Spock version if you really want to challenge yourself.

  • Premium

    Hangman game

    • HTML
    • CSS
    • JS
    4advanced

    This project is a great all-around test. You'll need good HTML to ensure accessible navigation. There are many tricky CSS details, and the game logic will test your JS.

  • Premium

    Connect Four game

    • HTML
    • CSS
    • JS
    4advanced

    Your JS knowledge will be challenged in this fun project, where you'll build a two-player game. You'll write the logic for the game and how to test for win conditions.

  • Premium

    Tic Tac Toe game

    • HTML
    • CSS
    • JS
    3intermediate

    This classic practice project for web developers is a great exercise to complete. It will test your HTML semantics, your grid layout skill, as well as your JS logic.

  • Premium

    Memory game

    • HTML
    • CSS
    • JS
    4advanced

    This project will be an excellent test for your HTML, CSS, and JS skills! You'll be building a fun memory game where players try to match pairs.

  • Premium

    Note-taking web app

    • HTML
    • CSS
    • JS
    4advanced

    This project has many fun and challenging features to add, including color and font themes. It can also be built as a full-stack web app!

  • Premium

    Link-sharing app

    • HTML
    • CSS
    • JS
    5guru

    In this project, you'll build a fully-functional link-sharing app for developers! You'll practice working with image uploads, repeater fields, drag-and-drop, and more!

  • Premium

    Product feedback app

    • HTML
    • CSS
    • JS
    5guru

    This will be a perfect portfolio piece! You'll be working with JSON, managing state, and building like a real-world app. You can even create it as a full-stack project!

  • Premium

    Audiophile e-commerce website

    • HTML
    • CSS
    • JS
    5guru

    This huge e-commerce challenge will provide an incredible test for your front-end skills. Once you're done, you'll have an amazing project to add to your portfolio!

  • Premium

    Invoice app

    • HTML
    • CSS
    • JS
    5guru

    This invoicing app project will test you on many levels. You'll be working with JSON data, managing state, plus a lot more. You can even build it out as a full-stack app!

  • Premium

    Personal finance app

    • HTML
    • CSS
    • JS
    5guru

    This app contains 5 pages (Overview, Transactions, Budgets, Pots, and Recurring Bills) and includes a lot of tricky elements. You can also build it as a full-stack app!

  • Premium

    Kanban task management web app

    • HTML
    • CSS
    • JS
    5guru

    In this project, you'll build a fully-functional task management app with a light/dark mode toggle. We provide a JSON file, so you can practice working with JSON data.

Why Frontend Mentor for Vue projects?

We're not just another tutorial site. Our approach is proven to help developers build real skills that translate directly to job requirements.

  • Professional designs included

    Skip the design phase and focus on coding. Every project comes with Figma files and style guides from professional designers.

  • Code reviews & feedback

    Get constructive feedback from our community of 1,000,000+ developers. Learn best practices and improve your code quality.

  • Portfolio-ready projects

    Every completed project can be added to your portfolio with live demos and GitHub repos that impress recruiters.

Frequently Asked Questions

  • What Vue projects should beginners start with?

    Begin with single-component projects that focus on Vue's template syntax, data properties, and methods. Build interactive UI elements, such as accordions, tabs, or rating components, that teach fundamental Vue concepts without overwhelming complexity. Avoid projects requiring Vue Router, Pinia, or the Composition API initially. Each project should introduce 1-2 new Vue concepts while reinforcing template syntax and reactivity. Progress to computed properties and watchers only after mastering basic reactive data and event handling.

  • Should I learn Vue 2 or Vue 3?

    Learn Vue 3 exclusively. Vue 2 reached end-of-life in December 2023 and no longer receives updates. Vue 3 offers better performance, improved TypeScript support, and modern features like the Composition API. All new projects use Vue 3. All documentation focuses on Vue 3. Employers expect Vue 3 knowledge. Learning Vue 2 wastes time on deprecated patterns. Start with Vue 3's Options API for easier learning, then explore the Composition API once you're comfortable with Vue fundamentals. Don't let outdated tutorials confuse you—verify everything uses Vue 3.

  • How many Vue projects do I need for my portfolio?

    Quality over quantity: 3-5 well-built Vue projects outperform 10 basic ones. Hiring managers look for diversity in your portfolio—show different Vue features and patterns. Include one project that demonstrates component composition and reactivity, another that showcases Vue Router and API integration, and a complex one that utilizes Pinia state management or the Composition API. Each should have clean code, proper error handling, loading states, and a responsive design. Deploy all projects and include thoughtful READMEs that explain your architectural decisions and the challenges you've solved.

  • Should I learn Vue or React?

    Both are excellent choices. Vue has a gentler learning curve with clearer documentation, making it ideal for beginners. React has a larger job market and community. If you're new to frameworks, Vue's approachable syntax and comprehensive official guide make learning easier. If your goal is maximum job opportunities, React currently dominates. However, learning one framework deeply teaches concepts that transfer to others. Choose based on your situation: Vue for an easier start and an excellent developer experience, React for more job options. Many successful developers know both—you can always start with one and add the other later.

  • What makes a Vue project portfolio-worthy?

    Portfolio-worthy Vue projects demonstrate production-ready thinking, not just the completion of tutorials. They feature proper component architecture with single-file components, computed properties for derived state, and appropriate use of reactivity. Custom composables (if using Composition API) encapsulate reusable logic. Error handling and loading states provide an excellent user experience. Code is organized logically with a clear folder structure. Props are properly typed and validated. Performance optimizations, such as v-memo or lazy loading, demonstrate an advanced understanding. Deploy with proper configuration. Most importantly, projects should solve real problems with professional UI design—this is where Frontend Mentor projects excel.

  • Should I use Options API or Composition API in Vue?

    Begin with the Options API to learn the fundamentals of Vue. It's more structured, easier to understand, and maps directly to Vue's mental model. Build 5-7 projects with the Options API until Vue's reactivity and component patterns feel natural. Then explore Composition API, which offers better code organization for complex components and easier logic reuse through composables. Both are valid—Vue 3 supports both indefinitely. The Options API isn't deprecated or inferior. For portfolios, demonstrate your knowledge of both by using the Options API in some projects and the Composition API in others. This versatility shows adaptability.

  • Do I need to learn Pinia or Vuex for Vue projects?

    Not initially. Vue's built-in reactivity, props, and provide/inject handle state management for most applications. Learn these thoroughly first. Build 5-10 Vue projects using only component state and props. Once you hit limitations with prop drilling or complex shared state, then learn Pinia (not Vuex—Pinia is the official recommendation and simpler). Many production apps never need global state management. Employers value developers who choose appropriate tools rather than adding complexity unnecessarily. Start simple, add Pinia only when your project clearly needs it.

Join 1,100,577 people building portfolio-worthy projects

Our highly supportive, positive community is here to help you improve your skills. We all try to help each other out wherever possible. We’d love to welcome you to our community!

Log in

Related pages

JavaScript projects

Learn JavaScript by building real projects. From beginner-friendly mini projects and API work all the way up to fully-functional multi-page web apps.

React projects

Build portfolio-worthy React applications with professional designs. Practice hooks, state management, and component architecture while solving real coding challenges.