nuxt-typed-link v0.1.10

Nuxt typed-link

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 with TypedLink
• 🔥 Hot reloading when routes updated
• 🌏 Support i18n (https://github.com/nuxt-modules/i18n)
• ✅ Support params
• 🦾 Strongly typed, validate by to 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: {
    // ...
  },
})

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

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 💚