Vue Introduction

How it works

Vue renders a user interface from application state. Instead of finding a paragraph and replacing its text after every change, describe what the paragraph should show. Vue tracks the reactive values used by the template and updates the relevant DOM. This first example keeps the scope deliberately small: a fictional Riverside seed-swap desk has a name and a count of available packets. No account, database or real reservation exists.

Run the code

Use a separate empty learning folder with Node 22.12+ in the 22 series. The reviewed Node version is 22.15.1. Save all files below with their exact relative paths; downloads may keep only the basename, so create src and any tests folders as listed. This project pins Vue 3.5.44 and Vite 7.3.1. Run npm install, then npm run dev and open the local address Vite prints.

Bhylu has no Vue playground. SFCs, npm imports and routing need this local project; do not paste them into the plain HTML or JavaScript editor. Apache, MySQL and changes to Bhylu server settings are not required. The application is a fictional seed-swap learning fixture.

• package.json
• index.html
• vite.config.mjs
• src/main.js
• src/App.vue
• src/style.css

Example

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

const packets = ref(6);
</script>

<template>
  <main>
    <h1>Riverside seed swap</h1>
    <p>
      Available packets: <output data-result>{{ packets }}</output>
    </p>
  </main>
</template>

Expected result

The page shows Available packets: 6.

The ref stores a value that Vue can track. Templates unwrap a top-level ref, so packets is used directly there; JavaScript reads packets.value. The page is a component, not a complete server. Vue is responsible for rendering this mounted part of the document.