Changes:

- Closes #9 - Removed dependency on vue-i18n - Localization Changes
2025-06-27 20:58:01 +02:00 · 2022-09-12 15:00:54 +00:00 · 2022-09-12 15:00:54 +00:00 · fcc3d455c6
commit fcc3d455c6
parent 44db54737b
18 changed files with 143 additions and 270 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -17,7 +17,6 @@
        "shaka-player": "^4.2.1",
        "stream-browserify": "^3.0.0",
        "vue": "^3.2.38",
-        "vue-i18n": "^9.2.2",
        "xml-js": "^1.6.11"
      },
      "devDependencies": {
@ -64,63 +63,6 @@
        "node": ">=12"
      }
    },
-    "node_modules/@intlify/core-base": {
-      "version": "9.2.2",
-      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.2.2.tgz",
-      "integrity": "sha512-JjUpQtNfn+joMbrXvpR4hTF8iJQ2sEFzzK3KIESOx+f+uwIjgw20igOyaIdhfsVVBCds8ZM64MoeNSx+PHQMkA==",
-      "dependencies": {
-        "@intlify/devtools-if": "9.2.2",
-        "@intlify/message-compiler": "9.2.2",
-        "@intlify/shared": "9.2.2",
-        "@intlify/vue-devtools": "9.2.2"
-      },
-      "engines": {
-        "node": ">= 14"
-      }
-    },
-    "node_modules/@intlify/devtools-if": {
-      "version": "9.2.2",
-      "resolved": "https://registry.npmjs.org/@intlify/devtools-if/-/devtools-if-9.2.2.tgz",
-      "integrity": "sha512-4ttr/FNO29w+kBbU7HZ/U0Lzuh2cRDhP8UlWOtV9ERcjHzuyXVZmjyleESK6eVP60tGC9QtQW9yZE+JeRhDHkg==",
-      "dependencies": {
-        "@intlify/shared": "9.2.2"
-      },
-      "engines": {
-        "node": ">= 14"
-      }
-    },
-    "node_modules/@intlify/message-compiler": {
-      "version": "9.2.2",
-      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.2.2.tgz",
-      "integrity": "sha512-IUrQW7byAKN2fMBe8z6sK6riG1pue95e5jfokn8hA5Q3Bqy4MBJ5lJAofUsawQJYHeoPJ7svMDyBaVJ4d0GTtA==",
-      "dependencies": {
-        "@intlify/shared": "9.2.2",
-        "source-map": "0.6.1"
-      },
-      "engines": {
-        "node": ">= 14"
-      }
-    },
-    "node_modules/@intlify/shared": {
-      "version": "9.2.2",
-      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.2.2.tgz",
-      "integrity": "sha512-wRwTpsslgZS5HNyM7uDQYZtxnbI12aGiBZURX3BTR9RFIKKRWpllTsgzHWvj3HKm3Y2Sh5LPC1r0PDCKEhVn9Q==",
-      "engines": {
-        "node": ">= 14"
-      }
-    },
-    "node_modules/@intlify/vue-devtools": {
-      "version": "9.2.2",
-      "resolved": "https://registry.npmjs.org/@intlify/vue-devtools/-/vue-devtools-9.2.2.tgz",
-      "integrity": "sha512-+dUyqyCHWHb/UcvY1MlIpO87munedm3Gn6E9WWYdWrMuYLcoIoOEVDWSS8xSwtlPU+kA+MEQTP6Q1iI/ocusJg==",
-      "dependencies": {
-        "@intlify/core-base": "9.2.2",
-        "@intlify/shared": "9.2.2"
-      },
-      "engines": {
-        "node": ">= 14"
-      }
-    },
    "node_modules/@swc/helpers": {
      "version": "0.3.17",
      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.3.17.tgz",
@ -1147,23 +1089,6 @@
        "@vue/shared": "3.2.39"
      }
    },
-    "node_modules/vue-i18n": {
-      "version": "9.2.2",
-      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.2.2.tgz",
-      "integrity": "sha512-yswpwtj89rTBhegUAv9Mu37LNznyu3NpyLQmozF3i1hYOhwpG8RjcjIFIIfnu+2MDZJGSZPXaKWvnQA71Yv9TQ==",
-      "dependencies": {
-        "@intlify/core-base": "9.2.2",
-        "@intlify/shared": "9.2.2",
-        "@intlify/vue-devtools": "9.2.2",
-        "@vue/devtools-api": "^6.2.1"
-      },
-      "engines": {
-        "node": ">= 14"
-      },
-      "peerDependencies": {
-        "vue": "^3.0.0"
-      }
-    },
    "node_modules/webrtc-adapter": {
      "version": "7.7.1",
      "resolved": "https://registry.npmjs.org/webrtc-adapter/-/webrtc-adapter-7.7.1.tgz",
@ -1210,48 +1135,6 @@
      "dev": true,
      "optional": true
    },
-    "@intlify/core-base": {
-      "version": "9.2.2",
-      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.2.2.tgz",
-      "integrity": "sha512-JjUpQtNfn+joMbrXvpR4hTF8iJQ2sEFzzK3KIESOx+f+uwIjgw20igOyaIdhfsVVBCds8ZM64MoeNSx+PHQMkA==",
-      "requires": {
-        "@intlify/devtools-if": "9.2.2",
-        "@intlify/message-compiler": "9.2.2",
-        "@intlify/shared": "9.2.2",
-        "@intlify/vue-devtools": "9.2.2"
-      }
-    },
-    "@intlify/devtools-if": {
-      "version": "9.2.2",
-      "resolved": "https://registry.npmjs.org/@intlify/devtools-if/-/devtools-if-9.2.2.tgz",
-      "integrity": "sha512-4ttr/FNO29w+kBbU7HZ/U0Lzuh2cRDhP8UlWOtV9ERcjHzuyXVZmjyleESK6eVP60tGC9QtQW9yZE+JeRhDHkg==",
-      "requires": {
-        "@intlify/shared": "9.2.2"
-      }
-    },
-    "@intlify/message-compiler": {
-      "version": "9.2.2",
-      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.2.2.tgz",
-      "integrity": "sha512-IUrQW7byAKN2fMBe8z6sK6riG1pue95e5jfokn8hA5Q3Bqy4MBJ5lJAofUsawQJYHeoPJ7svMDyBaVJ4d0GTtA==",
-      "requires": {
-        "@intlify/shared": "9.2.2",
-        "source-map": "0.6.1"
-      }
-    },
-    "@intlify/shared": {
-      "version": "9.2.2",
-      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.2.2.tgz",
-      "integrity": "sha512-wRwTpsslgZS5HNyM7uDQYZtxnbI12aGiBZURX3BTR9RFIKKRWpllTsgzHWvj3HKm3Y2Sh5LPC1r0PDCKEhVn9Q=="
-    },
-    "@intlify/vue-devtools": {
-      "version": "9.2.2",
-      "resolved": "https://registry.npmjs.org/@intlify/vue-devtools/-/vue-devtools-9.2.2.tgz",
-      "integrity": "sha512-+dUyqyCHWHb/UcvY1MlIpO87munedm3Gn6E9WWYdWrMuYLcoIoOEVDWSS8xSwtlPU+kA+MEQTP6Q1iI/ocusJg==",
-      "requires": {
-        "@intlify/core-base": "9.2.2",
-        "@intlify/shared": "9.2.2"
-      }
-    },
    "@swc/helpers": {
      "version": "0.3.17",
      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.3.17.tgz",
@ -1873,17 +1756,6 @@
        "@vue/shared": "3.2.39"
      }
    },
-    "vue-i18n": {
-      "version": "9.2.2",
-      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.2.2.tgz",
-      "integrity": "sha512-yswpwtj89rTBhegUAv9Mu37LNznyu3NpyLQmozF3i1hYOhwpG8RjcjIFIIfnu+2MDZJGSZPXaKWvnQA71Yv9TQ==",
-      "requires": {
-        "@intlify/core-base": "9.2.2",
-        "@intlify/shared": "9.2.2",
-        "@intlify/vue-devtools": "9.2.2",
-        "@vue/devtools-api": "^6.2.1"
-      }
-    },
    "webrtc-adapter": {
      "version": "7.7.1",
      "resolved": "https://registry.npmjs.org/webrtc-adapter/-/webrtc-adapter-7.7.1.tgz",
--- a/package.json
+++ b/package.json
@ -19,7 +19,6 @@
    "shaka-player": "^4.2.1",
    "stream-browserify": "^3.0.0",
    "vue": "^3.2.38",
-    "vue-i18n": "^9.2.2",
    "xml-js": "^1.6.11"
  },
  "devDependencies": {
--- a/src/App.vue
+++ b/src/App.vue
@ -18,15 +18,15 @@ import Prefs from '@/components/Prefs.vue';

 /* Composables */
 import { useStore } from '@/scripts/util.js';
-import { useT, useSetupLocale } from '@/scripts/i18n.js';
 import { useSetupDB, useUpdatePlaylist } from '@/scripts/db.js';

 /* Stores */
 import { useData, usePlayer } from '@/stores/player.js';
 import { useResults, useArtist } from '@/stores/results.js';
-import { useNav } from '@/stores/misc.js';
+import { useNav, useI18n } from '@/stores/misc.js';

-const store = useStore(),
+const { t, setupLocale } = useI18n(),
+  store = useStore(),
  data = useData(),
  player = usePlayer(),
  results = useResults(),
@ -101,7 +101,7 @@ onBeforeMount(() => {

  /* Set the default locale if set */
  if (store.locale) {
-    useSetupLocale(store.locale);
+    setupLocale(store.locale);
  }
 });

@ -160,7 +160,7 @@ onMounted(() => {
    </div>
  </header>

-  <main class="placeholder" :data-placeholder="useT('info.search')">
+  <main class="placeholder" :data-placeholder="t('info.search')">
    <KeepAlive>
      <Search v-if="nav.state.page == 'home'" @play-urls="playList" />
    </KeepAlive>
--- a/src/assets/base.css
+++ b/src/assets/base.css
@ -181,6 +181,7 @@ body {
 }

 button {
+  padding: 1px 6px;
  border: none;
  background: transparent;
  color: var(--color-text);
--- a/src/components/Genres.vue
+++ b/src/components/Genres.vue
@ -5,12 +5,13 @@ import { useResults } from '@/stores/results.js';

 import { getJsonHyp } from '@/scripts/fetch.js';
 import { useRoute } from '@/scripts/util.js';
-import { useT } from '@/scripts/i18n.js';
+import { useI18n } from '@/stores/misc.js';

 import AlbumItem from './AlbumItem.vue';

 const props = defineProps(['id']),
-  { getAlbum } = useResults();
+  { getAlbum } = useResults(),
+  { t } = useI18n();

 const data = reactive({
    title: '',
@ -57,12 +58,12 @@ onMounted(get);

 <template>
  <template v-if="data.title">
-    <i class="bi bi-arrow-left back" @click="get"> {{ useT('action.back') }}</i>
+    <i class="bi bi-arrow-left back" @click="get"> {{ t('action.back') }}</i>

    <h2 class="head">{{ data.title }}</h2>

    <template v-for="type in ['featured', 'spotlight', 'community']">
-      <h3 class="head">{{ useT('title.' + type) }}</h3>
+      <h3 class="head">{{ t('title.' + type) }}</h3>
      <div class="grid-3">
        <template v-for="i in data[type]">
          <AlbumItem
@ -79,7 +80,7 @@ onMounted(get);
  </template>

  <template v-else>
-    <h2 v-if="btns.moods.length > 0">{{ useT('title.moods') }}</h2>
+    <h2 v-if="btns.moods.length > 0">{{ t('title.moods') }}</h2>

    <div class="btn-grid">
      <button
@ -91,7 +92,7 @@ onMounted(get);
      </button>
    </div>

-    <h2 v-if="btns.genres.length > 0">{{ useT('title.genres') }}</h2>
+    <h2 v-if="btns.genres.length > 0">{{ t('title.genres') }}</h2>

    <div class="btn-grid">
      <button
--- a/src/components/Info.vue
+++ b/src/components/Info.vue
@ -1,17 +1,18 @@
 <script setup>
-import { useT } from '@/scripts/i18n.js';
+import { useI18n } from '@/stores/misc.js';
+
 import TextModal from './TextModal.vue';

 defineProps(['text']);

-const parse = d =>
-  new DOMParser().parseFromString(d, 'text/html').body.innerText;
+const { t } = useI18n(),
+  parse = d => new DOMParser().parseFromString(d, 'text/html').body.innerText;
 </script>

 <template>
  <TextModal>
    <template #content>
-      <pre class="placeholder" :data-placeholder="useT('info.no_info')">{{ 
+      <pre class="placeholder" :data-placeholder="t('info.no_info')">{{ 
        text ? parse(text.replaceAll('<br>', '\n')) : ''
      }}</pre>
    </template>
--- a/src/components/Lyrics.vue
+++ b/src/components/Lyrics.vue
@ -3,11 +3,12 @@ import { ref, watch } from 'vue';

 import { getJsonHyp } from '@/scripts/fetch.js';
 import { useData } from '@/stores/player.js';
-import { useT } from '@/scripts/i18n.js';
+import { useI18n } from '@/stores/misc.js';

 import TextModal from './TextModal.vue';

-const data = useData(),
+const { t } = useI18n(),
+  data = useData(),
  text = ref(''),
  source = ref(''),
  status = ref(false);
@ -51,8 +52,8 @@ watch(
        class="placeholder"
        :data-placeholder="
          data.state.urls[0]?.url && !status
-            ? useT('info.lyrics.load')
-            : useT('info.lyrics.void')
+            ? t('lyrics.load')
+            : t('lyrics.void')
        "
        >{{ text }}</pre
      >
--- a/src/components/NewPlaylist.vue
+++ b/src/components/NewPlaylist.vue
@ -7,7 +7,7 @@ import Modal from './Modal.vue';
 import { useRand } from '@/scripts/colors.js';
 import { useStore } from '@/scripts/util.js';
 import { getJsonAuth, getAuthPlaylists } from '@/scripts/fetch.js';
-import { useT } from '@/scripts/i18n.js';
+import { useI18n } from '@/stores/misc.js';

 import {
  useListPlaylists,
@ -16,7 +16,8 @@ import {
  useUpdatePlaylist,
 } from '../scripts/db.js';

-const store = useStore(),
+const { t } = useI18n(),
+  store = useStore(),
  auth = ref(!!store.auth);

 const emit = defineEmits(['play-urls', 'open-playlist']),
@ -202,7 +203,7 @@ onMounted(async () => {
    <Modal
      n="2"
      :display="show.new"
-      :title="useT('playlist.create')"
+      :title="t('playlist.create')"
      @show="
        e => {
          show.new = e;
@ -211,10 +212,10 @@ onMounted(async () => {
      <template #content>
        <div v-if="auth" class="tabs">
          <button :data-active="!user.create" @click="user.create = false">
-            {{ useT('title.local') }}
+            {{ t('title.local') }}
          </button>
          <button :data-active="user.create" @click="user.create = true">
-            {{ useT('title.remote') }}
+            {{ t('title.remote') }}
          </button>
        </div>

@ -225,9 +226,9 @@ onMounted(async () => {
          v-model="text" />
      </template>
      <template #buttons>
-        <button @click="show.new = false">{{ useT('action.cancel') }}</button>
+        <button @click="show.new = false">{{ t('action.cancel') }}</button>
        <button @click="user.create ? createPlaylist() : Create()">
-          {{ useT('action.create') }}
+          {{ t('action.create') }}
        </button>
      </template>
    </Modal>
@ -235,7 +236,7 @@ onMounted(async () => {
    <Modal
      :n="sync.type == 'send' ? 2 : 1"
      :display="show.sync"
-      :title="useT('playlist.sync')"
+      :title="t('playlist.sync')"
      @show="
        e => {
          show.sync = e;
@ -246,10 +247,10 @@ onMounted(async () => {
          <button
            :data-active="sync.type == 'send'"
            @click="sync.type = 'send'">
-            {{ useT('action.send') }}
+            {{ t('action.send') }}
          </button>
          <button :data-active="sync.type == 'rec'" @click="sync.type = 'rec'">
-            {{ useT('action.receive') }}
+            {{ t('action.receive') }}
          </button>
        </div>

@ -267,11 +268,9 @@ onMounted(async () => {
      </template>

      <template #buttons>
-        <button @click="show.sync = false">{{ useT('action.cancel') }}</button>
+        <button @click="show.sync = false">{{ t('action.cancel') }}</button>
        <button v-if="sync.type == 'send'" @click="Send">
-          {{
-            sync.type == 'send' ? useT('action.send') : useT('action.recieve')
-          }}
+          {{ sync.type == 'send' ? t('action.send') : t('action.recieve') }}
        </button>
      </template>
    </Modal>
@ -284,7 +283,7 @@ onMounted(async () => {
        @click="show.sync = true"></div>
    </div>

-    <h2 v-if="list.length > 0">{{ useT('playlist.local') }}</h2>
+    <h2 v-if="list.length > 0">{{ t('playlist.local') }}</h2>

    <div class="grid-3">
      <template v-for="i in list">
@ -296,7 +295,7 @@ onMounted(async () => {
      </template>
    </div>

-    <h2 class="login-h">{{ useT('playlist.remote') }}</h2>
+    <h2 class="login-h">{{ t('playlist.remote') }}</h2>

    <div v-if="auth" class="grid-3">
      <template v-for="i in user.playlists">
@ -321,7 +320,7 @@ onMounted(async () => {
        autocomplete="password"
        @change="user.password = $event.target.value"
        required />
-      <button @click="Login" class="textbox">{{ useT('title.login') }}</button>
+      <button @click="Login" class="textbox">{{ t('title.login') }}</button>

      <p>
        Don't have an account? register on
--- a/src/components/Playlists.vue
+++ b/src/components/Playlists.vue
@ -1,8 +1,9 @@
 <script setup>
 import { useData, usePlayer } from '@/stores/player.js';
-import { useT } from '@/scripts/i18n.js';
+import { useI18n } from '@/stores/misc.js';

-const player = usePlayer(),
+const { t } = useI18n(),
+  player = usePlayer(),
  data = useData();

 defineEmits(['playthis']);
@ -10,7 +11,7 @@ defineEmits(['playthis']);

 <template>
  <Transition name="fade">
-    <div class="pl-modal placeholder" :data-placeholder="useT('playlist.add')">
+    <div class="pl-modal placeholder" :data-placeholder="t('playlist.add')">
      <template v-for="plurl in data.state.urls">
        <div class="pl-item" @click="$emit('playthis', plurl)">
          <span v-if="data.state.url == plurl.url" class="bars-wrap">
--- a/src/components/Prefs.vue
+++ b/src/components/Prefs.vue
@ -2,10 +2,11 @@
 import { ref, onMounted } from 'vue';

 import { getJson } from '@/scripts/fetch.js';
-import { SUPPORTED_LOCALES, useT, useSetupLocale } from '@/scripts/i18n.js';
+import { SUPPORTED_LOCALES, useI18n } from '@/stores/misc.js';
 import { useStore } from '@/scripts/util.js';

-const instances = ref([]),
+const { t, setupLocale } = useI18n(),
+  instances = ref([]),
  hypInstances = ref([]),
  next = ref(false);

@ -44,7 +45,7 @@ function setTheme(theme) {
 }

 function setLang(locale) {
-  useSetupLocale(locale);
+  setupLocale(locale);
  setStore('locale', locale);
 }

@ -58,7 +59,7 @@ onMounted(() => {
 </script>

 <template>
-  <h2>{{ useT('pref.theme') }}</h2>
+  <h2>{{ t('pref.theme') }}</h2>
  <select
    id="pref-theme"
    :value="getTheme()"
@ -79,7 +80,7 @@ onMounted(() => {
    <option v-for="i in SUPPORTED_LOCALES" :value="i.code">{{ i.name }}</option>
  </select>

-  <h2>{{ useT('pref.player') }}</h2>
+  <h2>{{ t('pref.player') }}</h2>

  <div class="left">
    <input
@ -88,11 +89,11 @@ onMounted(() => {
      id="pref-chk-next"
      @change="setStore('next', $event.target.checked)"
      v-model="next" />
-    <label for="pref-chk-next">{{ useT('pref.auto_queue') }}</label>
+    <label for="pref-chk-next">{{ t('pref.auto_queue') }}</label>
  </div>

  <div class="left">
-    <label for="pref-codec">{{ useT('pref.codec') }}</label>
+    <label for="pref-codec">{{ t('pref.codec') }}</label>
    <select
      id="pref-codec"
      name="pref-codec"
@ -106,20 +107,20 @@ onMounted(() => {
  </div>

  <div class="left">
-    <label for="pref-quality">{{ useT('pref.quality') }}</label>
+    <label for="pref-quality">{{ t('pref.quality') }}</label>
    <select
      id="pref-quality"
      name="pref-quality"
      :value="getStore('quality') || 'auto'"
      @change="setStore('quality', $event.target.value)">
-      <option value="auto">{{ useT('pref.auto') }}</option>
-      <option value="best">{{ useT('pref.best') }}</option>
-      <option value="worst">{{ useT('pref.worst') }}</option>
+      <option value="auto">{{ t('pref.auto') }}</option>
+      <option value="best">{{ t('pref.best') }}</option>
+      <option value="worst">{{ t('pref.worst') }}</option>
    </select>
  </div>

  <div class="left">
-    <label for="pref-volume">{{ useT('pref.volume') }}</label>
+    <label for="pref-volume">{{ t('pref.volume') }}</label>
    <input
      type="number"
      name="pref-volume"
@ -130,7 +131,7 @@ onMounted(() => {
      @change="setStore('vol', $event.target.value)" />
  </div>

-  <h2>{{ useT('pref.instances.hyp') }}</h2>
+  <h2>{{ t('instances.hyp') }}</h2>

  <select
    v-if="hypInstances"
@ -148,8 +149,8 @@ onMounted(() => {
    <table>
      <thead>
        <tr>
-          <th>{{ useT('pref.instances.name') }}</th>
-          <th>{{ useT('pref.instances.loc') }}</th>
+          <th>{{ t('instances.name') }}</th>
+          <th>{{ t('instances.loc') }}</th>
        </tr>
      </thead>
      <tbody v-for="i in hypInstances">
@ -165,7 +166,7 @@ onMounted(() => {
    </table>
  </div>

-  <h2>{{ useT('pref.instances.piped') }}</h2>
+  <h2>{{ t('instances.piped') }}</h2>
  <select
    v-if="instances"
    :value="getStore('pipedapi') || 'pipedapi.kavin.rocks'"
@ -178,7 +179,7 @@ onMounted(() => {
    </option>
  </select>

-  <h3>{{ useT('pref.instances.auth') }}</h3>
+  <h3>{{ t('instances.auth') }}</h3>

  <select
    v-if="instances"
@ -196,11 +197,11 @@ onMounted(() => {
    <table>
      <thead>
        <tr>
-          <th>{{ useT('pref.instances.name') }}</th>
-          <th>{{ useT('pref.instances.loc') }}</th>
-          <th>{{ useT('pref.instances.cdn') }}</th>
-          <th>{{ useT('pref.instances.up_to_date') }}</th>
-          <th>{{ useT('pref.instances.version') }}</th>
+          <th>{{ t('instances.name') }}</th>
+          <th>{{ t('instances.loc') }}</th>
+          <th>{{ t('instances.cdn') }}</th>
+          <th>{{ t('instances.up_to_date') }}</th>
+          <th>{{ t('instances.version') }}</th>
        </tr>
      </thead>
      <tbody v-for="i in instances">
--- a/src/components/Search.vue
+++ b/src/components/Search.vue
@ -8,13 +8,13 @@ import AlbumItem from './AlbumItem.vue';
 import { getJsonPiped, getPipedQuery } from '@/scripts/fetch.js';
 import { useRoute } from '@/scripts/util.js';
 import { useCreatePlaylist } from '@/scripts/db.js';
-import { useT } from '@/scripts/i18n.js';

 import { useResults, useArtist } from '@/stores/results.js';
 import { useData } from '@/stores/player.js';
-import { useNav } from '@/stores/misc.js';
+import { useNav, useI18n } from '@/stores/misc.js';

-const results = useResults(),
+const { t } = useI18n(),
+  results = useResults(),
  data = useData(),
  nav = useNav(),
  artist = useArtist();
@ -137,14 +137,14 @@ onUpdated(() => {
        getSearch(nav.state.search);
      "
      :data-active="f == filter">
-      {{ useT('title.' + f.split('_')[1]) }}
+      {{ t('title.' + f.split('_')[1]) }}
    </button>
  </div>

  <div
    v-if="results.items.songs && results.items.songs.items[0]"
    class="search-songs">
-    <h2>{{ useT('title.songs') }}</h2>
+    <h2>{{ t('title.songs') }}</h2>
    <div class="grid">
      <template v-for="song in results.items.songs.items">
        <SongItem
@ -180,14 +180,14 @@ onUpdated(() => {
      "
      class="more"
      :href="'/playlist?list=' + artist.state.playlistId"
-      >{{ useT('info.see_all') }}</a
+      >{{ t('info.see_all') }}</a
    >
  </div>

  <div
    v-if="results.items.albums && results.items.albums.items[0]"
    class="search-albums">
-    <h2>{{ useT('title.albums') }}</h2>
+    <h2>{{ t('title.albums') }}</h2>
    <div class="grid-3">
      <template v-for="album in results.items.albums.items">
        <AlbumItem
@ -204,7 +204,7 @@ onUpdated(() => {
  <div
    v-if="results.items.singles && results.items.singles.items[0]"
    class="search-albums">
-    <h2>{{ useT('title.singles') }}</h2>
+    <h2>{{ t('title.singles') }}</h2>
    <div class="grid-3">
      <template v-for="single in results.items.singles.items">
        <AlbumItem
@ -225,9 +225,7 @@ onUpdated(() => {
    class="search-artists">
    <h2>
      {{
-        results.items.artists
-          ? useT('title.artists')
-          : useT('title.similar_artists')
+        results.items.artists ? t('title.artists') : t('title.similar_artists')
      }}
    </h2>
    <div class="grid-3 circle">
--- a/src/components/SearchBar.vue
+++ b/src/components/SearchBar.vue
@ -1,9 +1,9 @@
 <script setup>
 import { ref } from 'vue';
-import { useNav } from '@/stores/misc.js';
-import { useT } from '@/scripts/i18n.js';
+import { useNav, useI18n } from '@/stores/misc.js';

-const show = ref(false),
+const { t } = useI18n(),
+  show = ref(false),
  nav = useNav();
 </script>

@ -18,7 +18,7 @@ const show = ref(false),
        <input
          type="text"
          aria-label="Search Input"
-          :placeholder="useT('title.search') + '...'"
+          :placeholder="t('title.search') + '...'"
          @change="
            nav.state.search = $event.target.value;
            nav.state.page = 'home';
--- a/src/components/SongItem.vue
+++ b/src/components/SongItem.vue
@ -1,7 +1,7 @@
 <script setup>
 import { ref, onMounted } from 'vue';

-import { useRand } from '../scripts/colors.js';
+import { useRand } from '@/scripts/colors.js';

 import { useArtist } from '@/stores/results.js';
 import { useData, usePlayer } from '@/stores/player.js';
--- a/src/components/StatusBar.vue
+++ b/src/components/StatusBar.vue
@ -6,11 +6,12 @@ import Modal from './Modal.vue';
 import { useStore } from '@/scripts/util.js';
 import { useListPlaylists, useUpdatePlaylist } from '@/scripts/db.js';
 import { getAuthPlaylists, getJsonAuth } from '@/scripts/fetch.js';
-import { useT } from '@/scripts/i18n.js';

 import { useData, usePlayer } from '@/stores/player.js';
+import { useI18n } from '@/stores/misc.js';

-const data = useData(),
+const { t } = useI18n(),
+  data = useData(),
  player = usePlayer(),
  store = useStore();

@ -108,7 +109,7 @@ function Save() {
        </template>
        <template #buttons>
          <button aria-label="Cancel" @click="showme.pl = false">
-            {{ useT('action.cancel') }}
+            {{ t('action.cancel') }}
          </button>
          <button
            aria-label="Add Song"
@ -116,7 +117,7 @@ function Save() {
              Save();
              showme.pl = false;
            ">
-            {{ useT('action.add') }}
+            {{ t('action.add') }}
          </button>
        </template>
      </Modal>
--- a/src/locales/en.json
+++ b/src/locales/en.json
@ -41,25 +41,25 @@
    "auto": "auto",
    "best": "best",
    "worst": "worst",
-    "volume": "Default Volume",
-    "instances": {
-      "hyp": "Hyperpipe Instance",
-      "piped": "Piped Instance",
-      "auth": "Authentication Instance",
-      "name": "Name",
-      "loc": "Locations",
-      "cdn": "CDN",
-      "up_to_date": "Up to Date",
-      "version": "Version"
-    }
+    "volume": "Default Volume"
  },
  "info": {
    "see_all": "See All",
    "search": "Start Searching",
-    "no_info": "No Information Available",
-    "lyrics": {
-      "load": "Fetching Lyrics",
-      "void": "No Lyrics"
-    }
+    "no_info": "No Information Available"
+  },
+  "instances": {
+    "hyp": "Hyperpipe Instance",
+    "piped": "Piped Instance",
+    "auth": "Authentication Instance",
+    "name": "Name",
+    "loc": "Locations",
+    "cdn": "CDN",
+    "up_to_date": "Up to Date",
+    "version": "Version"
+  },
+  "lyrics": {
+    "load": "Fetching Lyrics",
+    "void": "No Lyrics"
  }
 }
--- a/src/main.js
+++ b/src/main.js
@ -1,26 +1,12 @@
 import { createApp } from 'vue';
 import { createPinia } from 'pinia';
-import { createI18n } from 'vue-i18n';

 import App from './App.vue';
-import en from '@/locales/en.json';

 import('bootstrap-icons/font/bootstrap-icons.css');

 const pinia = createPinia(),
-  i18n = createI18n({
-    globalInjection: true,
-    legacy: false,
-    locale: 'en',
-    fallbackLocale: 'en',
-    messages: {
-      en: en,
-    },
-  }),
  app = createApp(App);

-window.i18n = i18n;
-
-app.use(i18n);
 app.use(pinia);
 app.mount('#app');
--- a/src/scripts/i18n.js
+++ b/src/scripts/i18n.js
@ -1,29 +0,0 @@
-import { useI18n } from 'vue-i18n';
-
-export const SUPPORTED_LOCALES = [
-  {
-    code: 'en',
-    name: 'English',
-  },
-];
-
-export function useT(path) {
-  const { messages, locale, fallbackLocale } = useI18n(),
-    msgs = messages.value?.[locale.value],
-    fallback = messages.value?.[fallbackLocale.value],
-    keys = path.split('.'),
-    translate = msg => keys.reduce((obj, i) => obj?.[i], msg),
-    translated = translate(msgs) || translate(fallback);
-
-  return translated || path;
-}
-
-export function useSetupLocale(locale) {
-  import(`@/locales/${locale}.json`)
-    .then(mod => mod.default)
-    .then(mod => {
-      window.i18n.global.messages.value[locale] = mod;
-    });
-
-  window.i18n.global.locale.value = locale;
-}
--- a/src/stores/misc.js
+++ b/src/stores/misc.js
@ -1,6 +1,19 @@
-import { reactive } from 'vue';
+import { reactive, ref } from 'vue';
 import { defineStore } from 'pinia';

+import en from '@/locales/en.json';
+
+export const SUPPORTED_LOCALES = [
+  {
+    code: 'en',
+    name: 'English',
+  },
+  {
+    code: 'fr',
+    name: 'French',
+  },
+];
+
 export const useNav = defineStore('nav', () => {
  const state = reactive({
    search: '',
@ -9,3 +22,31 @@ export const useNav = defineStore('nav', () => {

  return { state };
 });
+
+export const useI18n = defineStore('i18n', () => {
+  const locale = ref('en'),
+    map = ref({
+      en: en,
+    });
+
+  function t(path) {
+    const msgs = map.value[locale.value],
+      fallback = map.value['en'],
+      keys = path.split('.'),
+      translate = msg => keys.reduce((obj, i) => obj?.[i], msg),
+      translated = translate(msgs) || translate(fallback);
+
+    return translated || path;
+  }
+
+  function setupLocale(code) {
+    import(`@/locales/${code}.json`)
+      .then(mod => mod.default)
+      .then(mod => {
+        map.value[code] = mod;
+        locale.value = code;
+      });
+  }
+
+  return { locale, map, t, setupLocale };
+});