* switch vuei18n completely to composition api

client/src/App.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import { PortalTarget } from 'portal-vue';
+import { useI18n } from 'vue-i18n';
+const { t } = useI18n();
 </script>
 
 <template>
   <div class="container min-vh-100">
     <div class="d-flex min-vh-100 flex-column justify-content-evenly align-items-center">
-      <img class="w-lg-50 w-100 my-2" src="@/assets/images/logo.png" :alt="$t('strikeOrSike')" />
+      <img class="w-lg-50 w-100 my-2" src="@/assets/images/logo.png" :alt="t('strikeOrSike')" />
       <router-view class="mt-2 mb-5" />
       <portal-target name="banner" class="mb-2" />
     </div>

client/src/components/gameShared/SelectionType.vue

@@ -30,7 +30,7 @@ const { t } = useI18n();
 <template>
   <img
     v-if="tooltip"
-    v-tooltip.left.ds750="$t('tooltip.' + gameStore.selectionType)"
+    v-tooltip.left.ds750="t('tooltip.' + gameStore.selectionType)"
     :src="typeImg"
     :alt="t(gameStore.selectionType)"
     :class="{ 'sike-img': gameStore.selectionType === 'sike' }" />

client/src/components/gameShared/TooltipToggle.vue

@@ -1,18 +1,21 @@
 <script setup lang="ts">
 import { getCurrentInstance } from 'vue';
 import { useSettingsStore } from '@/stores/settings.js';
+import { useI18n } from 'vue-i18n';
 
 const settingsStore = useSettingsStore();
 const instance = getCurrentInstance();
 function click() {
   settingsStore.setShowTooltips(!settingsStore.showTooltips);
   instance?.proxy?.$forceUpdate();
 }
+
+const { t } = useI18n();
 </script>
 
 <template>
   <button
-    v-tooltip.left.ds250="$t('tooltip.showTooltips')"
+    v-tooltip.left.ds250="t('tooltip.showTooltips')"
     class="text-black"
     :class="{ 'bi-lightbulb': settingsStore.showTooltips, 'bi-lightbulb-off': !settingsStore.showTooltips }"
     @click="click" />

client/src/components/lobby/Lobby.vue

@@ -6,6 +6,7 @@ import socket from '@/socket/socket';
 import { AudioWrap } from '@/mixins/audiowrap';
 import ClickMp3 from '@/assets/audio/click2.mp3';
 import { useRoomStore } from '@/stores/room';
+import { useI18n } from 'vue-i18n';
 const click = new AudioWrap(ClickMp3);
 const roomStore = useRoomStore();
 
@@ -20,6 +21,8 @@ function startGame() {
   click.play();
   socket.emit('startGame');
 }
+
+const { t } = useI18n();
 </script>
 <template>
   <div class="w-100 d-flex flex-column justify-content-between align-items-center gap-3 pt-1 pb-4">
@@ -28,7 +31,7 @@ function startGame() {
 
     <div class="w-100 d-flex flex-column justify-content-start align-items-center gap-3">
       <options :disabled="!leader" />
-      <span v-tooltip.left="canStart ? '' : $t('tooltip.startDisabled')" class="d-inline-block w-50 w-lg-25">
+      <span v-tooltip.left="canStart ? '' : t('tooltip.startDisabled')" class="d-inline-block w-50 w-lg-25">
         <button
           v-t="'startGame'"
           class="btn btn-blue fs-4 w-100"

client/src/components/lobby/Options.vue

@@ -131,7 +131,7 @@ const { t } = useI18n();
                   class="form-control fs-6"
                   :class="{ Disabled: !customSelected }"
                   :disabled="!customSelected"
-                  :placeholder="$t('customPromptsPlaceholder')"
+                  :placeholder="t('customPromptsPlaceholder')"
                   rows="3"
                   @focusout="customPromptsChange($event)" />
               </div>
@@ -142,7 +142,7 @@ const { t } = useI18n();
                 <input
                   id="timerDuration"
                   ref="timerDuration"
-                  v-tooltip.left="$t('tooltip.options.timer')"
+                  v-tooltip.left="t('tooltip.options.timer')"
                   type="number"
                   min="15"
                   max="60"
@@ -157,7 +157,7 @@ const { t } = useI18n();
                 <label v-t="'numRoundsLabel'" for="numRounds" class="form-label" />
                 <input
                   id="numRounds"
-                  v-tooltip.right="$t('tooltip.options.rounds')"
+                  v-tooltip.right="t('tooltip.options.rounds')"
                   type="number"
                   min="1"
                   max="20"
@@ -175,7 +175,7 @@ const { t } = useI18n();
                   <label v-t="'sikeDisputeLabel'" for="sikeDispute" class="form-check-label" />
                   <input
                     id="sikeDispute"
-                    v-tooltip.left="$t('tooltip.options.dispute')"
+                    v-tooltip.left="t('tooltip.options.dispute')"
                     type="checkbox"
                     class="form-check-input"
                     :class="{ Disabled: disabled }"
@@ -188,7 +188,7 @@ const { t } = useI18n();
                 <label v-t="'sikeRetriesLabel'" for="sikeRetries" class="form-label" />
                 <input
                   id="sikeRetries"
-                  v-tooltip.right="$t('tooltip.options.retries')"
+                  v-tooltip.right="t('tooltip.options.retries')"
                   type="number"
                   min="0"
                   max="2"

client/src/components/promptResponse/VoteSkip.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import NotificationCount from '@/components/gameShared/NotificationCount.vue';
 import { ref } from 'vue';
 import { AudioWrap } from '@/mixins/audiowrap.js';
 import ClickMp3 from '@/assets/audio/click2.mp3';
@@ -15,12 +16,12 @@ function sendVote() {
   socket.emit('pollVote', 'skipPrompt');
 }
 
-const { n } = useI18n();
+const { t, n } = useI18n();
 </script>
 
 <template>
   <a
-    v-tooltip.right="$t('tooltip.voteSkip')"
+    v-tooltip.right="t('tooltip.voteSkip')"
     class="btn btn-sm btn-blue ratio-1x1 position-relative d-inline-flex justify-content-center align-items-center"
     :class="{
       'text-white shadow': !pressedVote,

client/src/components/responseMatching/ActiveMatching.vue

@@ -56,7 +56,7 @@ const { t } = useI18n();
     </i18n-t>
 
     <button
-      v-tooltip.left.ds900="$t('tooltip.noMatch', { response: gameStore.selectedResponse })"
+      v-tooltip.left.ds900="t('tooltip.noMatch', { response: gameStore.selectedResponse })"
       class="btn btn-primary w-50 fs-4 d-flex justify-content-center align-items-center"
       @click="noMatch">
       <div class="d-flex justify-content-center align-items-center w-75">

client/src/views/Home.vue

@@ -7,6 +7,7 @@ import { useGameStore } from '@/stores/game.js';
 import { useRoomStore } from '@/stores/room.js';
 import { useRoute } from 'vue-router';
 import socket from '@/socket/socket';
+import { useI18n } from 'vue-i18n';
 const click = new AudioWrap(ClickMp3);
 
 const route = useRoute();
@@ -32,6 +33,8 @@ function onSubmit(joinGame: boolean) {
   roomStore.setName(form.name);
   socket.emit(event, form.name, form.roomName, navigator.languages);
 }
+
+const { t } = useI18n();
 </script>
 
 <template>
@@ -47,7 +50,7 @@ function onSubmit(joinGame: boolean) {
           v-model="form.name"
           type="text"
           class="form-control"
-          :placeholder="$t('usernamePlaceholder')" />
+          :placeholder="t('usernamePlaceholder')" />
       </div>
 
       <div class="mb-3">
@@ -57,7 +60,7 @@ function onSubmit(joinGame: boolean) {
           v-model="form.roomName"
           type="text"
           class="form-control"
-          :placeholder="$t('roomNamePlaceholder')" />
+          :placeholder="t('roomNamePlaceholder')" />
       </div>
 
       <div class="d-flex flex-column flex-lg-row justify-content-around align-items-center mt-5 mb-3 gap-3">
@@ -70,9 +73,9 @@ function onSubmit(joinGame: boolean) {
         <router-link v-t="'howToPlayLink'" class="row text-center link-blue fs-5" to="/how-to-play" />
         <a href="https://www.buymeacoffee.com/ConorMurphy/" class="row text-center fs-4 link-dark font-fancy">
           <div class="d-flex align-items-center justify-content-center gap-1">
-            <img :alt="$t('coffeeAlt')" src="https://cdn.buymeacoffee.com/buttons/bmc-new-btn-logo.svg" height="25" />
+            <img :alt="t('coffeeAlt')" src="https://cdn.buymeacoffee.com/buttons/bmc-new-btn-logo.svg" height="25" />
             <span v-t="'coffeeLink'" />
-            <img :alt="$t('coffeeAlt')" src="https://cdn.buymeacoffee.com/buttons/bmc-new-btn-logo.svg" height="25" />
+            <img :alt="t('coffeeAlt')" src="https://cdn.buymeacoffee.com/buttons/bmc-new-btn-logo.svg" height="25" />
           </div>
         </a>
       </div>