VueSettings
Workspace and notification settings in accessible tabs.
Give your AI assistant this page as context.
Connect your library with MCPLoading Vue preview…
blocks/settingsUsage
Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. Vue setup and Nuxt integration.
<script setup lang="ts">
import SettingsBlock from './components/blocks/settings.vue'
</script>
<!-- Supply the required props and callbacks listed in Source and props. -->Design system
This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.
Behavior and accessibility
Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.
The full ZIP also includes examples/block-showcase.vue, with populated block props, illustrations and local sample callbacks to adapt to your application.
Source and props
This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.
<script setup lang="ts">
import WorkspaceHeading from "./workspace-heading.vue";
import ActionForm from "./action-form.vue";
import type { FormAction } from "./common";
import Card from "../ui/card.vue";
import Tabs from "../ui/tabs.vue";
import Field from "../ui/field.vue";
import Input from "../ui/input.vue";
import Textarea from "../ui/textarea.vue";
import Switch from "../ui/switch.vue";
import { Building2, FileText, Bell } from "@lucide/vue";
defineProps<{
workspaceName: string;
onSave: FormAction;
onNotificationSave: FormAction;
}>();
const sections = [
{ value: "general", label: "General" },
{ value: "notifications", label: "Notifications" },
];
</script>
<template>
<Card class="cr-workspace-block cr-workspace-settings"
><WorkspaceHeading
eyebrow="Workspace"
title="Settings"
description="A few details that make this space yours."
><template #action
><span class="cr-workspace-icon-tile"
><Building2
:size="20"
aria-hidden="true" /></span></template></WorkspaceHeading
><Tabs label="Settings sections" :items="sections"
><template #general
><ActionForm :on-submit="onSave"
><Field label="Workspace name"
><Input
name="workspace"
:default-value="workspaceName"
required /></Field
><Field label="Description"
><Textarea
name="description"
placeholder="What are you building?" /></Field></ActionForm></template
><template #notifications
><ActionForm :on-submit="onNotificationSave"
><div class="cr-workspace-preference">
<div>
<span class="cr-workspace-icon-tile"
><FileText :size="18" aria-hidden="true"
/></span>
<p>A summary of what happened across your workspace.</p>
</div>
<Switch name="digest" label="Weekly digest" default-checked />
</div>
<div class="cr-workspace-preference">
<div>
<span class="cr-workspace-icon-tile"
><Bell :size="18" aria-hidden="true"
/></span>
<p>Stay in the loop when someone needs your attention.</p>
</div>
<Switch
name="mentions"
label="Mention notifications"
default-checked
/></div></ActionForm></template></Tabs
></Card>
</template>