Changes:

- Closes #9
- Removed dependency on vue-i18n
- Localization Changes

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",

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": {

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>

src/assets/base.css

@@ -181,6 +181,7 @@ body {
 }
 
 button {
+  padding: 1px 6px;
   border: none;
   background: transparent;
   color: var(--color-text);

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

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 =>
+const { t } = useI18n(),
-  new DOMParser().parseFromString(d, 'text/html').body.innerText;
+  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>

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')
+            ? t('lyrics.load')
-            : useT('info.lyrics.void')
+            : t('lyrics.void')
         "
         >{{ text }}</pre
       >

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' ? t('action.send') : t('action.recieve') }}
-            sync.type == 'send' ? useT('action.send') : useT('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

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">

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="auto">{{ t('pref.auto') }}</option>
-      <option value="best">{{ useT('pref.best') }}</option>
+      <option value="best">{{ t('pref.best') }}</option>
-      <option value="worst">{{ useT('pref.worst') }}</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>{{ t('instances.name') }}</th>
-          <th>{{ useT('pref.instances.loc') }}</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>{{ t('instances.name') }}</th>
-          <th>{{ useT('pref.instances.loc') }}</th>
+          <th>{{ t('instances.loc') }}</th>
-          <th>{{ useT('pref.instances.cdn') }}</th>
+          <th>{{ t('instances.cdn') }}</th>
-          <th>{{ useT('pref.instances.up_to_date') }}</th>
+          <th>{{ t('instances.up_to_date') }}</th>
-          <th>{{ useT('pref.instances.version') }}</th>
+          <th>{{ t('instances.version') }}</th>
         </tr>
       </thead>
       <tbody v-for="i in instances">

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
+        results.items.artists ? t('title.artists') : t('title.similar_artists')
-          ? useT('title.artists')
-          : useT('title.similar_artists')
       }}
     </h2>
     <div class="grid-3 circle">

src/components/SearchBar.vue

@@ -1,9 +1,9 @@
 <script setup>
 import { ref } from 'vue';
-import { useNav } from '@/stores/misc.js';
+import { useNav, useI18n } from '@/stores/misc.js';
-import { useT } from '@/scripts/i18n.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';

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';

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>

src/locales/en.json

@@ -41,25 +41,25 @@
     "auto": "auto",
     "best": "best",
     "worst": "worst",
-    "volume": "Default Volume",
+    "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"
-    }
   },
   "info": {
     "see_all": "See All",
     "search": "Start Searching",
-    "no_info": "No Information Available",
+    "no_info": "No Information Available"
-    "lyrics": {
+  },
-      "load": "Fetching Lyrics",
+  "instances": {
-      "void": "No Lyrics"
+    "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"
   }
 }

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');

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;
-}

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 };
+});