Skip to main content

Vue.js for Total Beginners: Build Your First App

 If you've never touched Vue.js before, this guide is for you. No assumptions, no jargon left unexplained. By the end, you'll have a working Vue app and understand why every line of code is there.

1. What even is Vue.js?

Vue is a JavaScript framework for building interactive websites. Normally, if you want a webpage to update itself (like a counter that goes up when you click a button), you write a bunch of manual code to find the element, change its text, and keep everything in sync.

Vue does that syncing for you. You just say "this number is 5" and "show this number on the page," and whenever the number changes, Vue updates the page automatically. This idea is called reactivity.

Think of it like a spreadsheet. If cell B1 says =A1 + 1, and you change A1, B1 updates itself — you don't manually retype it. Vue does the same thing for your webpage.

2. The absolute simplest Vue app (no installation needed)

You don't need to install anything to try Vue. You can just create an HTML file and load Vue from the internet.

Create a file called index.html and paste this in:

<!DOCTYPE html>
<html>
<head>
  <title>My First Vue App</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>

  <div id="app">
    <h1>{{ message }}</h1>
    <button @click="count++">Clicked {{ count }} times</button>
  </div>

  <script>
    const { createApp } = Vue

    createApp({
      data() {
        return {
          message: 'Hello, Vue!',
          count: 0
        }
      }
    }).mount('#app')
  </script>

</body>
</html>

Open that file in your browser (just double-click it). You'll see "Hello, Vue!" and a button that counts up every time you click it.

Let's break down what just happened

  • <div id="app"> — This is the "zone" Vue is allowed to control. Anything inside it, Vue can manage. Anything outside it, Vue ignores.
  • {{ message }} — Double curly braces are how you display a piece of data on the page. Vue swaps it out for the real value.
  • data() — This is where you define the pieces of information ("state") your app cares about, like message and count.
  • @click="count++" — The @click part means "when this is clicked, run this code." So every click just increases count by 1.
  • createApp({...}).mount('#app') — This creates the Vue app and tells it "attach yourself to the element with id app."

That's it. That's a real, working Vue app. Everything else you learn about Vue builds on this same idea: data goes in, Vue keeps the page updated automatically.

3. Showing and hiding things

Let's make our app a little more interesting — a message that appears and disappears.

<div id="app">
  <button @click="showMessage = !showMessage">Toggle Message</button>
  <p v-if="showMessage">👋 Peekaboo! You found me.</p>
</div>

<script>
  const { createApp } = Vue

  createApp({
    data() {
      return {
        showMessage: true
      }
    }
  }).mount('#app')
</script>
  • v-if="showMessage" — Only show this element if showMessage is true.
  • showMessage = !showMessage — Flips true to false and back again (that's what the ! does — it means "not").

Try it: click the button and watch the message appear and disappear.

4. Making a list (like a to-do list)

Most real apps show lists of things: products, messages, tasks. Vue makes this easy with v-for.

<div id="app">
  <ul>
    <li v-for="fruit in fruits">{{ fruit }}</li>
  </ul>
</div>

<script>
  const { createApp } = Vue

  createApp({
    data() {
      return {
        fruits: ['Apple', 'Banana', 'Cherry']
      }
    }
  }).mount('#app')
</script>

v-for="fruit in fruits" reads as: "for each item in the fruits list, call it fruit, and repeat this element once per item." Vue automatically creates one <li> per fruit.

Let's build a real, working to-do list

<div id="app">
  <input v-model="newTask" placeholder="Add a task...">
  <button @click="addTask">Add</button>

  <ul>
    <li v-for="(task, index) in tasks">
      {{ task }}
      <button @click="removeTask(index)">❌</button>
    </li>
  </ul>
</div>

<script>
  const { createApp } = Vue

  createApp({
    data() {
      return {
        newTask: '',
        tasks: ['Learn Vue', 'Build an app']
      }
    },
    methods: {
      addTask() {
        if (this.newTask.trim() === '') return
        this.tasks.push(this.newTask)
        this.newTask = ''
      },
      removeTask(index) {
        this.tasks.splice(index, 1)
      }
    }
  }).mount('#app')
</script>

New concepts here:

  • v-model="newTask" — This links an input box directly to a piece of data. Whatever the user types automatically becomes the value of newTask. No manual "read what's in the box" code needed.
  • methods — This is where you define functions your app can run, usually triggered by clicks. Think of data as "the nouns" (information) and methods as "the verbs" (actions).
  • this.tasks.push(...) — Adds a new item to the list. Because tasks is reactive data, the page updates itself instantly.
  • this.tasks.splice(index, 1) — Removes one item at a specific position in the list.

At this point, you have a genuinely functional to-do app in about 25 lines of code.

5. Organizing your app with "components"

Once your app grows, you don't want everything crammed into one file. Vue lets you split your UI into reusable building blocks called components — think of them like custom, reusable HTML tags you design yourself.

<div id="app">
  <task-item text="Learn Vue"></task-item>
  <task-item text="Build an app"></task-item>
  <task-item text="Show it off"></task-item>
</div>

<script>
  const { createApp } = Vue

  const app = createApp({})

  app.component('task-item', {
    props: ['text'],
    template: `<p>✅ {{ text }}</p>`
  })

  app.mount('#app')
</script>
  • app.component('task-item', {...}) — This defines a new, reusable piece called task-item.
  • props: ['text'] — This says "this component accepts a piece of data called text from whoever uses it."
  • <task-item text="Learn Vue"> — This is how you "use" the component, passing in the text prop like an HTML attribute.

Components are the foundation of how real Vue apps are built — buttons, cards, headers, forms, all as small, reusable pieces you can mix and match.

6. Ready for a real project? Use the Vue CLI

Everything so far worked in a single HTML file, which is great for learning. But real apps use a proper project setup with tools that catch your mistakes, bundle your files efficiently, and let you write .vue files (a special format that keeps HTML, JavaScript, and CSS for one component together).

To create a real project, you need Node.js installed. Then run this in your terminal:

npm create vue@latest

You'll be asked a few yes/no questions (project name, whether you want TypeScript, testing, etc.) — for your first project, it's fine to answer "No" to everything except the project name.

Then:

cd your-project-name
npm install
npm run dev

This starts a local server (usually at http://localhost:5173) where you can see your app live, and it auto-refreshes every time you save a file.

What a .vue file looks like

In a real project, each component lives in its own .vue file, structured like this:

<template>
  <div>
    <h1>{{ greeting }}</h1>
    <button @click="changeGreeting">Change greeting</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      greeting: 'Hello!'
    }
  },
  methods: {
    changeGreeting() {
      this.greeting = 'You changed me!'
    }
  }
}
</script>

<style>
h1 {
  color: teal;
}
</style>

Notice it's the exact same ideas as before (data, methods, {{ }}, @click) — just organized into three clear sections: what it looks like (template), how it behaves (script), and how it's styled (style).

7. Quick cheat sheet

Syntax What it does
{{ value }} Display a piece of data on the page
v-if="condition" Show an element only if the condition is true
v-for="item in list" Repeat an element for each item in a list
@click="doSomething" Run code when the element is clicked
v-model="value" Two-way link between an input and a piece of data
data() Where you define your app's information
methods Where you define your app's actions
props Data passed into a component from its parent

8. Where to go next

  • Try modifying the to-do list example above — add a "mark as done" button.
  • Learn about computed properties (values that automatically recalculate based on other data).
  • Explore the official Vue docs at vuejs.org — they're beginner-friendly and full of interactive examples.

The core idea to hold onto: you describe what your data looks like, and what the page should show based on that data — and Vue handles keeping the two in sync. Everything else in Vue is just more ways to apply that one idea.

Labels:

Popular posts from this blog

How to Check if Someone is Connected to Your Machine in Linux

Picture this: you glance at your system monitor and notice your CPU is humming along even though you're not running anything demanding. Or maybe your internet feels sluggish for no obvious reason. A small, uneasy thought creeps in — is someone else on my machine right now? For Linux users, this isn't something you have to wonder about. Linux ships with a powerful set of built-in tools that let you see exactly who's connected, who's logged in, and what your network is doing at any given moment. You don't need to be a security expert to use them — you just need to know where to look. This guide walks you through the practical, no-nonsense steps to check for unauthorized connections on your Linux system, with real commands you can run right now. Why Monitoring Network Connections Matters Every device on a network — including your own Linux machine — communicates using an IP address. When another device or user connects to your system, that connection shows up as a trac...
Read more

How to Set Up a Linux Web Server and Host an HTML Page Easily

Setting up a web server on Linux means spending a fair amount of time in the terminal — Linux leans heavily on the command line rather than clicking through menus, so you'll be typing out instructions more often than not.  If you're new to this, it can feel a little intimidating at first, but the good news is you don't need to become a Linux wizard overnight. A handful of core commands will get you surprisingly far. A few you'll lean on constantly: cd — move between directories ls — see what's in the current directory mkdir — create a new folder nano or vim — edit files right there in the terminal sudo — run something with administrator privileges Get comfortable with these and you'll be able to navigate around, tweak configuration files, and install software without much trouble. You don't need to memorize everything — you just need to be confident enough to follow along with clear instructions, which is exactly what this guide aims to give you....
Read more

Linux Network Troubleshooting

If you've spent any time as a sysadmin — or honestly, just as someone who's had to fix their own home network at 11pm — you know that connectivity issues are one of the most common headaches out there. The good news is that a handful of core tools and a methodical approach can take you from "why isn't this working" to a root cause pretty quickly.  This guide walks through the essentials: configuring interfaces, managing routes, and diagnosing problems when things go sideways. Configuring Network Interfaces Your network interfaces are the actual bridge between your machine and the outside world, so getting them configured correctly is step one for any kind of reliable connectivity. Doing It Manually ifconfig is the old-school, tried-and-true tool for this on Unix-like systems. To see everything currently configured, run: ifconfig -a If you need to manually set up a specific interface — assigning an IP, a netmask, and bringing it online — it looks like this: ifconf...
Read more