In this tutorial, we will learn how to build a quiz app using Vue.js and Firebase. We will use Firebase as our backend to store our quiz questions and answers, and Vue.js to build the user interface and handle the front-end logic.<\/p>\n
To follow along with this tutorial, you will need to have the following installed on your machine:<\/p>\n
.env.local<\/code> in the root directory of your project.<\/li>\n- Add the following line to the
.env.local<\/code> file, replacing the placeholders with your Firebase project config values:<\/li>\n<\/ol>\nVUE_APP_FIREBASE_CONFIG=YOUR_FIREBASE_PROJECT_CONFIG\n<\/code><\/pre>\nCreate Vue.js App<\/h2>\n\n- Open your terminal and navigate to the directory where you want to create your Vue.js app.<\/li>\n
- Run the following command to create a new Vue.js project:<\/li>\n<\/ol>\n
vue create quiz-app\n<\/code><\/pre>\n\n- Select the default preset and wait for the app to be created.<\/li>\n
- Navigate to the project directory:<\/li>\n<\/ol>\n
cd quiz-app\n<\/code><\/pre>\n\n- Install the
dotenv<\/code> package to load the .env.local<\/code> file:<\/li>\n<\/ol>\nnpm install dotenv\n<\/code><\/pre>\n\n- Open the
main.js<\/code> file and add the following code at the top:<\/li>\n<\/ol>\nimport dotenv from 'dotenv'\n\ndotenv.config()\n<\/code><\/pre>\n\n- Run the app to make sure everything is set up correctly:<\/li>\n<\/ol>\n
npm run serve\n<\/code><\/pre>\nYou should see the default Vue.js app running at `http:\/\/localhost:8080`.<\/p>\n
Configure Firebase in Vue.js<\/h2>\n\n- Install the Firebase dependencies:<\/li>\n<\/ol>\n
npm install firebase@9.0.0-beta.5\n<\/code><\/pre>\n\n- Create a new file named
firebase.js<\/code> in the src<\/code> directory.<\/li>\n- Add the following code to the
firebase.js<\/code> file:<\/li>\n<\/ol>\nimport { initializeApp } from 'firebase\/app'\nimport { getFirestore } from 'firebase\/firestore'\n\nconst firebaseConfig = JSON.parse(process.env.VUE_APP_FIREBASE_CONFIG)\n\n\/\/ Initialize Firebase app\nconst app = initializeApp(firebaseConfig)\n\n\/\/ Get Firestore instance\nconst db = getFirestore(app)\n\nexport default db\n<\/code><\/pre>\n\n- Open the
main.js<\/code> file and import the firebase.js<\/code> file at the top:<\/li>\n<\/ol>\nimport '.\/firebase'\n<\/code><\/pre>\n\n- Now, Firebase is configured and ready to be used in the app.<\/li>\n<\/ol>\n
Create Quiz Component<\/h2>\n\n- Create a new file named
Quiz.vue<\/code> in the src\/components<\/code> directory.<\/li>\n- Add the following code to the
Quiz.vue<\/code> file:<\/li>\n<\/ol>\n<template>\n <div class=\"quiz\">\n <h2>{{ currentQuestion.question }}<\/h2>\n <ul>\n <li v-for=\"option in currentQuestion.options\" :key=\"option\">\n <input type=\"radio\" name=\"answer\" :value=\"option\" v-model=\"selectedAnswer\">\n {{ option }}\n <\/li>\n <\/ul>\n <button @click=\"checkAnswer\">Next<\/button>\n <\/div>\n<\/template>\n\n<script>\nexport default {\n data() {\n return {\n currentQuestion: {},\n selectedAnswer: null\n }\n },\n methods: {\n checkAnswer() {\n \/\/ TODO: Check the selected answer\n }\n }\n}\n<\/script>\n\n<style scoped>\n.quiz {\n text-align: center;\n}\n<\/style>\n<\/code><\/pre>\n\n- Import the
Quiz.vue<\/code> component in the App.vue<\/code> file and add it to the template:<\/li>\n<\/ol>\n<template>\n <div id=\"app\">\n <h1>Quiz App<\/h1>\n <Quiz><\/Quiz>\n <\/div>\n<\/template>\n\n<script>\nimport Quiz from '.\/components\/Quiz'\n\nexport default {\n components: {\n Quiz\n }\n}\n<\/script>\n\n<style>\n#app {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n}\n<\/style>\n<\/code><\/pre>\n\n- Run the app to make sure the
Quiz<\/code> component is rendered correctly:<\/li>\n<\/ol>\nnpm run serve\n<\/code><\/pre>\nYou should see the “Quiz App” heading and the quiz component on the page.<\/p>\n
Fetch Quiz Questions from Firebase<\/h2>\n\n- Open the
Quiz.vue<\/code> file and import the db<\/code> instance from the firebase.js<\/code> file at the top:<\/li>\n<\/ol>\nimport db from '..\/firebase'\n<\/code><\/pre>\n\n- Add the following
created<\/code> lifecycle hook to fetch the quiz questions from Firebase:<\/li>\n<\/ol>\n<template>\n <!-- ... -->\n<\/template>\n\n<script>\nexport default {\n data() {\n return {\n currentQuestion: {},\n selectedAnswer: null\n }\n },\n created() {\n this.fetchQuestions()\n },\n methods: {\n async fetchQuestions() {\n const questionsCollection = collection(db, 'questions')\n const questionsSnapshot = await getDocs(questionsCollection)\n questionsSnapshot.forEach((doc) => {\n this.currentQuestion = doc.data()\n })\n },\n checkAnswer() {\n \/\/ TODO: Check the selected answer\n }\n }\n}\n<\/script>\n\n<style scoped>\n<!-- ... -->\n<\/style>\n<\/code><\/pre>\n\n- Run the app and make sure the quiz questions are fetched correctly:<\/li>\n<\/ol>\n
npm run serve\n<\/code><\/pre>\nShow Quiz Questions and Check Answers<\/h2>\n\n- Update the
Quiz.vue<\/code> template to display the quiz questions and check the selected answer:<\/li>\n<\/ol>\n<template>\n <div class=\"quiz\">\n <h2>{{ currentQuestion.question }}<\/h2>\n <ul>\n <li v-for=\"option in currentQuestion.options\" :key=\"option\">\n <input type=\"radio\" name=\"answer\" :value=\"option\" v-model=\"selectedAnswer\">\n {{ option }}\n <\/li>\n <\/ul>\n <button @click=\"checkAnswer\">Next<\/button>\n <\/div>\n<\/template>\n<\/code><\/pre>\n\n- Update the
checkAnswer<\/code> method to check the selected answer:<\/li>\n<\/ol>\n<script>\nexport default {\n data() {\n return {\n currentQuestion: {},\n selectedAnswer: null\n }\n },\n created() {\n this.fetchQuestions()\n },\n methods: {\n async fetchQuestions() {\n \/\/ ...\n },\n checkAnswer() {\n if (this.selectedAnswer === this.currentQuestion.answer) {\n alert('Correct answer!')\n } else {\n alert('Wrong answer, try again!')\n }\n this.selectedAnswer = null\n }\n }\n}\n<\/script>\n<\/code><\/pre>\n