@immx2/portfolio-nav

A small Vue 3 component: a horizontal strip linking a portfolio site and three related showcase demos. The active site is plain text; the rest are same-tab links.

Built for Nuxt apps that already ship Vue 3 and transpile .vue / TypeScript from node_modules (default Vite behavior).

Install

npm install @immx2/portfolio-nav

Peer dependency: Vue 3 (vue ^3).

Usage

<script setup lang="ts">
import { PortfolioNav } from '@immx2/portfolio-nav'
</script>

<template>
  <PortfolioNav current="showcase-02" />
</template>

current prop

One of: 'portfolio' | 'showcase-01' | 'showcase-02' | 'showcase-03'

That entry is shown as the current page (not a link). Others navigate to the configured production URLs.

Styling

The component ships scoped styles and uses CSS variables when present (--color-bg, --color-text, --color-text-muted, --color-border, --duration-fast), with fallbacks.

It also sets --portfolio-nav-height on :root (default 28px). Use this if you need to offset a fixed app bar below the strip, for example:

.app-nav {
  top: var(--portfolio-nav-height, 28px);
}

License

MIT — Copyright (c) 2026 Immanuel