Using Vue Components inside Razor

TLDR;

Vue Components are only usable within a vue instance!

// Vue instance for footer
new Vue({
el: '#footer'
});
// Define a new component called todo-item
Vue.component('app-footer', {
template: '<footer><p>&copy; 2019 - MyLovelyFooter</p></footer>'
});

The Issue

Today I was experimenting with vue inside a razor template. I stumbled upon a newbie problem:

<div id="footer">
    <app-footer></app-footer>
</div>
<script>
// Define a new component called app-footer
Vue.component('app-footer', {
    template: '<footer><p>&copy; 2019 - MyLovelyFooter</p></footer>'
});
</script>

This code was not working, and I couldn’t immediatly figure out why. So I went and read the awesome vue documentation! This is what made me understand what I had to do and why:

Components are reusable Vue instances with a name: in this case, <button-counter>. We can use this component as a custom element inside a root Vue instance created with new Vue

The Solution

So I went and adjusted the code to:

<div id="footer">
    <app-footer></app-footer>
</div>
<script>
// Vue instance for footer
new Vue({
    el: '#footer'
});
// Define a new component called todo-item
Vue.component('app-footer', {
    template: '<footer><p>&copy; 2019 - MyLovelyFooter</p></footer>'
});
</script>

This worked!

So bottom line: Vue Components are only usable within a vue instance!

Happy coding!