In this episode, we're adding the basic discussions listing to our forum index page! We start off by creating a new Discussion
model and its database migration. We think ahead a little with our database design: for example, making the user_id
nullable so if a user is deleted, their discussions stick around (but without their user details). We also make sure topic_id
is constrained, but assume topics aren't deleted, so no need for cascade rules there. For the discussion slug, we make it unique by including the discussion ID, to avoid slug collisions later on.
Once the migration is ready, we head over to build an API resource for discussions. We're manual about what data goes out, since we'll want to show relationships like which topic a discussion belongs to. Topics are eager loaded with the discussions (for performance and consistency).
We then wire up the forum index page so it fetches and paginates discussions, pulling in the relevant data and rendering a basic list (much like we did for topics earlier in the course).
After that, we tidy up our Vue front-end code: setting up a Discussion
component to keep things organized, passing in each discussion as a prop, and nicely spacing everything. We output the discussion title, and the topic it belongs to, and with a couple of fixes (renaming name
to title
for topics and adjusting styling), get everything looking good.
Right now, our UI is quite basic—just titles and topics—but it's enough to confirm our data flow is working. We talk about how, over the next few episodes, we'll be adding body previews, reply counts, participant avatars, and more advanced features like pagination and filters. For now, you should see a simple list of discussions—it's a great foundation for everything that's coming up!