router

InKCre's avatarfrom InKCre

Integrate @inkcre/web-design with Vue Router using the adapter pattern.

⭐0stars🔀0forks📁View on GitHub🕐Updated Jan 1, 2026
[Architecture Design]

When & Why to Use This Skill

This Claude skill facilitates the seamless integration of the @inkcre/web-design system with Vue Router by implementing the adapter pattern. It provides a standardized way to bridge design system components with routing logic, ensuring that UI elements like headers and navigation bars remain reactive and decoupled from specific router implementations, which enhances code maintainability and scalability in Vue.js applications.

Use Cases

  • Decoupling UI Components: Use the adapter pattern to provide routing information to design system components without creating a hard dependency on Vue Router.
  • Reactive Navigation State: Synchronize the current path and route name with navigation components to enable dynamic active-link styling and breadcrumb updates.
  • Cross-Library Compatibility: Implement a provider pattern that allows @inkcre/web-design components to function correctly across different routing environments by swapping the adapter.
  • Standardizing Router Access: Establish a consistent interface (InkRouter) for accessing route data within a complex Vue.js project, simplifying component testing and development.
namerouter
descriptionIntegrate @inkcre/web-design with Vue Router using the adapter pattern.

Router Integration

Use this skill when integrating @inkcre/web-design components with Vue Router.

Overview

Some components (like InkHeader) need router capabilities. The design system uses a provider pattern that works with any router implementation.

Interface

import type { ComputedRef, InjectionKey } from "vue";

export interface InkRouter {
  /** Current path (reactive) */
  currentPath: ComputedRef<string>;
  /** Current page name */
  currentName: ComputedRef<string | null>;
}

export const INK_ROUTER_KEY: InjectionKey<InkRouter> = Symbol("INK_ROUTER");

Setup

  1. Create a router adapter:
// router-adapter.ts
import { computed } from "vue";
import type { Router, RouteLocationNormalizedLoaded } from "vue-router";
import type { InkRouter } from "@inkcre/web-design";

export function createInkRouterAdapter(
  router: Router,
  route: RouteLocationNormalizedLoaded
): InkRouter {
  return {
    currentPath: computed(() => route.path),
    currentName: computed(() => route.name),
  };
}
  1. Provide in your app:
// App.vue
<script setup lang="ts">
import { INK_ROUTER_KEY } from "@inkcre/web-design";
import { createInkRouterAdapter } from "./router-adapter";
import { useRoute, useRouter } from "vue-router";

provide(
  INK_ROUTER_KEY,
  createInkRouterAdapter(useRouter(), useRoute())
);
</script>

Usage in Components

import { useOptionalRouter } from "@inkcre/web-design";

const router = useOptionalRouter();
if (router) {
  console.log(router.currentPath.value);
}