@vibe-labs/design-vue-responsive

Vue 3 responsive layout components for the Vibe Design System. Container-query-driven grid, stack, and container wrapper with a composable for imperative breakpoint access.

Usage

import { VibeResponsiveContainer, VibeResponsiveGrid, VibeResponsiveStack, useContainerBreakpoint } from "@vibe-labs/design-vue-responsive";

Requires CSS from @vibe-labs/design-components-responsive (loaded via @vibe-labs/design-components).

Components

VibeResponsiveContainer

Establishes a container query context. Wrap any area that needs responsive children.

<VibeResponsiveContainer>
  <!-- children can use container queries -->
</VibeResponsiveContainer>

<VibeResponsiveContainer name="sidebar" type="size">
  <!-- named container with both-axis sizing -->
</VibeResponsiveContainer>

Props

Prop	Type	Default	Description
tag	string	"div"	HTML element to render
type	ContainerType	"inline"	inline · size · normal
name	ContainerName	—	main · sidebar · card · panel

Slots

Slot	Description
default	Content

---

VibeResponsiveGrid

12-column grid with per-breakpoint column counts. Must be inside a VibeResponsiveContainer.

<VibeResponsiveContainer>
  <VibeResponsiveGrid :cols="1" :cols-sm="2" :cols-lg="3" :cols-xl="4">
    <div>Card</div>
    <div>Card</div>
    <div>Card</div>
    <div>Card</div>
  </VibeResponsiveGrid>
</VibeResponsiveContainer>

Props

Prop	Type	Default	Description
tag	string	"div"	HTML element to render
cols	GridColumn	1	Default column count
colsXs	GridColumn	—	Columns at xs (480px)
colsSm	GridColumn	—	Columns at sm (640px)
colsMd	GridColumn	—	Columns at md (768px)
colsLg	GridColumn	—	Columns at lg (1024px)
colsXl	GridColumn	—	Columns at xl (1280px)
cols2xl	GridColumn	—	Columns at 2xl (1536px)

Gap defaults to var(--responsive-grid-gap). Override with spacing utility classes or inline style.

Slots

Slot	Description
default	Grid items

---

VibeResponsiveStack

Flex column that switches to row at a breakpoint. Must be inside a VibeResponsiveContainer.

<VibeResponsiveContainer>
  <VibeResponsiveStack breakpoint="md">
    <aside>Sidebar</aside>
    <main>Content</main>
  </VibeResponsiveStack>
</VibeResponsiveContainer>

Props

Prop	Type	Default	Description
tag	string	"div"	HTML element to render
breakpoint	Breakpoint	"md"	Breakpoint to switch to row

Gap defaults to var(--responsive-stack-gap). Override with spacing utility classes or inline style.

Slots

Slot	Description
default	Stack children

---

Composables

useContainerBreakpoint

Observes a container element's inline size via ResizeObserver and exposes reactive breakpoint state. Use for logic that CSS container queries can't handle (swapping components, changing props, conditional rendering).

<script setup>
import { ref } from "vue";
import { VibeResponsiveContainer, useContainerBreakpoint } from "@vibe-labs/design-vue-responsive";

const containerRef = ref<HTMLElement>();
const { current, above, below, width } = useContainerBreakpoint(containerRef);
</script>

<template>
  <VibeResponsiveContainer ref="containerRef">
    <p>Width: {{ width }}px — Breakpoint: {{ current ?? "below xs" }}</p>
    <DetailedTable v-if="above('lg')" />
    <CompactList v-else />
  </VibeResponsiveContainer>
</template>

Parameters

Param	Type	Description
target	MaybeRefOrGetter<HTMLElement | null>	Container element to observe

Returns

Property	Type	Description
current	Ref<Breakpoint | null>	Largest matching breakpoint, or null if below xs
above	(bp: Breakpoint) => boolean	True when container width >= breakpoint
below	(bp: Breakpoint) => boolean	True when container width < breakpoint
width	Ref<number>	Current container width in pixels

Cleans up automatically via onScopeDispose.

Dependencies

Package	Purpose
@vibe-labs/design-components-responsive	CSS + TypeScript types
@vibe-labs/core	Shared utilities
vue (peer)	Vue 3.5+

Build

npm run build