feat: add global component: AppLink

src/components/AppLink.vue

@@ -0,0 +1,29 @@
+<template>
+  <router-link
+    :to="to"
+    v-bind="attrs"
+  >
+    <slot />
+  </router-link>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue'
+import type { RouteParams } from 'vue-router'
+import type { AppRouteNames } from '../routes'
+
+export default defineComponent({
+  name: 'AppLink',
+  props: {
+    name: { type: String as PropType<AppRouteNames>, required: true },
+    params: { type: Object as PropType<RouteParams>, default: () => ({}) },
+  },
+  setup (props, { attrs }) {
+    return {
+      to: props,
+      attrs,
+    }
+  },
+})
+
+</script>

src/main.ts

@@ -3,7 +3,12 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import store from './store'
 
-createApp(App)
-  .use(router)
-  .use(store)
-  .mount('#app')
+import registerGlobalComponents from './plugins/global-components'
+
+const app = createApp(App)
+app.use(router)
+app.use(store)
+
+registerGlobalComponents(app)
+
+app.mount('#app')

src/plugins/global-components.ts

@@ -0,0 +1,7 @@
+import type { App } from 'vue'
+
+import AppLink from '../components/AppLink.vue'
+
+export default function registerGlobalComponents (app: App) {
+  app.component('AppLink', AppLink)
+}

src/routes.ts

@@ -1,6 +1,17 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 import Home from './pages/Home.vue'
 
+export type AppRouteNames = 'global-feed'
+  |'my-feed'
+  |'tag'
+  |'article'
+  |'login'
+  |'register'
+  |'profile'
+  |'profile-favorites'
+  |'editor'
+  |'settings'
+
 const router = createRouter({
   history: createWebHashHistory(),
   routes: [