First Vue App with Vite

Use the familiar Todo List project to understand Vue components, reactive state, and how a small Vite + Vue app fits together.

Why Vue Fits Here

Vue makes more sense once you already understand two ideas:

• why frameworks exist at all
• why tooling such as Vite appears around them

That is why this lesson comes here instead of earlier. You are not being asked to learn JavaScript, framework theory, and build tooling all at once. Instead, you are using a project you already recognise to see how Vue organises the same kind of work differently.

The Shape of the Project

In a small Vite + Vue app, the path usually feels like this:

• index.html gives the root mount point
• main.js starts the Vue app
• App.vue becomes the main component shell
• the component template renders the visible interface

`main.js` and `App.vue`

You do not need to memorise every generated file to start using Vue well. The first important distinction is simple:

// main.js
import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

That line does not build the whole application for you. It simply connects the Vue app to the root element so your component tree can render inside it.

Reactive State in Plain English

The biggest shift in a first Vue app is not the file extension. It is the data model. Instead of reaching into the DOM every time the user changes something, you store the changing values in state and let the template reflect them.

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

const newTask = ref('');
const todos = ref([
  { id: 1, text: 'Outline the Vue Todo List', done: false },
  { id: 2, text: 'Render tasks from state', done: true },
]);

function addTodo() {
  if (!newTask.value.trim()) return;

  todos.value.push({
    id: Date.now(),
    text: newTask.value.trim(),
    done: false,
  });

  newTask.value = '';
}
</script>

Rendering the Todo List from Data

In plain DOM code, you may have built list items by creating elements, appending nodes, and wiring listeners by hand. Vue still ends up producing DOM output, but the route there is calmer: the template describes what the UI should look like for the current state.

<template>
  <section class="section">
    <div class="container">
      <h1>Todo List</h1>

      <input v-model="newTask" type="text" placeholder="Add a task" />
      <button @click="addTodo">Add</button>

      <ul>
        <li v-for="todo in todos" :key="todo.id">
          &#123;&#123; todo.text &#125;&#125;
        </li>
      </ul>
    </div>
  </section>
</template>

The important part is not memorising every directive name immediately. The important part is noticing that the list is rendered from the data structure instead of being written as separate static markup.

Events and Updates

Vue does not remove events. It changes how you connect them to the interface. In a Todo List, that might mean:

• typing into an input updates reactive state
• clicking a button calls a function that changes the state
• checking a box toggles one task’s completion flag
• the template updates because the data changed

The workflow is still logical and explicit. It is just organised around the state layer instead of many scattered DOM edits.

Guided Practice

Independent Practice

Additional Resources

• Vue official quick start — the official guide to creating a Vue app with the Vite-based scaffold.
• Vite official guide — useful when you want to separate the app framework from the build tool around it.

Recap

Vue becomes much more approachable when you stop treating it like a brand-new world and instead map it onto a familiar interface. The Todo List still asks the same questions as before: what is the current task, what are the items, and what changed? Vue simply gives you a more structured way to express those answers.