Setup and Boot Vue.js + Laravel

Setting up Laravel

The below will be a demonstration on how to create a Controller which can be used by Vue.js to communicate with Laravel.

Firstly, open the "backend" folder in Visual Studio Code.

Making a Controller

Firstly, open a new terminal and run this command. "HelloWorld" is the name of controller. It can be changed to any other name.

php artisan make:controller HelloWorld

Then, navigate to "Controllers" folder which is located at app/Http/

Inside "HelloWorld.php" (which is the Controller created previously), make two simple functions that will return a sentence.

<?php

namespace App\Http\Controllers;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;

class HelloWorld extends Controller
{
    public function helloWorld(){
        return "Hi, helloWorld() function is called from the backend";
    }
    
    public function helloWorldAgain(){
        return "Hi, helloWorldAgain() function is called from the backend";
    }
}

The final output should be looking like this.

Configuring the Router

Firstly, navigate to "api.php" file which is located at routes/

Inside "api.php", import the Controller that was created previously.

use App\Http\Controllers\HelloWorld;

Then, create these routes.

Route::get('/helloWorld', [HelloWorld::class, 'helloWorld']);
Route::get('/helloWorldAgain', [HelloWorld::class, 'helloWorldAgain']);

The below is how the final code should look like.

The below is a brief explanation about the code to create a route.

Setting up Vue.js

Installing Axios

Axios is a package that allows Vue.js to communicate with Laravel. It is very crucial to install the package.

To install, simply run the below command.

npm install axios

Installing and Setting Up Vue Router

Vue Router is a package that allows user to navigate between different Vue pages. It is very crucial to install the package.

To install, simply run the below command.

npm install vue-router@4

Then, create a file called "router.js" in the same level as "main.js" file located at src/

Then, copy and paste the following code block inside the file.

import { createRouter, createWebHistory } from 'vue-router';
import HelloWorld from './components/HelloWorld.vue';
import HelloWorldAgain from './components/HelloWorldAgain.vue';
const routes = [
  { path: '/HW', component: HelloWorld },
  { path: '/HWA', component: HelloWorldAgain },
];
const router = createRouter({
  history: createWebHistory(),
  routes,
});
export default router;

The final output should be like this.

Modifying code and duplicating file

Firstly, navigate to "HelloWorld.vue" file which is located at src/components/HelloWorld.vue

Delete all code blocks inside it and replace it with the following code block.

The empty string in .get("" + "/api/testing") should be the link given by the Laravel after running the command php artisan serve

<template></template>
<script>
// Import Axios for making API requests to the backend
import axios from "axios";
// Exporting the Vue component
export default {
  // Lifecycle hook: Executed when the component is mounted to the DOM
  mounted() {
    axios
      .get("http://127.0.0.1:8000" + "/api/helloWorld")
      .then((response) => {
        alert(response.data);
      });
  },
};
</script>
<style></style>

Then, make a duplicate of "HelloWorld.vue" and replace the code blocks with the following. Don't forget to rename the duplicated file as "HelloWorldAgain.vue".

<template></template>
<script>
import axios from "axios";
export default {
  mounted() {
    axios
      .get("http://127.0.0.1:8000" + "/api/helloWorldAgain")
      .then((response) => {
        alert(response.data);
      });
  },
};
</script>
<style></style>

The final output should be looking like this.

Then, navigate to "App.vue" file which is located at src/

Delete all code blocks inside it and replace it with the following code block.

<script setup>
</script>
<template>
  <div id="app">
    <router-view />
  </div>
</template>

Then, navigate to "main.js" file which is located at src/

Delete all code blocks inside it and replace it with the following code block.

import { createApp } from 'vue'
import App from './App.vue'
import router from './router';
const app = createApp(App);
app.use(router);
app.mount('#app');

Removing unwanted files

The "style.css" file is a CSS file that comes together when creating a Vue.js project. It is recommended to delete it so that it won't clash with the developer's CSS files.

To remove the "style.css" file, navigate to src/ and simply delete the file.

Booting up Vue.js + Laravel

If haven't already run the command php artisan serve in "backend" folder and npm run dev in "frontend" folder, then follow these steps.

Laravel

Open the "backend" folder in Visual Studio Code and run this command. This is will get the Laravel backend up and running.

php artisan serve

Vue.js

Open the "frontend" folder in Visual Studio Code and run this command. This is will get the Vue.js frontend up and running.

npm run dev

Testing

Now, open the link given by Vue.js which usually starts like this: http://localhost:XXXX/

Then, navigate to /HW route like this: http://localhost:XXXX/HW

If the Vue page alerts the following message, then the setup and boot of Vue.js + Laravel was successful.

Then, navigate to /HWA route like this: http://localhost:XXXX/HWA

If the Vue page alerts the following message, then the setup and boot of Vue.js + Laravel was successful.