undefined component in Vue.js

Question

I'm following the Laracasts Tutorials on Vue.js and i've hit a bit of a roadblock, i have a vueify component called app-footer.vue that contains all of my styles scripts and template.

<style>
    .red {
        background-color: #000;
    }
</style>

<template>
    <p class="footer-text">Copyright {{ currentYear }} </p>
</template>

<script>
    export default {
        data () {
            return {
                currentYear: new Date().getFullYear()
            }
        }
    }
</script>

Then in my view i define the component as

<app-footer></app-footer>

And finally in my app.js file i import the template file and add it to my Vue instance's components list as follows

window.Vue = require('Vue');

import AppFooter from './components/app-footer.vue';

new Vue({
    el: 'body',
    components: { AppFooter }
});

I just keep getting Component errors asking me if i've defined it correctly what exactly am i doing wrong?

Answer 1

The issue was simple, i forgot to name the component when setting it in my Vue declaration. WRONG

 new Vue({
    el: 'body',
    components: { AppFooter }
});

RIGHT

 new Vue({
    el: 'body',
    components: { 'app-footer': AppFooter }
});