nuxt.jsでヘッダーを共通化できない

components下にmyheader.vueをつくりlayout下のdefault.vueで読み込みpages下のファイルにヘッダーを共通化したいのですが表示されません。

上から順に
0. myheader.vue
0. default.vue
0. about.vue(pages下のファイルの一つ)

vue
1
2<template lang="html">
3  <header>
4    <div class="link">
5      <nuxt-link to="/">
6        top
7      </nuxt-link>
8      <nuxt-link to="/about">
9        about
10      </nuxt-link>
11      <nuxt-link to="/works">
12        works
13      </nuxt-link>
14      <nuxt-link to="/posts">
15        frameworks
16      </nuxt-link>
17      <nuxt-link to="/languages">
18        languages
19      </nuxt-link>
20      <nuxt-link to="/skills">
21        contacts
22      </nuxt-link>
23      <div class="clear" />
24    </div>
25  </header>
26</template>
27
28<script>
29export default {
30  name:'Myheader'
31}
32</script>
33
34<style lang="css" scoped>
35.html{
36  margin:0;
37}
38.body{
39  margin:0;
40}
41
42.header{
43  height:50px;
44  display:flex;
45  justify-content:space-around;
46  margin:0;
47}
48
49.menu{
50  width:16%;
51  text-align:center;
52  height:44%;
53  padding:20px;
54  margin:0;
55}
56.menu:hover{
57  background-color:green;
58  opacity:0.5;
59  color:black;
60}
61</style>

vue
1<template>
2  <div>
3    <myHeader />
4    <transition
5      name="page-fade"
6      mode="out-in"
7    >
8      <nuxt />
9    </transition>
10    <the-modal>
11      <component :is="myheader" />
12    </the-modal>
13  </div>
14</template>
15<script type="text/javascript">
16  import myheader from "@/components/myheader.vue"
17  export default {
18    components:{
19      myheader
20    }
21  }
22</script>
23
24<style>
25
26</style>

vue
1<template>
2  <div>
3    <h1>about</h1>
4    <nuxt-link to="/">
5      <a class="btn">Go to Home</a>
6    </nuxt-link>
7    <nuxt-link to="/top">
8      <a class="btn">Go to top</a>
9    </nuxt-link>
10  </div>
11</template>
12<script>
13export default {
14  layout:'default',
15  data(){
16    return{
17      title:"about"
18    }
19  },
20  head(){
21    return{
22      title:this.title,
23      meta:[
24        {hid:'discription', name:'discription', content: 'My custom description'}
25      ]
26    }
27  }
28}
29</script>
30<style>
31
32</style>

FeLvi_zzz

2019/04/16 11:09

ブラウザのコンソールにエラーは出ていませんか？

TAIniko

2019/04/17 04:41

コンソールを確認したところ３つエラーがでていました commons.app.js:9750 [Vue warn]: Property or method "myheader" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties. found in ---> <Layouts/default.vue> at layouts/default.vue <Root> warn @ commons.app.js:9750 commons.app.js:9750 [Vue warn]: Unknown custom element: <myHeader> - did you register the component correctly? For recursive components, make sure to provide the "name" option. found in ---> <Layouts/default.vue> at layouts/default.vue <Root> warn @ commons.app.js:9750 commons.app.js:9750 [Vue warn]: Unknown custom element: <the-modal> - did you register the component correctly? For recursive components, make sure to provide the "name" option. found in ---> <Layouts/default.vue> at layouts/default.vue <Root>