Step 1: Local Server

Refer to Laravel Setup with Vue before you come here if you haven't install vue

After creating your Vue project using Vite, you'll want to set up your Vue component to communicate with your Laravel backend and display the alert message from http://127.0.0.1:8000/api/hello-again which refer back to CONTROLLER.

Here are the steps you can follow:

1. Install Axios: Axios is a popular HTTP client for making AJAX requests in Vue.js applications. Install it using npm:

cd frontend
npm install axios

1. Create a Vue Component: You can create a new Vue component where you'll make the HTTP request to your Laravel backend and display the alert message.

For example, you could create a component named HelloWorld.vue inside the src/components directory:

<script setup>
import { ref } from "vue";

defineProps({
  msg: String,
});

const count = ref(0);
</script>

<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="fetchMessage">Fetch Message</button>
    <p v-if="message">{{ message }}</p>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      message: "",
      title: "Hello World!",
    };
  },
  methods: {
    fetchMessage() {
      const request = {
        /* define your request data here if needed */
      };
      axios
        .post("http://127.0.0.1:8000/api/hello-again", request)
        .then((response) => {
          this.title = response.data;
          // Handle response
        })
        .catch((error) => {
          console.error("Error fetching message:", error);
        });
    },
  },
};
</script>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>

1. Use the Component in App.vue: Now, you can import and use the HelloWorld component in your main App.vue file:

<script setup>
import HelloWorld from "./components/HelloWorld.vue";
</script>

<template>
  <div id="app">
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
};
</script>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

1. Run Your Vue Application: Finally, you can run your Vue application using the Vite development server: Run the vue firstly,

npm run dev

and make sure laravel is running and http://127.0.0.1:8000/api/hello-again is workable.