install vue-i18n and use translation API for static text

getodk · Jul 26, 2024 · 86e6bba · 86e6bba
1 parent 6236b20
commit 86e6bba
Show file tree

Hide file tree

Showing 5 changed files with 229 additions and 22 deletions.
diff --git a/packages/web-forms/package.json b/packages/web-forms/package.json
@@ -64,7 +64,9 @@
     "vite": "^5.3.3",
     "vite-plugin-css-injected-by-js": "^3.5.1",
     "vitest": "^2.0.2",
-    "vue": "3.3.4"
+    "vue": "3.3.4",
+    "vue-i18n": "^9.13.1",
+    "@intlify/unplugin-vue-i18n": "^4.0.0"
   },
   "peerDependencies": {
     "vue": "^3.3.4"

diff --git a/packages/web-forms/src/WebFormsPlugin.ts b/packages/web-forms/src/WebFormsPlugin.ts
@@ -1,8 +1,14 @@
 import PrimeVue from 'primevue/config';
 import { type App } from 'vue';
+import { createI18n } from 'vue-i18n';
+
+const i18n = createI18n({
+  locale: 'en'
+});
 
 export const webFormsPlugin = {
 	install(app: App) {
 		app.use(PrimeVue, { ripple: false }); // Collect has no ripple
+		app.use(i18n);
 	},
 };
diff --git a/packages/web-forms/src/components/FormHeader.vue b/packages/web-forms/src/components/FormHeader.vue
@@ -1,10 +1,13 @@
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+const { t } = useI18n() 
+
 import { type FormLanguage, type RootNode, type SyntheticDefaultLanguage } from '@getodk/xforms-engine';
 import PrimeButton from 'primevue/button';
 import PrimeCard from 'primevue/card';
 import PrimeMenu from 'primevue/menu';
 import PrimeMessage from 'primevue/message';
-import { computed, inject, ref } from 'vue';
+import { inject, ref } from 'vue';
 import FormLanguageDialog from './FormLanguageDialog.vue';
 import FormLanguageMenu from './FormLanguageMenu.vue';
 
@@ -20,13 +23,6 @@ const languages = props.form.languages.filter(isFormLanguage);
 
 const print = () => window.print();
 
-const formErrorMessage = computed(() => {
-	const violationLength = props.form.validationState.violations.length;
-
-	if(violationLength === 0) return '';
-	else if(violationLength === 1) return '1 question with error';
-	else return `${violationLength} questions with errors`;
-});
 
 const items = ref([
 	{
@@ -60,8 +56,8 @@ const submitPressed = inject('submitPressed');
 <template>
 	<!-- for desktop -->
 	<div class="hidden lg:inline larger-screens">
-		<PrimeMessage v-if="formErrorMessage" v-show="submitPressed" severity="error" icon="icon-error_outline" class="form-error-message" :closable="false">
-			{{ formErrorMessage }}
+		<PrimeMessage v-if="form.validationState.violations.length > 0" v-show="submitPressed" severity="error" icon="icon-error_outline" class="form-error-message" :closable="false">
+			{{ t('formErrorMessage', form.validationState.violations.length) }}
 			<span class="fix-errors" @click="scrollToFirstInvalidQuestion()">Fix errors</span>
 		</PrimeMessage>
 		<div class="flex justify-content-end flex-wrap gap-3">
@@ -112,8 +108,8 @@ const submitPressed = inject('submitPressed');
 				/>
 			</div>
 		</div>
-		<PrimeMessage v-if="formErrorMessage" v-show="submitPressed" severity="error" icon="icon-error_outline" class="form-error-message" :closable="false">
-			{{ formErrorMessage }}
+		<PrimeMessage v-if="form.validationState.violations.length > 0" v-show="submitPressed" severity="error" icon="icon-error_outline" class="form-error-message" :closable="false">
+			{{ t('formErrorMessage', form.validationState.violations.length) }}
 			<span class="fix-errors" @click="scrollToFirstInvalidQuestion()">Fix errors</span>
 		</PrimeMessage>
 	</div>
@@ -210,3 +206,11 @@ const submitPressed = inject('submitPressed');
 }
 
 </style>
+
+<i18n lang="json5">
+	{
+	"en": {
+		"formErrorMessage": "1 question with error | {count} questions with errors"
+		}
+	}
+</i18n>
diff --git a/packages/web-forms/vite.config.ts b/packages/web-forms/vite.config.ts
@@ -1,3 +1,4 @@
+import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite';
 import vue from '@vitejs/plugin-vue';
 import vueJsx from '@vitejs/plugin-vue-jsx';
 import { fileURLToPath, URL } from 'node:url';
@@ -6,7 +7,7 @@ import { defineConfig } from 'vite';
 import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
 
 export default defineConfig({
-	plugins: [vue(), vueJsx(), cssInjectedByJsPlugin()],
+	plugins: [vue(), vueJsx(), cssInjectedByJsPlugin(), VueI18nPlugin({})],
 	resolve: {
 		alias: {
 			'@': fileURLToPath(new URL('./src', import.meta.url)),