register Single File Components globally

Question

I'm going straight to the point here, I'm creating a registration form using VUEJS. However, when I try to register the component globally it gives me error. Please bear with me I'm still new to vuejs.

when I check the console it gives me this error:

n is not a function

Thanks in advance for the help.

here's my code:

index.php file

<section id="app" class="homepage">
   <div class="content">
    <?php
        $this->load->view($content);
    ?>
   </div>
</section>

<script src="<?php echo base_url(); ?>/js/vue.min.js" ></script>
<script src="<?php echo base_url(); ?>/js/vue-resource.min.js" ></script>
<script src="<?php echo base_url(); ?>/js/app.js" ></script>

app.js file

Vue.component("tour-form", './components/tourForm.vue');

const app =  new Vue({
    el:'#app',
    data(){
        return{
        }
    }
});

tour_form.php file

<tour-form></tour-form>

Answer 1

Vue.component() takes the component options ( an object {} ) as its 2nd argument

But you are passing the path of the vue component as a string.

Since you are using .vue files you mivht be using vue-loader to parse these files.

vue-loader transforms the component into a plain javascript module.

So import the component and pass it as the second argument

import TourForm from './components/tourForm.vue'

Vue.component("tour-form", TourForm);

const app =  new Vue({
    el:'#app',
    data(){
        return{
        }
    }
});