Importing Vue Components with Webpack

Question

I have a hello world Vue app setup with Webpack and have the initial App component working and mounted to body. Although within that App component I can\'t figure out how to

Answer 1

You can register it globally like you showed, or if you want to register it locally for use in a single component you need to add it to the components object of the Vue instance:

<template>
  <top-bar></top-bar>
  <div class="message">{{ message }}</div>
</template>

<script>
import TopBar from './top-bar.vue'

export default {
  components: {
    TopBar
  },
  data () {
    return {
      message: 'Hello World'
    }
  }
}
</script>

Answer 2

You can give it a suitable name in the components object as shown bellow

<template>
  <nav-bar></nav-bar>
</template>

<script>
import TopBar from './TopBar.vue'

export default {
  components: {
    'nav-bar': TopBar
  }
}
</script>