Changes:

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

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