How to Use v-for Loop in Vue.js with Laravel 11
In Vue.js with Laravel 11, you can use the v-for
directive to loop over an array or object and dynamically render content on the frontend. This tutorial will show you how to properly create a for
loop in a Vue component and integrate it into your Laravel project.
Step 1: Set up Laravel 11 with Vue.js (Optional Recap)
Make sure your Laravel 11 app is configured with Vue.js. If not, follow these steps:
- Install Laravel 11:
composer create-project laravel/laravel example-app
cd example-app
- Install Node dependencies:
npm install
- Install Vue (if not already installed via Laravel Breeze):
npm install vue @vitejs/plugin-vue
- Configure
vite.config.js
:
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
vue(),
],
});
Step 2: Create a Vue Component with a v-for
Loop
- Create a Vue component to render a list using the
v-for
loop.resources/js/Components/UserList.vue
:
<template>
<div>
<h2>User List</h2>
<ul>
<li v-for="(user, index) in users" :key="index">
{{ index + 1 }}. {{ user.name }} - {{ user.email }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
users: [
{ name: 'John Doe', email: '[email protected]' },
{ name: 'Jane Smith', email: '[email protected]' },
{ name: 'Alice Johnson', email: '[email protected]' }
],
};
},
};
</script>
<style scoped>
h2 {
color: #333;
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin: 5px 0;
font-weight: bold;
}
</style>
Step 3: Import the Component into Your Main Vue App
- Update
resources/js/app.js
to register and mount the Vue component.resources/js/app.js
:
import { createApp } from 'vue';
import UserList from './Components/UserList.vue';
const app = createApp({});
app.component('user-list', UserList);
app.mount('#app');
Step 4: Use the Component in a Blade Template
- Edit the Blade view to include the Vue component.
resources/views/welcome.blade.php
:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Laravel with Vue.js Loop</title>
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
<div id="app">
<user-list></user-list>
</div>
</body>
</html>
Step 5: Run the Application
- Compile your assets with Vite:
npm run dev
- Run the Laravel server:
php artisan serve
- Open http://localhost:8000 in your browser. You should see a list of users rendered using the
v-for
loop.
Explanation
v-for
Directive: Used to loop through theusers
array.
<li v-for="(user, index) in users" :key="index">
{{ index + 1 }}. {{ user.name }} - {{ user.email }}
</li>
user
: Each element in theusers
array.index
: The current index of the loop.:key="index"
: A unique key to help Vue track the elements efficiently.- Reactivity: If the
users
array is updated (e.g., by fetching data from an API), the list will update automatically.
Optional: Fetch Data from Laravel API
- Create a Laravel route to return a list of users.
routes/web.php
:
Route::get('/api/users', function () {
return [
['name' => 'John Doe', 'email' => '[email protected]'],
['name' => 'Jane Smith', 'email' => '[email protected]'],
['name' => 'Alice Johnson', 'email' => '[email protected]'],
];
});
- Update the Vue component to fetch users from the Laravel backend.
UserList.vue
:
<script>
export default {
data() {
return {
users: [],
};
},
mounted() {
fetch('/api/users')
.then(response => response.json())
.then(data => {
this.users = data;
});
},
};
</script>
Conclusion
You’ve successfully set up a v-for
loop in Vue.js within a Laravel 11 project. This guide showed you how to:
- Create and register a Vue component.
- Use the
v-for
directive to loop through an array. - Integrate the component into a Laravel Blade template.
Additionally, we explored how to fetch data from a Laravel route dynamically. With this setup, you can build powerful frontend features using Vue in your Laravel projects!