How to use vue.js in laravel blade?

@lew 

To use Vue.js in Laravel Blade, follow these steps:

1. Install Vue.js using npm by running the following command:

1

npm install vue

1. Create a Vue component by creating a new file under resources/js/components/ directory. For example, create a HelloWorld.vue file with the following content:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

<template>
  <div>
    <h1>Hello, {{ name }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: 'World'
    }
  }
}
</script>

1. Compile the Vue component using Laravel Mix by updating the webpack.mix.js file with the following code:

1
2

mix.js('resources/js/app.js', 'public/js')
   .vue();

1. Include the compiled Vue component in the Laravel Blade view by adding the following code to your Blade template:

1
2
3

<div id="app">
  <hello-world></hello-world>
</div>

1. Add the Vue component to the app.js file located in the resources/js directory:

1
2
3
4
5
6
7
8
9

import Vue from 'vue'
import HelloWorld from './components/HelloWorld.vue'

new Vue({
  el: '#app',
  components: {
    HelloWorld
  }
})

1. Run the npm run dev command to compile the assets. Vue.js will now be included in your Laravel Blade view and you can start using Vue.js components within your Laravel application.