DEPRECATED

You can use nuxt-typed-router instead.

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: {
    // ...
  },
});

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 💚