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 use more components I made.
main.js
import Vue from 'vue'
import App from './app.vue'
new Vue({
el: 'body',
components: { App }
})
app.vue
<template>
<div class="message">{{ message }}</div>
</template>
<script>
export default {
data () {
return {
message: 'Hello World'
}
}
}
</script>
I have tried
import TopBar from './top-bar.vue'
In both main.js and the script section of app.vue then tried using
<top-bar></top-bar>
without luck.
I think I'm missing how to register the component properly, such as in the Vue docs it does:
Vue.component('top-bar', TopBar)
But I think when using webpack with vue-loader I need to do something different.