Laravel With Vue Development Tutorials, Guides & Insights

Create a new Vue component file in resources/js/components/ExampleComponent.vue:

   <template>
       <div class="p-4 bg-gray-100 text-center">
           <h1 class="text-xl font-bold text-blue-500">{{ localMessage }}</h1>
           <button @click="updateMessage" class="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-700">
               Click Me
           </button>
       </div>
   </template>

   <script>
   export default {
       props: {
           message: {
               type: String,
               required: true,
           },
       },
       data() {
           return {
               localMessage: this.message, // Local copy of the prop
           };
       },
       methods: {
           updateMessage() {
               this.localMessage = 'Button Clicked!';
           },
       },
   };
   </script>

   <style scoped>
   h1 {
       text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
   }
   </style>