Adding components to default vue-cli webpack app

Question

For the sake of reproducibility: First, I created a default project using vue-cli like so:

npm install -g vue-cli
vue init webpack spa
cd spa
npm install
npm run dev

From there I decided to start by replacing the Vue logo with an app-header component. I wrote the code like so:

I first created AppHeader.vue in the components folder and gave it a template, export script, and empty style for good measure. It has an element (I've tried with and without it). I imported the AppHeader component in App.vue and used it in the template.

It doesn't show up. The only thing I see is the HelloWorld component in the router-view.

I think I covered all my bases, but does anyone see something I missed?

cmertayak cmertayak · Accepted Answer · 2018-02-13T23:09:12

You need to include the component in the file App.vues export statement wrapped as components object. Also remove el and name on AppHeader.vue. Then it must be all good to go.

App.vue:

export default {
  name: 'App',
  components: {
    AppHeader
  }
}

AppHeader.vue:

export default {
  data() {
    return {
      title: "Header"
    }
  }
}

Adding components to default vue-cli webpack app

1 Answers