Most components are Single-File Components: a .vue file with a template, a script and styles. With <script setup>, every top-level binding is usable in the template. That means each variable, function and import declared directly in the script, not inside a function.
<template>
<div>{{ message }}</div>
</template>
<script setup>
import { ref } from 'vue'
const message = ref('Hello from component')
</script>
<style scoped>
div {
color: blue;
}
</style>
To use a component inside another, register it. Local registration makes it available only to the component that registers it. In <script setup>, importing the component is enough. The Options API, Vue's older object-based style, lists it in the components option instead.
Global registration with app.component() makes a component usable in every template of the app. But the build tool cannot drop a global component from the bundle when no page uses it, a step called tree-shaking. So prefer local registration.
app.component('my-component', {
template: '<div>A custom component!</div>'
})
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
The diagram below the answer is the concept . Jump to it ↓