typed-link
Nuxt A Nuxt 3 module to use TypedLink
component with typed routes.
Why
This module is heavy inspired by nuxt-typed-router, you can use in your app too. Where nuxt-typed-router
give a router typed, nuxt-typed-link
give a new component TypedLink
strongly typed.
Features
- Nuxt 3 support
🔎 Vue component ready withTypedLink
🔥 Hot reloading when routes updated🌏 Support i18n (https://github.com/nuxt-modules/i18n)✅ Supportparams
🦾 Strongly typed, validate byto
prop (typescript
required)
Installation
With NPM
npm install nuxt-typed-link -D
With yarn
yarn add nuxt-typed-link -D
Or pnpm
pnpm add nuxt-typed-link -D
Usage
import { defineNuxtConfig } from 'nuxt/config'
export default defineNuxtConfig({
modules: [
'nuxt-typed-link',
],
typedLink: {
// ...
},
})
Option | Type | Default | Description |
---|---|---|---|
componentName |
string |
TypedLink |
Override component name. |
i18n |
boolean |
false |
i18n enabled, if you use https://github.com/nuxt-modules/i18n |
Example
pages/
├── index.vue
├── about.vue
<template>
<div>
<TypedLink :to="{
name: 'index',
}">
Home
</TypedLink>
<TypedLink :to="{
name: 'abut',
}"> <!-- type error! -->
About
</TypedLink>
</div>
</template>
<script lang="ts" setup>
import { RouteType } from './.nuxt/typed-routes'
const { push } = useTypedLink()
const navItems: { name: string, to: RouteType }[] = [
{
name: 'Home',
to: { name: 'index' }
},
]
</script>
TypedLink
Props
Prop | Type | Required | Description |
---|---|---|---|
to |
RouteType |
true |
Route object. |
RouteType
type RouteType = {
name: TypedRouteList
params?: TypedRouteParams[TypedRouteList]
query?: Record<string, string | number | boolean>
hash?: string
}
Roadmap
- [ ] Support typed
query
- [ ] Add type for composable
routes
💻 Development
- Clone repository
- Install dependencies using
pnpm i
- Prepare using
pnpm dev:prepare
- Try playground using
pnpm dev
Local module
Create a tgz
.
rm -f ~/nuxt-typed-link-*.tgz && npm pack && mv nuxt-typed-link-*.tgz ~/
Add it to your Nuxt app.
{
"devDependencies": {
"nuxt-typed-link": "file:~/nuxt-typed-link-0.0.1.tgz"
}
}
More typescript in your app?
Try nuxt-svg-transformer to manage SVG as icons, transform SVG to inject dynamically into Vue component, type included.
License
MIT - Made with