Vue Study Plan

How it works

Begin with a local project and one reactive value. Next practise templates and labelled forms before splitting the view into components. Add props, events and slots only when you can explain who owns each value. Continue with cleanup, requests, routing and shared stores, then finish by testing the packet desk project. Read the older Options API form as a maintenance skill rather than rewriting every existing component first.

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, computed } from "vue";

const stage = ref(1);
const stages = ["State", "Components", "Effects", "Project"];
const topic = computed(() => stages[stage.value - 1]);
function next() {
  if (stage.value < stages.length) stage.value++;
}
</script>

<template>
  <main>
    <h1>Riverside seed swap</h1>
    <button @click="next" :disabled="stage === stages.length">
      Next study stage</button
    ><output data-result>{{ stage }}: {{ topic }}</output>
  </main>
</template>

Expected result

The next stage changes 1: State to 2: Components.

Use the example as a small progress display, not a claim of saved learning history. Explain its upper-bound guard, then reset the page and notice that the local value resets. For each study stage, keep a note of one failed prediction and the rule that corrected it.