Vue component. How to pass a template from import to template?

Question

Vue.js

If so, then it works:

// Работает
Vue.component('my-component', {
    template: '<div>555</div>'
});

If so, then it doesn't work:

import Example from './components/Example.vue'

// test
Vue.component('my-component', {
    template: Example
});

Mistake:

[Vue warn]: invalid template option:[object Object]

The component itself:

<template>
    <div>
        I'm an example component!
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

Answer 1

import Example from './components/Example.vue'

// test
Vue.component('my-component', Example);

Well, you need to use nodejs and webpack. If there is no experience, then the easiest way to start is this: after installing nodejs in the console:

npm install vue-cli -g
vue-init webpack-simple testproject