How to use vue.js component in laravel blade?

I registered component in my app.js like this:

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

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

Now I want to import that component:

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

JavaScript
 
<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>

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

What’s the easiest way to do this?

Answer

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'),
   }
});

JavaScript
 
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>

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

Advertisement

Answer