Laravel Vue.js component registration

Question

I am creating a simple Vue.js application with Laravel. I have registered Vue.js with:

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

import App from './components/App';

    const app = new Vue({
        el: '#app',
        components: {
            App
        },
        router,
    });

If I create a custom component, this works just fine:

Vue.component('nav-section', {
    template: `<div>This is odd</div>`
});

I can then call <nav-section></nav-section> in any given template, and it will output "This is odd."

However if I use Laravel's require method like so:

Vue.component('nav-section', require('./components/Navigation'));

It is not working anymore. <nav-section></nav-section> is empty, blank. No errors in npm or console. Am I missing something, or some logic behind require?

Navigation.vue:

<template>
    <div>
        <span>Sample text</span>
    </div>
</template>
<script>
export default {}
</script>

Vue.js:

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

import App from './components/App';

Vue.component('nav-section', require('./components/Navigation'));


    const app = new Vue({
        el: '#app',
        components: {
            App
        },
        router,
    });

matticustard · Accepted Answer · 2019-07-28 01:40:03Z

3

Try writing it out like this, with the extension and default:

Vue.component('nav-section', require('./components/Navigation.vue').default);

answered Jul 28, 2019 at 1:40

matticustard

5,1691 gold badge17 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

simon Over a year ago

Oh man, I did not even think to try it like this. Thank you indeed for this solution :-). So as long as default is attached .vue is "still" not necessary :-)

matticustard Over a year ago

I expected it might, but I figured it wouldn't hurt to be thorough. :)

Collectives™ on Stack Overflow

Laravel Vue.js component registration

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related