Bridge UI

Nuxt

Set up Bridge UI in a Nuxt project.

Bridge UI Vue works with Nuxt via a Nuxt plugin and your app layout.

Use the framework selector in the site header to switch between React and Vue.

Install packages

Packages are published on npm as 0.0.3.

bun add @bridge-ui/[email protected]
Note

Bridge UI React targets React apps. For a React App Router stack, use the Next.js guide instead.

Plugin

Register the Bridge UI Vue plugin so components and the composition API are available app-wide:

plugins/bridge-ui.ts:

import { createBridgeUI } from "@bridge-ui/vue";

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(createBridgeUI());
});

See the Next.js guide for React setup.

Layout

Wrap your Nuxt layout with BridgeUIProvider and BridgeUIHosts so imperative actions (useModalAction, useDialogAction, useSnackbarAction) work across pages:

layouts/default.vue:

<script setup lang="ts">
import { BridgeUIProvider } from "@bridge-ui/vue";
import { BridgeUIHosts } from "@bridge-ui/vue/Actions";
</script>

<template>
  <BridgeUIProvider :global="{}" :components="{}">
    <BridgeUIHosts
      :modal="{ modal: { transition: 'fade' } }"
      :dialog="{ modal: { transition: 'fade' } }"
      :snackbar="{ max: 3, timeout: 5000, position: 'bottom-center' }"
    >
      <slot />
    </BridgeUIHosts>
  </BridgeUIProvider>
</template>

See the Next.js guide.

Using components

Import Bridge UI components in any Vue page or component:

<script setup lang="ts">
import { Button } from "@bridge-ui/vue/Components/Button";
</script>

<template>
  <Button>Save</Button>
</template>

See the Next.js guide.

Select async data

The Select component accepts an asyncData object with search and resolve callbacks. Call your own JSON API with axios (Nuxt server routes, external API, etc.).

Client helper

Create lib/asyncSelect.ts (or utils/asyncSelect.ts):

import type { SelectAsyncData, SelectValue } from "@bridge-ui/core";
import axios from "axios";

export function asyncSelect(options: { url: string }): SelectAsyncData {
  const { url } = options;

  return {
    limit: 20,
    resolve: async (values: SelectValue[]) => {
      const { data } = await axios.get(url, {
        params: { ids: values },
        headers: { Accept: "application/json" },
      });

      return data;
    },
    search: async (query) => {
      const params: Record<string, string> = {};
      if (query) params.search = query;

      const { data } = await axios.get(url, {
        params,
        headers: { Accept: "application/json" },
      });

      return data;
    },
  };
}

Your endpoint should return { label, value, description } objects and accept:

Param Purpose
search Filter options while the user types
ids Resolve labels for already-selected values

Usage in a page

<script setup lang="ts">
import { asyncSelect } from "@/examples/core/integrations/asyncSelect";
import { Select } from "@bridge-ui/vue/Components/Select";
import { ref } from "vue";

const userId = ref(null);
</script>

<template>
  <Select
    label="User"
    v-model="userId"
    placeholder="Type to search users..."
    :async-data="asyncSelect({ url: '/api/examples/users' })"
  />
</template>

See the Next.js guide.

asyncData implies searchable. Selected values are resolved through the same endpoint with ids when the page loads or when chips need labels.

Next steps