update quiz app dependencies

quiz-app/.eslintrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  extends: [
+    'plugin:vue/vue3-recommended',
+  ],
+  rules: {
+    'vue/multi-word-component-names': 'off'
+  }
+}

quiz-app/babel.config.js

@@ -1,5 +0,0 @@
-module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset'
-  ]
-}

quiz-app/package.json

@@ -14,12 +14,13 @@
     "vue-router": "^3.4.9"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~5.0.8",
+    "@babel/core": "^7.20.5",
-    "@vue/cli-plugin-eslint": "~5.0.8",
+    "@babel/eslint-parser": "^7.19.1",
-    "@vue/cli-service": "~5.0.8",
+    "@vue/cli-plugin-babel": "^5.0.8",
-    "babel-eslint": "^10.1.0",
+    "@vue/cli-plugin-eslint": "^5.0.8",
-    "eslint": "^6.7.2",
+    "@vue/cli-service": "^5.0.8",
-    "eslint-plugin-vue": "^6.2.2",
+    "eslint": "^8.29.0",
+    "eslint-plugin-vue": "^9.8.0",
     "vue-template-compiler": "^2.6.11"
   },
   "eslintConfig": {

quiz-app/src/App.vue

@@ -1,10 +1,20 @@
 <template>
   <div>
     <nav>
-      <router-link class="navlink" to="/">Home</router-link>
+      <router-link
+        class="navlink"
+        to="/"
+      >
+        Home
+      </router-link>
       <label for="locale">locale</label>
       <select v-model="locale">
-        <option v-for="localeName in availableLocales" :key="localeName">{{ localeName }}</option>
+        <option
+          v-for="localeName in availableLocales"
+          :key="localeName"
+        >
+          {{ localeName }}
+        </option>
       </select>
     </nav>
     <div id="app">

quiz-app/src/components/Quiz.vue

@@ -1,21 +1,34 @@
 <template>
   <div class="card">
-    <div v-for="q in questions" :key="q.id">
+    <div
+      v-for="q in questions"
+      :key="q.id"
+    >
       <div v-if="route == q.id">
         <h2>{{ q.title }}</h2>
-        <hr />
+        <hr>
-        <h3 v-if="complete" class="message">{{ $t("complete") }}</h3>
+        <h3
+          v-if="complete"
+          class="message"
+        >
+          {{ $t("complete") }}
+        </h3>
         <div v-else>
-          <h3 v-if="error" class="error">{{ $t("error") }}</h3>
+          <h3
+            v-if="error"
+            class="error"
+          >
+            {{ $t("error") }}
+          </h3>
           <h2>
             {{ q.quiz[currentQuestion].questionText }}
           </h2>
           <div>
             <button
-              :key="index"
               v-for="(option, index) in q.quiz[currentQuestion].answerOptions"
-              @click="handleAnswerClick(option.isCorrect)"
+              :key="index"
               class="btn ans-btn"
+              @click="handleAnswerClick(option.isCorrect)"
             >
               {{ option.answerText }}
             </button>
@@ -47,6 +60,10 @@ export default {
   },
 
   i18n: { messages },
+  created() {
+    this.route = this.$route.params.id;
+    this.locale = this.$route.query.loc;
+  },
   methods: {
     handleAnswerClick(isCorrect) {
       this.error = false;
@@ -63,9 +80,5 @@ export default {
       }
     },
   },
-  created() {
-    this.route = this.$route.params.id;
-    this.locale = this.$route.query.loc;
-  },
 };
 </script>