refactor(nuxt): use defineComponent to infer prop types for router-link stub

This commit is contained in:
Daniel Roe 2023-11-28 09:53:24 +00:00
parent 0eb9caf0c2
commit dc0e8347bf
No known key found for this signature in database
GPG Key ID: 3714AB03996F442B

View File

@ -1,4 +1,4 @@
import { h, isReadonly, reactive } from 'vue' import { defineComponent, h, isReadonly, reactive } from 'vue'
import { isEqual, joinURL, parseQuery, parseURL, stringifyParsedURL, stringifyQuery, withoutBase } from 'ufo' import { isEqual, joinURL, parseQuery, parseURL, stringifyParsedURL, stringifyQuery, withoutBase } from 'ufo'
import { createError } from 'h3' import { createError } from 'h3'
import { defineNuxtPlugin, useRuntimeConfig } from '../nuxt' import { defineNuxtPlugin, useRuntimeConfig } from '../nuxt'
@ -188,10 +188,13 @@ export default defineNuxtPlugin<{ route: Route, router: Router }>({
} }
} }
nuxtApp.vueApp.component('RouterLink', { nuxtApp.vueApp.component('RouterLink', defineComponent({
functional: true, functional: true,
props: { props: {
to: String, to: {
type: String,
required: true
},
custom: Boolean, custom: Boolean,
replace: Boolean, replace: Boolean,
// Not implemented // Not implemented
@ -200,15 +203,15 @@ export default defineNuxtPlugin<{ route: Route, router: Router }>({
ariaCurrentValue: String ariaCurrentValue: String
}, },
setup: (props, { slots }) => { setup: (props, { slots }) => {
const navigate = () => handleNavigation(props.to, props.replace) const navigate = () => handleNavigation(props.to!, props.replace)
return () => { return () => {
const route = router.resolve(props.to) const route = router.resolve(props.to!)
return props.custom return props.custom
? slots.default?.({ href: props.to, navigate, route }) ? slots.default?.({ href: props.to, navigate, route })
: h('a', { href: props.to, onClick: (e: MouseEvent) => { e.preventDefault(); return navigate() } }, slots) : h('a', { href: props.to, onClick: (e: MouseEvent) => { e.preventDefault(); return navigate() } }, slots)
} }
} }
}) }))
if (import.meta.client) { if (import.meta.client) {
window.addEventListener('popstate', (event) => { window.addEventListener('popstate', (event) => {