Display Questions-Quiz App| Laravel Vue js Inertia Js| Episode 10

Welcome to Episode 10 of our tutorial series on building a Quiz App using Laravel, Vue.js, and Inertia.js. In this episode, we will focus on displaying questions to the user and allowing them to select their answers.

Building the Question Display Component

To start off, we need to create a new Vue component that will be responsible for displaying the questions to the user. We can use the vue-cli to generate a new component file:


npm install -g @vue/cli
vue create QuestionDisplay.vue


Inside the QuestionDisplay.vue file, we will define the template, script, and style for our component. We can use the props attribute to pass in the question data from the parent component, and then use v-for to iterate over the options and display them to the user.

Integrating with Inertia.js

Once we have the Question Display component set up, we can integrate it with our Laravel backend using Inertia.js. In the controller for our quiz page, we can fetch the questions from the database and pass them to the Vue component using the inertia() helper function.


public function index()
{
$questions = Question::all();
return inertia('QuizPage', ['questions' => $questions]);
}


With the questions data available in our Vue component, we can now start displaying them to the user and allowing them to select their answers.

Conclusion

In this episode, we have learned how to create a Vue component for displaying questions and integrate it with our Laravel backend using Inertia.js. In the next episode, we will focus on allowing the user to select their answers and submitting them for scoring.