---
title: "Create a Vue Component from a Design Brief"
source: https://docs.autohand.ai/tutorials/create-vue-component
---

# Create a Vue Component from a Design Brief

Turn a written design brief into a working Vue 3 component with props, events, styling, and accessibility.

Intermediate 15 min

autohand "Create a Vue 3 DataTable component with sortable columns, pagination, row selection, and a search filter. Use Composition API and scoped CSS. Support both light and dark themes."

## What you'll learn

-   How to write a design brief that produces a complete component
-   How Autohand matches your existing project patterns
-   How to review generated props, events, and accessibility
-   How to refine a component with follow-up prompts

## Before you start

-   **Autohand Code installed.** Run `autohand --version` to verify. See [Your First Autohand Session](/docs/tutorials/your-first-session.html) if needed.
-   **A Vue 3 project using Composition API.** Created with `npm create vue@latest` or Vite.

If you want the component to use your project's existing design tokens or CSS variables, having at least one other component already written gives Autohand patterns to match.

## Write a clear design brief

The brief is the prompt. The more precisely you describe the behavior and interface, the less you need to adjust after generation.

A good brief for a component covers these points.

-   **What the component does.** Display tabular data with sorting, pagination, row selection, and text search.
-   **What props it accepts.**
    -   `columns`: array of column definition objects with `key`, `label`, and optional `sortable`.
    -   `rows`: array of data objects.
    -   `pageSize`: number, default 10.
    -   `loading`: boolean, shows a skeleton state.
-   **What events it emits.**
    -   `update:selected`: emitted when row selection changes, with the array of selected row objects.
    -   `sort`: emitted when a column header is clicked, with `{ key, direction }`.
-   **Visual requirements.** Striped rows, sticky header, responsive on mobile (horizontal scroll). Support light and dark themes via CSS custom properties.
-   **Accessibility.** Keyboard navigable. Sort buttons have `aria-sort`. Checkboxes have accessible labels.

## Generate the component

Run Autohand from your project root.

If you have other components in your project, the agent reads them first to match your naming conventions and CSS variable usage.

## Review the component

Before integrating it into your app, check the generated component for these things.

**Props definition.** Open `src/components/DataTable.vue` and check the `defineProps` block. Verify the types match what you described.

**Emits declaration.** Check that the emits match the events you asked for.

**Accessibility attributes.** Scan the template for `aria-sort` on the column headers and `aria-label` on the row selection checkboxes. If these are missing, ask Autohand to add them.

**CSS variables.** Check the scoped styles section. All color values should use `var(--your-variable-name)` rather than hardcoded hex values. This is what makes the component theme-compatible.

## Integrate into your app

Import the component and try it with sample data to confirm it renders and behaves correctly.

Run the dev server and verify the table renders, sorting responds to header clicks, checkboxes update the selection, and pagination works with more than 10 rows.

## Refine with follow-ups

Once the base component works, add features with follow-up prompts in the same session.

Each follow-up reads the component as it currently exists, so changes stay consistent with the structure already in place.

**Tip:** If the component is growing complex, ask Autohand to extract reusable logic into a composable. For example: `autohand "Extract the sort and pagination logic from DataTable.vue into a useDataTable composable."`

## What you learned

-   Wrote a detailed design brief that covers props, events, and accessibility
-   Generated a production-ready Vue 3 component that matches project patterns
-   Reviewed the component for correct types, emits, and CSS variables
-   Refined the component with follow-up prompts for new features

### Try next

autohand "Extract the sort and pagination logic from DataTable.vue into a reusable useDataTable composable"

### Related tutorials

[

#### Generate a Full CRUD Feature

Add a complete create, read, update, delete feature to an existing project with validation and tests.

](/docs/tutorials/generate-crud-feature.html)[

#### Modernize CSS to Custom Properties

Convert hardcoded color and spacing values to CSS custom properties for easier theming.

](/docs/tutorials/modernize-css-custom-properties.html)