Add component to vue.js component?

Question

JavaScript

Recently I started to study Vue.js , plus I downloaded the finished assembly , the main component in my application is App.vue:

<template>
    <div class="page">
        <PageHeader></PageHeader>
    </div>
</template>

<script>
export default {
  name: 'page'
}
</script>

<style lang="sass">

</style>

As you can see, I want to add the header.vue component to it:

<template>
  <header class="header">
      <div class="wrapper">
          <div class="header-container">
        </div>
      </div>
  </header>
</template>

<script>
export default {
    name: 'header'
}
</script>

<style lang="css">
</style>

PageHeader I registered in main.js:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './page'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
Vue.component('PageHeader',{
    template: '.header'
});
new Vue({
  el: '.page',
  router,
  template: '<App/>',
  components: { App }
})

What am I doing wrong and why is the component not being added?

Answer 1

You are doing everything wrong :)
I advise you to study Vue cli
To add a component to a component, you need to use , and already register the components themselves in the routes.
Or, to insert a separate component into a component, you need to write something like this in the parent component:

import myHeader from './header.vue'
<script>
export default {
    components: {myHeader} // и вызывать этот компонент уже как <my-header></my-header>
}
</script>

-----
In your case, the parent component should look like this:

<template>
    <div class="page">
        <page-header></page-header>   // <-не забудь изменить
    </div>
</template>

<script>
import PageHeader from './header.vue'
export default {
  name: 'page',
  components: { PageHeader  }
}
</script>