Vue Components

How it works

A component owns a piece of interface with a clear public contract. Local imports make dependencies visible and allow the build tool to include the component. The parent below renders the same card twice with different input. Reusing a component is useful when it shares behaviour or structure; splitting every single element into a component can make a simple page harder to follow.

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
• src/PacketCard.vue

Example

<script setup>
import PacketCard from "./PacketCard.vue";
</script>

<template>
  <main>
    <h1>Riverside seed swap</h1>
    <PacketCard name="Beans" /><PacketCard name="Peas" /><output data-result
      >Two packet cards</output
    >
  </main>
</template>

Expected result

Two independently rendered cards show Beans and Peas.

The parent imports PacketCard from a sibling SFC. Each instance receives its own name prop and renders ordinary HTML. This local registration works automatically with script setup. Global registration is available through app.component, but use it deliberately rather than hiding every dependency in application setup.

src/PacketCard.vue

<script setup>
defineProps({ name: { type: String, required: true } });
</script>
<template>
  <article>
    <h2>{{ name }}</h2>
  </article>
</template>