how to load vuejs component from laravel blade?

Solution:1

I don’t think it’s a good idea trying to put Vue code directly inside blade.

I would suggest you create a Client.vue and put your code in it instead. Register it in your routes in app.js.

...
{path: '/client', component: require('./components/Client.vue')},

Then you can use the component in your Client blade.

<client></client>

I believe that would be a first step towards resolving this issue.

Solution:2

Load your app.js in <head> section of your blade.php

<script src="{{ asset('js/app.js') }}" async></script>\

Also create a div with id app there.

<body>
    <div id="app"></div>
</body>

Create App.vue

<template>
  <div>
    <router-view />
  </div>
</template>

<style scoped lang="scss">
</style>

Go to resources/js/app.js file, you will see laravel already put code to instantiate vue in there. Register your route etc.

But for me, I create a new folder resources/js/vue, put all vue related files (components, routes, filters, vuex, mixins, directives) there, create index.js and moved the code to initiate vue inside index.js.

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
import components from './components'
import directives from './directives'
import mixins from './mixins'
import filters from './filters'

Vue.use(router)
Vue.use(store)
Vue.use(components)
Vue.use(directives)
Vue.use(mixins)
Vue.use(filters)

new Vue({ router, store, render: h => h(App) }).$mount('#app')

export default {}

resources/js/app.js

require('./vue')
// I also initiate service-worker, firebase, and other non vue related
// javascripts in this file