@serversideup/project-switcher-bar

ServerSideUp branded toolbar with product navigation for documentation sites. Displays the ServerSideUp logo, a "Browse Products" dropdown with Premium/Books/Open Source sections, navigation links, and social icons.

Installation

yarn add @serversideup/project-switcher-bar

Tailwind v4 Source Detection

Since the component lives in node_modules, Tailwind v4 needs to be told to scan it for utility classes. Add a @source directive to your main CSS file:

@import "tailwindcss";
@source "../node_modules/@serversideup/project-switcher-bar/src";

Usage

<script setup>
import { ProjectSwitcherBar } from '@serversideup/project-switcher-bar'
</script>

<template>
  <ProjectSwitcherBar />
</template>

The component ships pre-compiled — no special build configuration needed in your project.

Migrating from ServerSideUp.vue

If your project has a local ServerSideUp.vue component (the old hardcoded toolbar), follow these steps:

1. Install the package

yarn add @serversideup/project-switcher-bar

2. Add the Tailwind @source directive

In your main CSS file (e.g. app/assets/css/main.css), add:

@source "../node_modules/@serversideup/project-switcher-bar/src";

3. Update app.vue

Replace the old component with an explicit import:

  <script setup>
+ import { ProjectSwitcherBar } from '@serversideup/project-switcher-bar'
  </script>

  <template>
    <UApp>
      <NuxtLoadingIndicator />
-     <ServerSideUp />
+     <ProjectSwitcherBar />
      <AppHeader />

Note: If your project uses the Global/ directory convention (e.g. Spin docs), replace <GlobalServerSideUp /> instead.

4. Delete the old component

Remove the old file from whichever location it lives in your project:

# docker-php, amplitudejs, etc.
rm app/components/ServerSideUp.vue

# spin (uses Global/ subdirectory)
rm app/components/Global/ServerSideUp.vue

5. Remove @vueuse/nuxt (optional)

The old ServerSideUp.vue used onClickOutside from VueUse. This package uses a native document.addEventListener instead, so if onClickOutside was the only reason you had @vueuse/nuxt installed, you can remove it:

yarn remove @vueuse/nuxt

Then remove '@vueuse/nuxt' from the modules array in nuxt.config.ts.

How It Works

• The component is pre-compiled to plain JS via Vite library mode (dist/index.mjs) — works in any Vue/Nuxt project without needing to transpile .vue files
• Product and open source data is baked into src/data.json (auto-updated by CI from the main serversideup.net content)
• Logos are embedded as base64 data URIs — no external assets needed
• Navigation links and social icons are hardcoded in the component
• Uses <a> tags (not <NuxtLink>) so it works in any Vue project
• The src/ directory is included for Tailwind v4 class scanning via @source

Automatic Updates with Dependabot

To automatically receive PRs when a new version is published, add .github/dependabot.yml to your sub-project:

version: 2
updates:
  - package-ecosystem: "npm"
    directory: "/docs"
    schedule:
      interval: "daily"
    allow:
      - dependency-name: "@serversideup/project-switcher-bar"

Note: Change directory to match the location of your package.json (e.g. "/" if it's at the repo root, "/docs" if it's in a docs subdirectory).

The allow key restricts Dependabot to only open PRs for this package. Without it, Dependabot would propose updates for all your npm dependencies.

Data Updates

The src/data.json file is automatically updated by GitLab CI when products or open source projects change on serversideup.net. A GitHub Action then rebuilds dist/, bumps the version, and publishes to npm automatically.

Development

yarn install
yarn dev

Opens a Vite dev server with a preview page rendering the component.

Building

yarn build

Compiles the Vue component to dist/index.mjs. This is done automatically by the GitHub Action when src/ changes on main.

License

MIT