Vue.js 如何在布局中使用组件

所以我开始和Nuxt玩.js.

这是我的默认设置.vue布局文件:

<template>
  <div>
    <header/>
    <nuxt/>
    <h1>Footer</h1>
  </div>
</template>

<script>
import Header from "~/components/Header.vue";

export default {
  components: {
    Header
  }
};
</script>

<style>
...
</style>

这是我的头球.vue组件文件:

<template>
<div>
<h1>Header</h1>
   <div class="links">
          <nuxt-link to="/" class="button--grey">Home</nuxt-link>
          <nuxt-link to="/about" class="button--grey">About</nuxt-link>
      </div>
</div>
</template>

<style>
.links {
  padding-top: 15px;
}
</style>

这有什么问题吗？我可以首先在布局文件中使用组件吗？我必须在其他地方单独注册新创建的组件吗？

遗憾的是，关于这方面的具体信息并不多.我怎样才能做到呢？

提前谢谢！