feat: add useBack hook and add button for back

Author: kieranwv

src/composables/back.ts

@@ -0,0 +1,12 @@
+export function useBack() {
+  const router = useRouter()
+
+  function back() {
+    if (history.length > 1)
+      router.back()
+    else
+      router.replace('/')
+  }
+
+  return { back }
+}

src/pages/about.vue

@@ -10,6 +10,8 @@
 <script lang="ts" setup>
 const { t } = useI18n()
 
+const { back } = useBack()
+
 const title = computed(() => {
   return t('page.about.title')
 })
@@ -27,5 +29,9 @@ useHead({
     <p>
       {{ t('app.description') }}
     </p>
+    <TheButton mx-auto mt-4 @click="back()">
+      <i i-carbon-return mr-2 />
+      <span> {{ t('button.back') }}</span>
+    </TheButton>
   </TheCard>
 </template>

src/pages/dynamic/[id].vue

@@ -8,6 +8,10 @@
 </route>
 
 <script lang="ts" setup>
+const { t } = useI18n()
+
+const { back } = useBack()
+
 const route = useRoute()
 
 const title = computed(() => {
@@ -30,5 +34,9 @@ useHead({
         https://uvr.esm.is/guide/file-based-routing.html#dynamic-routes
       </a>
     </p>
+    <TheButton mx-auto mt-4 @click="back()">
+      <i i-carbon-return mr-2 />
+      <span> {{ t('button.back') }}</span>
+    </TheButton>
   </TheCard>
 </template>

typings/auto-imports.d.ts

@@ -155,6 +155,7 @@ declare global {
   const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
   const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
   const useAttrs: typeof import('vue')['useAttrs']
+  const useBack: typeof import('../src/composables/back')['useBack']
   const useBase64: typeof import('@vueuse/core')['useBase64']
   const useBattery: typeof import('@vueuse/core')['useBattery']
   const useBluetooth: typeof import('@vueuse/core')['useBluetooth']
@@ -493,6 +494,7 @@ declare module 'vue' {
     readonly useAsyncQueue: UnwrapRef<typeof import('@vueuse/core')['useAsyncQueue']>
     readonly useAsyncState: UnwrapRef<typeof import('@vueuse/core')['useAsyncState']>
     readonly useAttrs: UnwrapRef<typeof import('vue')['useAttrs']>
+    readonly useBack: UnwrapRef<typeof import('../src/composables/back')['useBack']>
     readonly useBase64: UnwrapRef<typeof import('@vueuse/core')['useBase64']>
     readonly useBattery: UnwrapRef<typeof import('@vueuse/core')['useBattery']>
     readonly useBluetooth: UnwrapRef<typeof import('@vueuse/core')['useBluetooth']>