Vue Tutorial

Vue (pronounced "view") is a JavaScript framework for building user interfaces. It is known for being easy to learn: if you know HTML, CSS and basic JavaScript, you can start building with Vue in a day.

Vue was created by Evan You in 2014. Today it is used by companies such as Alibaba, GitLab and Nintendo, and by many freelancers who build dashboards and web apps for clients.

This tutorial teaches Vue 3 with the Composition API and <script setup>, which is the recommended way to write Vue today.

A First Look at Vue

Here is a small Vue component. It shows a counter that updates when you click:

<script setup>
import { ref } from "vue";

const count = ref(0);
</script>

<template>
  <h1>Hello from Karachi!</h1>
  <button @click="count++">Clicked {{ count }} times</button>
</template>

The <template> holds HTML with a few extra Vue features, and <script setup> holds the JavaScript. When count changes, Vue updates the page for you.

What You Will Learn

• What Vue is and how to create a project with create-vue and Vite
• Template syntax: showing data and binding attributes
• Reactivity with ref, reactive and computed
• Showing things conditionally and rendering lists
• Handling events and forms with v-on and v-model
• Building components with props and emits

Exercises and Quiz

Every lesson ends with an exercise, and the last lesson is a quiz on the whole tutorial.

What to Learn After Vue

You should know JavaScript well before you start. After Vue, learn Node.js for the back end, or compare Vue with React and Angular.