@oods/components-vue

Vue components used by screens generated with OODS Foundry. The package exports controls, layouts and domain views; @oods/component-styles provides their CSS.

Install

npm install @oods/components-vue @oods/component-styles @oods/tokens @oods/component-contracts vue

Use Vue 3. Bring your existing Vue app or use OODS Foundry's code_generate with options.output: "application" for an app entry and Vite configuration.

First result

<script setup>
import { Button } from '@oods/components-vue';
import '@oods/component-styles/css';
const review = () => window.alert('Connect this action to your application.');
</script>

<template>
  <Button content="Review stock" intent="primary" @activate="review" />
</template>

Set data-brand="A" and data-theme="light" on the root HTML element. The result is a button labelled “Review stock” that invokes the supplied handler. Set the theme to dark or hc for those scopes.

Generated sample screens identify their sample data. A workflow's local store is not a production database; supply your data, navigation and persistence handlers. Retained component evidence covers named scenarios and themes, not every application you build. For your own implementation of a shipped component, use OODS Foundry's substitution mapping and inspect its advisory contract report.

Limits

Use matching versions of the OODS packages. These packages are separate from the local MCP server, @oods/foundry. For an unpublished release candidate, install the supplied tarballs together instead of resolving them from npm.

License

Apache License 2.0. See LICENSE and NOTICE. Generated output belongs to its user; installed package dependencies retain their own licenses.