Skip to content

What is Vue.js?

Vue is a JavaScript framework for building user interfaces. You describe what the page should show for a given set of data, and Vue keeps the page in sync as that data changes. Evan You created it in 2014 as a side project, and Vue 3 is the current version.

Most Vue code lives in single-file components. A .vue file keeps a component's template, script and styles together, so a search bar or a product card sits in one file you can reuse across your app. You can drop Vue into a single page with a script tag, or build a whole app with Vite and Nuxt, a full-stack framework built on Vue.

Why learn Vue.js?

Vue templates are HTML with a few extra attributes, like v-if and v-for, so your first component will look familiar if you already write HTML, CSS and JavaScript. This one renders a list from an array:

<script setup>
import { ref } from 'vue'
const jobs = ref([{ id: 1, role: 'Frontend Developer' }])
</script>

<template>
  <ul>
    <li v-for="job in jobs" :key="job.id">{{ job.role }}</li>
  </ul>
</template>

The official docs include an interactive tutorial that runs in the browser, and a switch that shows the guide in either of Vue's two styles, the Options API or the Composition API.

React has more job listings than Vue, so if getting hired fast is the goal, check what companies near you use. The core ideas you learn in Vue, like components, props and reactive state, carry over to React, Svelte and Angular.

Practice Vue.js on Frontend Mentor

Every Frontend Mentor challenge comes with a design and a brief but no set tech stack, so you can build any of them with Vue. You decide how to split the UI into components.

The Interactive card details form is a good first step: v-model ties each input to your state, and the card preview updates as you type. Job listings with filtering has you build the filtered list as a computed property, which Vue recalculates only when the filters change. The Entertainment web app shares one set of bookmarks across four pages, a natural fit for Vue Router and Pinia, two of Vue's official libraries.

Start building free

Take your Vue.js skills further

Want a more structured approach? This learning path takes you through its challenges in order, from first principles to real-world projects.

advanced

JavaScript frameworks and libraries

Using a JavaScript framework can provide many benefits. In this path, we outline core concepts and provide a sequence of challenges to help you reinforce knowledge and gain hands-on experience with your chosen framework.

Challenges to practice Vue.js with

Every challenge works with any tech stack. These are good ones to build with Vue.js, from easiest to hardest.

  • Free

    Interactive card details form

    • HTML
    • CSS
    • JS
    junior

    This fun project will be an excellent way to practice DOM manipulation and form validation while also putting your HTML and CSS skills to the test.

  • Free

    Job listings with filtering

    • HTML
    • CSS
    • JS
    intermediate

    In this challenge, you'll be using JavaScript to filter out jobs based on selected categories. We provide a local JSON file to help you practice working with JSON data.

  • Free

    Weather app

    • HTML
    • CSS
    • JS
    • API
    intermediate

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

  • Premium

    Flashcard app

    • HTML
    • CSS
    • JS
    intermediate

    Practice building interactive UI with this flashcard app. Features card flip animations, progress tracking, filtering, and study statistics.

  • Premium

    Entertainment web app

    • HTML
    • CSS
    • JS
    advanced

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

  • Premium

    Personal finance app

    • HTML
    • CSS
    • JS
    guru

    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!

View more challenges

Solutions made with Vue.js

View more solutions

Related technologies

  • What is React?

    React is a JavaScript library, created at Facebook, for building user interfaces from components. You write them in JSX, and React keeps the page in sync.

  • What is Angular?

    Angular is a TypeScript web framework from Google. It ships with routing, forms and an HTTP client, so most Angular apps follow the same structure.

  • What is TypeScript?

    TypeScript is JavaScript with syntax for types, made by Microsoft. It checks your code before it runs and compiles to plain JavaScript for any browser.

Join 1,204,908 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