Step-by-Step Guide to Creating a Vue.js 3 Client App for Laravel API: NEW Course

In this tutorial, we will be creating a Vue.js 3 client app that communicates with a Laravel API. This course will guide you through the step-by-step process of setting up the client app and connecting it to the Laravel API. By the end of this tutorial, you will have a fully functional client app that can interact with your Laravel API.

Prerequisites:

1. Basic knowledge of Vue.js and Laravel.
2. Node.js installed on your machine.
3. PHP installed on your machine.
4. Composer installed on your machine.

Step 1: Setting up Laravel API

1. Create a new Laravel project by running the following command in your terminal:

   composer create-project --prefer-dist laravel/laravel api

2. Navigate to the project directory:

   cd api

3. Create a new controller by running the following command:

   php artisan make:controller ApiController

4. Define your API routes in routes/api.php. Here is an example route that returns a list of users:

   Route::get('/users', [ApiController::class, 'index']);

5. Define the index method in your ApiController to return the list of users:

   public function index()
   {
   return User::all();
   }

Step 2: Setting up Vue.js 3 Client App

1. Create a new Vue.js project by running the following command in your terminal:

   npm create @vitejs/app client

2. Navigate to the project directory:

   cd client

3. Install the necessary dependencies by running the following commands:

   npm install vue@next
   npm install vue-router@next
   npm install axios

4. Create a new folder called ‘components’ and create a new component called ‘UserList.vue’. Populate the component with the following code:

   
   <template>
   <ul>
   <li v-for="user in users" :key="user.id">{{ user.name }}</li>
   </ul>
   </template>

5. Update the 'App.vue' file to include the 'UserList' component:
```html
<template>
  <div>
    <UserList />
  </div>
</template>

<script>
import UserList from './components/UserList.vue';

export default {
  components: {
    UserList,
  },
};
</script>

1. Update the ‘main.js’ file to include the VueRouter and Axios configurations:

   
   import { createApp } from 'vue';
   import { createRouter, createWebHistory } from 'vue-router';
   import axios from 'axios';
   import App from './App.vue';

const router = createRouter({
history: createWebHistory(),
routes: [],
});

axios.defaults.baseURL = ‘http://localhost:8000/api‘;

createApp(App).use(router).mount(‘#app’);

Step 3: Connecting the Client App to the Laravel API
1. Run your Laravel API project by running the following command in your terminal:

php artisan serve

2. Run your Vue.js client app by running the following command in a new terminal window:

npm run dev

3. Open your browser and navigate to 'http://localhost:3000' to see your Vue.js client app in action. You should see a list of users fetched from your Laravel API.

Congratulations! You have successfully created a Vue.js 3 client app that communicates with a Laravel API. You can now expand on this project by adding more components, routes, and functionalities to create a fully functional client app for your Laravel API.