Component Registration and Import

Dr. Nova explains: "At NOVA LAB, every habitat module must be officially registered in the station system before it can function. Similarly, Vue components must be imported or registered before they can be used in a template."

Import in

<script setup>

The most common and recommended approach is local import in the

<script setup>

block. An imported component is automatically available in the template - no need to register it anywhere!

1<!-- MissionControl.vue -->
2<template>
3  <div class="control-panel">
4    <ModuleCard />
5    <StatusBar />
6    <AlertPanel />
7  </div>
8</template>
9
10<script setup>
11// Just import - the component is immediately available in template!
12import ModuleCard from './components/ModuleCard.vue'
13import StatusBar from './components/StatusBar.vue'
14import AlertPanel from './components/AlertPanel.vue'
15</script>

Note: in Options API (without

<script setup>

) we would need to additionally register components in the

components: {}

option. In Composition API with

<script setup>

this step is unnecessary - Vue automatically recognizes imported components.

1<!-- Options API - requires manual registration -->
2<script>
3import ModuleCard from './components/ModuleCard.vue'
4
5export default {
6  components: {
7    ModuleCard  // Registration required!
8  }
9}
10</script>
11
12<!-- Composition API <script setup> - auto-registration -->
13<script setup>
14import ModuleCard from './components/ModuleCard.vue'
15// Done! Nothing more needed.
16</script>

Global Registration

If a component is used in many places throughout the application (e.g., button, icon), you can register it globally in the

main.js

file:

1// main.js
2import { createApp } from 'vue'
3import App from './App.vue'
4import BaseButton from './components/common/BaseButton.vue'
5import BaseIcon from './components/common/BaseIcon.vue'
6
7const app = createApp(App)
8
9// Global registration - available everywhere without import
10app.component('BaseButton', BaseButton)
11app.component('BaseIcon', BaseIcon)
12
13app.mount('#app')

After global registration, the component is available in every template without needing to import:

1<!-- Any component in the application -->
2<template>
3  <BaseButton>Launch module</BaseButton>
4  <BaseIcon name="rocket" />
5</template>
6
7<script setup>
8// No need to import BaseButton or BaseIcon!
9</script>

Local vs Global - When to Use Which?

| Feature | Local import | Global registration | |-------|---------------|---------------------| | Availability | Only in the importing component | Everywhere in the app | | Tree-shaking | Yes - unused components removed from build | No - always in bundle | | Readability | Dependencies visible in

<script setup>

| Hidden dependencies | | Use case | Most components | Base, frequently used (Base*, App*) |

Vue recommendation: Use local import as the default. Only register globally base components used very frequently.

PascalCase vs kebab-case in Templates

Vue allows both naming conventions in templates:

1<script setup>
2import ModuleCard from './ModuleCard.vue'
3import StatusBar from './StatusBar.vue'
4</script>
5
6<template>
7  <!-- PascalCase (recommended in SFC) -->
8  <ModuleCard />
9  <StatusBar />
10
11  <!-- kebab-case (also works) -->
12  <module-card />
13  <status-bar />
14</template>

PascalCase is recommended in Single File Components (

.vue

) because:

• Easier to distinguish Vue components from native HTML elements

• <ModuleCard />

  is a component,

  <div>

  is HTML
• Better readability and consistency with the filename