add support for vue components as part of library export

package.json

@@ -7,7 +7,7 @@
   },
   "homepage": "https://github.com/kitbagjs/router#readme",
   "scripts": {
-    "build": "tsc && vite build",
+    "build": "vue-tsc && vite build",
     "test": "vitest",
     "test:types": "vitest typecheck",
     "lint": "eslint ./src",
@@ -29,14 +29,17 @@
   },
   "devDependencies": {
     "@prefecthq/eslint-config": "^1.0.31",
+    "@vitejs/plugin-vue": "^5.0.2",
     "eslint": "^8.54.0",
     "happy-dom": "^12.10.3",
     "typescript": "^5.0.2",
-    "vite": "^4.5.1",
+    "vite": "^5.0.11",
     "vite-plugin-dts": "^3.6.3",
-    "vitest": "^0.34.6"
+    "vitest": "^0.34.6",
+    "vue": "^3.4.5",
+    "vue-tsc": "^1.8.27"
   },
   "peerDependencies": {
-    "vue": "^3.3.8"
+    "vue": "^3.4.5"
   }
 }

src/components/RouterView.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="router-view">
+    router-view
+  </div>
+</template>

src/components/index.ts

@@ -0,0 +1,9 @@
+import RouterView from '@/components/RouterView.vue'
+
+export { RouterView }
+
+declare module '@vue/runtime-core' {
+  export interface GlobalComponents {
+    RouterView: typeof RouterView,
+  }
+}

src/main.ts

@@ -1,3 +1,4 @@
+export * from './compositions'
+export * from './components'
 export * from './types'
-export * from './utilities'
-export * from './compositions'
+export * from './utilities'

src/utilities/createRouter.ts

@@ -1,4 +1,5 @@
-import { DeepReadonly, reactive, readonly } from 'vue'
+import { DeepReadonly, reactive, readonly, App } from 'vue'
+import { RouterView } from '@/components'
 import { Resolved, Route, RouteMethods, Routes } from '@/types'
 import { createRouteMethods, createRouterNavigation, resolveRoutes, routeMatch, getInitialUrl, resolveRoutesRegex } from '@/utilities'
 
@@ -19,6 +20,7 @@ export type Router<
   back: () => void,
   forward: () => void,
   go: (delta: number) => void,
+  install: (app: App) => void,
 }
 
 export function createRouter<T extends Routes>(routes: T, options: RouterOptions = {}): Router<T> {
@@ -30,6 +32,10 @@ export function createRouter<T extends Routes>(routes: T, options: RouterOptions
 
   const route: Resolved<Route> = reactive(getInitialRoute())
 
+  function install(app: App): void {
+    app.component('RouterView', RouterView)
+  }
+
   function getInitialRoute(): Resolved<Route> {
     const url = getInitialUrl(options.initialUrl)
 
@@ -69,6 +75,7 @@ export function createRouter<T extends Routes>(routes: T, options: RouterOptions
     forward: navigation.forward,
     back: navigation.back,
     go: navigation.go,
+    install,
   }
 
   return router

tsconfig.json

@@ -20,5 +20,6 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src"]
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "exclude": ["node_modules", "dist", "public"]
 }

vite.config.js

@@ -1,5 +1,6 @@
 import { resolve } from 'path'
 import { defineConfig } from 'vitest/config'
+import vue from '@vitejs/plugin-vue'
 import dts from 'vite-plugin-dts'
 
 export default defineConfig({
@@ -25,6 +26,7 @@ export default defineConfig({
     },
   },
   plugins: [
+    vue(),
     dts({ 
       rollupTypes: true 
     })