i18n localizations

quiz-app/src/App.vue

@@ -9,7 +9,7 @@
       </select>
     </nav>
     <div id="app">
-      <h1>{{ $t("message.title") }}</h1>
+      <h1>{{ $t("title") }}</h1>
       <router-view>
         <Quiz />
       </router-view>
@@ -19,7 +19,7 @@
 
 <script>
 import Quiz from "@/components/Quiz.vue";
-import messages from "@/assets/translations/messages";
+import messages from "@/assets/translations";
 
 export default {
   name: "App",

quiz-app/src/assets/translations/index.js

@@ -0,0 +1,12 @@
+// index.js
+import en from './en.json';
+import fr from './fr.json';
+
+//export const defaultLocale = 'en';
+
+const messages = {
+	en: en[0],
+	fr: fr[0],
+};
+
+export default messages;

quiz-app/src/assets/translations/messages.js

@@ -1,16 +0,0 @@
-export default {
-	en: {
-		message: {
-			title: 'Web Development for Beginners: Quizzes',
-			complete: 'Congratulations, you completed the quiz!',
-			error: 'Sorry, try again',
-		},
-	},
-	fr: {
-		message: {
-			title: 'Developpement Web pour Débutants: Quizzes',
-			complete: 'Felicitations, vous avez completé le quiz!',
-			error: 'Désolé, réessayez!',
-		},
-	},
-};

quiz-app/src/components/Quiz.vue

@@ -2,9 +2,9 @@
   <div class="card">
     <div v-for="q in questions" :key="q.id">
       <div v-if="route == q.id">
-        <h3 v-if="complete" class="message">{{ $t("message.complete") }}</h3>
+        <h3 v-if="complete" class="message">{{ $t("complete") }}</h3>
         <div v-else>
-          <h3 v-if="error" class="error">{{ $t("message.error") }}</h3>
+          <h3 v-if="error" class="error">{{ $t("error") }}</h3>
           <h2>
             {{ q.quiz[currentQuestion].questionText }}
           </h2>
@@ -25,8 +25,7 @@
 </template>
 
 <script>
-import questions from "@/assets/translations/en/quiz.json";
-import messages from "@/assets/translations/messages";
+import messages from "@/assets/translations";
 
 export default {
   data() {
@@ -34,8 +33,8 @@ export default {
       currentQuestion: 0,
       complete: false,
       error: false,
-      questions: questions,
       route: "",
+      questions: this.$t("quizzes"),
     };
   },
 
@@ -57,6 +56,8 @@ export default {
     },
   },
   created() {
+    //console.log(this.$root.$i18n.locale,this.$i18n.locale);
+    //this.questions = this.$i18n.messages + "." + this.$i18n.locale;
     this.route = this.$route.params.id;
   },
 };

quiz-app/src/main.js

@@ -8,9 +8,7 @@ Vue.use(VueI18n);
 
 const i18n = new VueI18n({
 	locale: 'en',
-	messages: {
-		en: {},
-	},
+	fallbackLocale: 'en',
 });
 
 new Vue({ i18n, router, render: (h) => h(App) }).$mount('#app');