How to use vue.js component in laravel blade?
23,599
Solution 1
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>
Solution 2
It's an old thread, but: don't forget to run npm run dev to compile the app.js
Author by
Rowinski Bartosz
Updated on July 05, 2022Comments
-
Rowinski Bartosz almost 2 years
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?