Revision history [back]

To make Vue components appear in a blade.php file in Laravel, follow these steps:

Install Vue.js and Vuex using npm.
Create a Vue component in resources/js/components directory. For example, create the file MyComponent.vue, and add the following code:

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

<script>
export default {
  props: {
    name: String,
  },
};
</script>

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

Vue.component('my-component', MyComponent)

const app = new Vue({
    el: '#app'
});

In your blade.php file, add a container div and an id to mount the Vue app to:

<body>
  <div id="app">
    <!-- Vue components will be mounted here -->
  </div>
</body>

Render the component in the blade.php file. For example, to render the MyComponent.vue component, add the following code in the blade.php file:

<my-component name="{{ $name }}"></my-component>

Here, $name is a PHP variable that will be passed as a prop to the MyComponent Vue component.

Finally, compile the assets using Laravel Mix by running the following command:

npm run dev

Now, you should see the Vue component rendered in the blade.php file.