How to use vue.js component in laravel blade?

Question

I registered component in my app.js like this:

Vue.component('navbar', require('./components/Navbar.vue'));

Now I want to import that component:

<template>
<nav class="navbar">CODE HERE</nav>
</template>

Into my blade.php file:

<body class="">
    <div id="app">
        <div class="">
        <navbar></navbar> <-- here!
        @yield('content')
        </div>
    </div>
</body>

What's the easiest way to do this?

Try to get help from this answer stackoverflow.com/a/43224985/7844349 — Harsh Patel
– Harsh Patel, Commented Sep 6, 2017 at 8:52

Hiren Gohel · Accepted Answer · 2017-09-06 09:47:16Z

23

In app.js

import navbar from './components/Navbar.vue';
Vue.component('navbar', require('./components/Navbar.vue'));

var app = new Vue({
   el: '#app',
   components: {
       'navbar': require('./components/Navbar.vue'),
   }
});

In your blade:

<body class="">
<div id="app">
    <div class="">
       <navbar></navbar>
       @yield('content')
    </div>
</div>

edited Sep 6, 2017 at 9:47

answered Sep 6, 2017 at 8:54

Hiren Gohel

5,0496 gold badges31 silver badges50 bronze badges

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

10 Comments

Rowinski Bartosz Over a year ago

Unknown custom element: <navbar> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Hiren Gohel Over a year ago

Use import navbar from './components/Navbar.vue'; before Vue.component statement

Hiren Gohel Over a year ago

Have you used export default { } for app.js??

Rowinski Bartosz Over a year ago

What do u mean?

Rowinski Bartosz Over a year ago

now error here 'navbar': require('./components/Navbar.vue');

|

PJ.Wanderson · Accepted Answer · 2022-02-03 03:05:29Z

9

It's an old thread, but: don't forget to run npm run dev to compile the app.js

edited Feb 3, 2022 at 3:05

answered Aug 5, 2020 at 14:31

PJ.Wanderson

1,8621 gold badge12 silver badges15 bronze badges

Collectives™ on Stack Overflow

How to use vue.js component in laravel blade?

2 Answers 2

10 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related