Vue 3 Component in Blade File

Vue 3 Component in Blade File

To use a Vue 3 component in a Blade file, you need to follow these steps:

1. Create or use an existing Vue 3 component.

Assuming you have already created a Vue 3 component, let's call it MyComponent.vue, located in the resources/js/components directory.

2. Register the component globally or locally.

You can register the component globally by adding it to the App.vue file or register it locally in the Blade file.

To register it globally, update the App.vue file as follows:

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

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

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

To register it locally, add the following code snippet to the Blade file where you want to use the component:

<script>
import MyComponent from '@/components/MyComponent.vue';

export default {
  components: {
    'my-component': MyComponent
  }
}
</script>

3. Use the component in the Blade file.

Now you can use the component in your Blade file as follows:

<x-app-layout>
  <div class="py-12">
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
      <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
        <my-component></my-component>
      </div>
    </div>
  </div>
</x-app-layout>

Make sure you have imported the AppLayout component from @/Layouts/AppLayout.vue or any other layout file you are using.

That's it! You have successfully used a Vue 3 component in a Blade file.