feat: use vue-i18n 9 for vue3

src/components/input/datepicker.vue

@@ -112,6 +112,7 @@
 <script>
 import flatPickr from 'vue-flatpickr-component'
 import 'flatpickr/dist/flatpickr.css'
+import { i18n } from '@/i18n'
 
 import {format} from 'date-fns'
 import {calculateDayInterval} from '@/helpers/time/calculateDayInterval'
@@ -142,7 +143,7 @@ export default {
 		chooseDateLabel: {
 			type: String,
 			default() {
-				return this.$t('input.datepicker.chooseDate')
+				return i18n.global.t('input.datepicker.chooseDate')
 			},
 		},
 		disabled: {

src/components/input/multiselect.vue

@@ -81,6 +81,7 @@
 </template>
 
 <script>
+import { i18n } from '@/i18n'
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
 
 export default {
@@ -141,14 +142,14 @@ export default {
 		createPlaceholder: {
 			type: String,
 			default() {
-				return this.$t('input.multiselect.createPlaceholder')
+				return i18n.global.t('input.multiselect.createPlaceholder')
 			},
 		},
 		// The text shown next to an option.
 		selectPlaceholder: {
 			type: String,
 			default() {
-				return this.$t('input.multiselect.selectPlaceholder')
+				return i18n.global.t('input.multiselect.selectPlaceholder')
 			},
 		},
 		// If true, allows for selecting multiple items. v-model will be an array with all selected values in that case.

src/components/misc/api-config.vue

@@ -23,9 +23,9 @@
 			</div>
 		</div>
 		<div class="api-url-info" v-else>
-			<i18n path="apiConfig.signInOn">
+			<i18n-t keypath="apiConfig.signInOn">
 				<span class="url" v-tooltip="apiUrl"> {{ apiDomain }} </span>
-			</i18n>
+			</i18n-t>
 			<br />
 			<a @click="() => (configureApi = true)">{{ $t('apiConfig.change') }}</a>
 		</div>

src/components/misc/create-edit.vue

@@ -43,6 +43,8 @@
 </template>
 
 <script>
+import { i18n } from '@/i18n'
+
 export default {
 	name: 'create-edit',
 	props: {
@@ -53,7 +55,7 @@ export default {
 		primaryLabel: {
 			type: String,
 			default() {
-				return this.$t('misc.create')
+				return i18n.global.t('misc.create')
 			},
 		},
 		primaryIcon: {

src/components/misc/error.vue

@@ -1,9 +1,9 @@
 <template>
 	<div class="notification is-danger">
-		<i18n path="loadingError.failed">
+		<i18n-t keypath="loadingError.failed">
 			<a @click="() => location.reload()">{{ $t('loadingError.tryAgain') }}</a>
 			<a href="https://vikunja.io/contact/" rel="noreferrer noopener nofollow" target="_blank">{{ $t('loadingError.contact') }}</a>
-		</i18n>
+		</i18n-t>
 	</div>
 </template>
 

src/components/tasks/partials/attachments.vue

@@ -35,7 +35,7 @@
 				<div class="filename">{{ a.file.name }}</div>
 				<div class="info">
 					<p class="collapses">
-						<i18n path="task.attachment.createdBy">
+						<i18n-t keypath="task.attachment.createdBy">
 							<span v-tooltip="formatDate(a.created)">
 								{{ formatDateSince(a.created) }}
 							</span>
@@ -44,7 +44,7 @@
 								:user="a.createdBy"
 								:is-inline="true"
 							/>
-						</i18n>
+						</i18n-t>
 						<span>
 							{{ a.file.getHumanSize() }}
 						</span>