Display Paginated Posts Vue
return Inertia::render('User/Post/Index', ['posts'=>$posts]);
How to display post in vue file
1. **Receive the posts data in your Vue component.**
2. **Render the posts in your template.**
3. **Implement pagination controls.**
Here’s an example of how you might structure your Vue component to display the posts:
### Example Vue Component (`User/Post/Index.vue`)
<template>
<div>
<h1>Posts</h1>
<div v-if="posts.data.length">
<ul>
<li v-for="post in posts.data" :key="post.id">
<h2>{{ post.title }}</h2>
<p>by {{ post.user.name }}</p>
<p>{{ post.content }}</p>
<router-link :to="`/posts/${post.id}`">Read More</router-link>
</li>
</ul>
</div>
<div v-else>
<p>No posts available.</p>
</div>
<div class="pagination">
<button
@click="goToPage(posts.current_page - 1)"
:disabled="!posts.prev_page_url">
Previous
</button>
<span>Page {{ posts.current_page }} of {{ posts.last_page }}</span>
<button
@click="goToPage(posts.current_page + 1)"
:disabled="!posts.next_page_url">
Next
</button>
</div>
</div>
</template>
<script>
export default {
props: {
posts: Object, // Receiving the posts prop
},
methods: {
goToPage(page) {
// Redirect to the desired page
this.$inertia.get(`/posts?page=${page}`);
},
},
};
</script>
<style scoped>
.pagination {
margin-top: 20px;
}
button {
margin: 0 5px;
}
</style>### Breakdown of the Component:
1. **Template Structure**:
– The component renders a list of posts using a `v-for` loop.
– Each post displays its title, the author's name, and a "Read More" link.
– Conditional rendering is used to display a message if there are no posts.
2. **Pagination**:
– The pagination section includes "Previous" and "Next" buttons.
– The buttons are disabled based on the availability of previous or next pages.
– The `goToPage` method is called to navigate between pages using Inertia's `$inertia.get` method, updating the URL and fetching new data.
3. **Props**:
– The `posts` prop is passed from the Laravel controller, containing the paginated posts data.
### Ensure Routes are Set Up
Make sure that your Laravel routes are set up to handle the requests for pagination, typically in your `web.php` file:
Route::get('/posts', [PostController::class, 'index']);This way, when the user navigates to a different page of posts, it will trigger the controller action to fetch the respective posts.
### Summary
With this setup, your Vue component should be able to display paginated posts effectively while using Inertia.js to manage navigation between pages. Adjust the code based on your specific data structure and styling preferences.
<script>
import { Head, Link } from '@inertiajs/vue3';
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
</script>{{ $t('posts','Posts') }}
{{ $t('add_new_post','Add New Post') }}
{{ post.title }}
{{ post.content }}
By {{ post.user.name }} on {{ post.created_at }}
{{ $t('title','Title') }}
{{ $t('image','Image') }}
{{ $t('status','Status') }}
{{ $t('created_at','Created At') }}
{{ $t('action','Action') }}
add in above
Here’s how you can integrate the post display within your existing Vue component:
### Updated Vue Component
<script setup lang="ts">
import { Head, Link } from '@inertiajs/vue3';
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
defineProps({
posts: {
type: Object,
required: true,
},
});
</script>
<template>
<Head title="All Posts" />
<AuthenticatedLayout>
<template #header>
<h2 class="text-xl font-semibold leading-tight text-gray-800">
{{ $t('posts','Posts') }}
</h2>
</template>
<div class="py-6">
<div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
<div class="bg-white shadow-sm sm:rounded-lg">
<div class="flex justify-end">
<Link
:href="route('userarea.posts.create')"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800 mt-2"
>
{{ $t('add_new_post','Add New Post') }}
</Link>
</div>
<div class="p-6 text-gray-900">
<div v-if="posts.data.length">
<div v-for="post in posts.data" :key="post.id" class="border-b py-4">
<h3 class="font-bold text-lg">{{ post.title }}</h3>
<p class="text-gray-600">{{ post.content }}</p>
<p class="text-gray-400 text-sm">By {{ post.user.name }} on {{ post.created_at }}</p>
</div>
</div>
<div v-else>
<p class="text-gray-500">No posts available.</p>
</div>
<div class="relative overflow-x-auto shadow-md sm:rounded-lg mt-4">
<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" class="px-6 py-3">
{{ $t('title','Title') }}
</th>
<th scope="col" class="px-6 py-3">
{{ $t('image','Image') }}
</th>
<th scope="col" class="px-6 py-3">
{{ $t('status','Status') }}
</th>
<th scope="col" class="px-6 py-3">
{{ $t('created_at','Created At') }}
</th>
<th scope="col" class="px-6 py-3">
{{ $t('action','Action') }}
</th>
</tr>
</thead>
<tbody>
<tr v-for="post in posts.data" :key="post.id">
<td class="px-6 py-4">{{ post.title }}</td>
<td class="px-6 py-4">
<img v-if="post.image" :src="post.image" alt="" class="h-16 w-16 object-cover" />
</td>
<td class="px-6 py-4">{{ post.status }}</td>
<td class="px-6 py-4">{{ post.created_at }}</td>
<td class="px-6 py-4">
<Link :href="`/posts/${post.id}/edit`" class="text-blue-500 hover:underline">
Edit
</Link>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Pagination -->
<div class="flex justify-between mt-4">
<button
@click="goToPage(posts.current_page - 1)"
:disabled="!posts.prev_page_url"
class="px-4 py-2 bg-gray-300 hover:bg-gray-400 rounded-lg"
>
Previous
</button>
<button
@click="goToPage(posts.current_page + 1)"
:disabled="!posts.next_page_url"
class="px-4 py-2 bg-gray-300 hover:bg-gray-400 rounded-lg"
>
Next
</button>
</div>
</div>
</div>
</div>
</div>
</AuthenticatedLayout>
</template>### Key Changes Made:
1. **Props Definition**:
– Added a props definition for `posts` to receive the paginated posts from Laravel.
2. **Post Rendering**:
– Included a conditional check to display a message when there are no posts available.
– Used a `v-for` loop to render each post's details, including title, content, author, and creation date.
3. **Table Structure**:
– Populated the table with post details, such as title, image, status, created_at date, and an edit action link.
4. **Pagination Controls**:
– Added buttons for navigating to the previous and next pages.
– The `goToPage` method can be defined to handle page navigation, ensuring proper URL management through Inertia.
### Adding Pagination Logic
Make sure you implement the `goToPage` method to handle the navigation:
methods: {
goToPage(page) {
// Only call the method if the page is valid
if (page > 0 && page <= this.posts.last_page) {
this.$inertia.get(`/posts?page=${page}`);
}
},
}### Summary
With these updates, your Vue component will effectively display the paginated posts while maintaining a structured layout with pagination controls. Make sure your backend is correctly configured to pass the `posts` data structure expected in this component. Adjust any styling or layout specifics as necessary for your application's design.
'title' => 'required|string|max:255',
'content' => 'required|string',
'meta_keywords' => 'nullable|string',
'meta_description' => 'nullable|string|max:160',
]);
$validated['user_id'] = Auth::id();
Post::create($validated);
return redirect()->route('userarea.posts.index')->with('success', 'Post created successfully.');
redirect with message that post saves in Index.vue
1. **Modify the Laravel Controller**: Ensure that you flash the success message to the session when redirecting.
2. **Receive the Flash Message in Vue**: Use Inertia.js to access the flash message in your Vue component.
3. **Display the Message**: Render the message in the `Index.vue` component.
### Step 1: Modify the Laravel Controller
Ensure your controller is set up correctly to flash the message. Your existing code seems fine, but here it is for clarity:
public function store(Request $request)
{
$validated = $request->validate([
'title' => 'required|string|max:255',
'content' => 'required|string',
'meta_keywords' => 'nullable|string',
'meta_description' => 'nullable|string|max:160',
]);
$validated['user_id'] = Auth::id();
Post::create($validated);
return redirect()->route('userarea.posts.index')->with('success', 'Post created successfully.');
}### Step 2: Receive the Flash Message in Vue
In your `Index.vue`, you need to access the flash message passed by Inertia. You can do this by defining a prop for the success message:
<script setup lang="ts">
import { Head, Link, usePage } from '@inertiajs/vue3';
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
// Get the page props
const { props } = usePage();
const { posts, flash } = props;
</script>### Step 3: Display the Message
Now you can conditionally render the success message in your template:
<template>
<Head title="All Posts" />
<AuthenticatedLayout>
<template #header>
<h2 class="text-xl font-semibold leading-tight text-gray-800">
{{ $t('posts','Posts') }}
</h2>
</template>
<div class="py-6">
<div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
<div class="bg-white shadow-sm sm:rounded-lg">
<div class="p-6 text-gray-900">
<!-- Display success message -->
<div v-if="flash.success" class="bg-green-500 text-white p-4 rounded-md mb-4">
{{ flash.success }}
</div>
<div v-if="posts.data.length">
<div v-for="post in posts.data" :key="post.id" class="border-b py-4">
<h3 class="font-bold text-lg">{{ post.title }}</h3>
<p class="text-gray-600">{{ post.content }}</p>
<p class="text-gray-400 text-sm">By {{ post.user.name }} on {{ post.created_at }}</p>
</div>
</div>
<div v-else>
<p class="text-gray-500">No posts available.</p>
</div>
<!-- Pagination Controls (as previously shown) -->
<!-- Add your pagination logic here -->
</div>
</div>
</div>
</div>
</AuthenticatedLayout>
</template>### Summary
With these modifications:
1. **The Laravel controller** correctly flashes a success message to the session when a post is created.
2. **The Vue component** accesses the flash message using Inertia and conditionally renders it within a styled div, providing feedback to the user.
You can adjust the styling of the success message as needed to match your application's design.
Here’s how to troubleshoot and fix this issue in your Inertia.js and Vue setup:
### Step 1: Ensure Flash Data is Passed from Laravel
In your Laravel controller, you need to ensure that flash data is correctly passed to the Inertia view. You might have already done this, but let's confirm:
public function index()
{
$posts = Post::with('user')->latest()->paginate(10);
return Inertia::render('User/Post/Index', [
'posts' => $posts,
'flash' => [
'success' => session('success'),
],
]);
}In this code snippet, we explicitly pass the `flash` data to the Inertia view, ensuring it contains the `success` message if it exists.
### Step 2: Update Your Vue Component
Now, ensure your Vue component accesses the `flash` data properly:
<script setup lang="ts">
import { Head, Link, usePage } from '@inertiajs/vue3';
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
// Get the page props
const { props } = usePage();
const posts = props.posts;
const flash = props.flash || {}; // Default to an empty object if flash is undefined
</script>
<template>
<Head title="All Posts" />
<AuthenticatedLayout>
<template #header>
<h2 class="text-xl font-semibold leading-tight text-gray-800">
{{ $t('posts','Posts') }}
</h2>
</template>
<div class="py-6">
<div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
<div class="bg-white shadow-sm sm:rounded-lg">
<div class="p-6 text-gray-900">
<!-- Display success message -->
<div v-if="flash.success" class="bg-green-500 text-white p-4 rounded-md mb-4">
{{ flash.success }}
</div>
<div v-if="posts.data.length">
<div v-for="post in posts.data" :key="post.id" class="border-b py-4">
<h3 class="font-bold text-lg">{{ post.title }}</h3>
<p class="text-gray-600">{{ post.content }}</p>
<p class="text-gray-400 text-sm">By {{ post.user.name }} on {{ post.created_at }}</p>
</div>
</div>
<div v-else>
<p class="text-gray-500">No posts available.</p>
</div>
<!-- Pagination Controls (as previously shown) -->
<!-- Add your pagination logic here -->
</div>
</div>
</div>
</div>
</AuthenticatedLayout>
</template>### Explanation of the Changes
1. **Explicit Flash Data Handling**: In the controller, ensure that you set the `flash` variable with the `session('success')` message.
2. **Defaulting Flash to an Empty Object**: In the Vue component, use `const flash = props.flash || {};` to ensure that if `flash` is `undefined`, it defaults to an empty object. This prevents errors when trying to access `flash.success`.
### Additional Debugging
If you still encounter issues:
1. **Check Session Data**: Ensure that the success message is actually being stored in the session. You can debug this by checking your session data in Laravel before the redirect.
2. **Verify Route Handling**: Make sure that the route leading to your index view is correctly defined and is accessing the controller method that sets the flash message.
3. **Console Log**: You can log `flash` in your Vue component to see its structure:
console.log(flash);This will help you identify if the `flash` data is being passed correctly.