Vue 3: component not rendering when added with router-view

Question

I have created vue app using vue-cli and instead of html I have added my component TopBar for links and those links are not getting rendered.

App.vue

<template>
  <TopBar />
  <router-view />
</template>
<script>
import TopBar from "./components/TopBar.vue";

export default {
  components: [TopBar],
  setup() {},
};
</script>

TopBar.vue

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
</template>

This code template provided by vue create command, I just move links to TopBar.vue

am I missing anything?

Answer 1

Found the solution,

components should object {} instead of array [].

<template>
  <TopBar />
  <router-view />
</template>
<script>
import TopBar from "./components/TopBar.vue";

export default {
  components: {TopBar}, // <== here
  setup() {},
};
</script>