Devkey

Devkey (live↗︎, source↗︎) is the reference starter project for Vuetify0. Scaffolded with the Vuetify CLI, it shows how the pieces fit together in a real Vue 3 app — and is the canonical example shipped with the v0 Alpha.

Preview

The Devkey home page. Navigation, hero layout, feature grid, and pricing cards are all built from v0 components.

Overview

Devkey pairs @vuetify/v0 with a minimal but production-shaped toolchain so you can see v0 in context — not as an isolated snippet, but as part of a real app layout.

Get the Code

The project lives on GitHub at vuetifyjs/devkey↗︎.

Scaffold a fresh copy

pnpm create vuetify0

npm create vuetify0

yarn create vuetify0

bun create vuetify0

Clone the repository

git clone https://github.com/vuetifyjs/devkey.git
cd devkey

Then install dependencies with your preferred package manager:

pnpm install

npm install

yarn install

bun install

Scripts

Devkey exposes a small, focused set of scripts:

Project Structure

devkey/
├── public/                # Static assets served as-is
├── src/
│   ├── components/        # Reusable Vue components
│   ├── plugins/           # v0 plugin registration (theme, locale, etc.)
│   ├── styles/            # Global styles and theme tokens
│   ├── App.vue            # Root component
│   └── main.ts            # App entry — registers v0 plugins
├── index.html
├── vite.config.mts        # Vite + UnoCSS + fonts
├── tsconfig.json          # Project references
├── tsconfig.app.json      # App TS config
├── tsconfig.node.json     # Build tooling TS config
└── package.json

What It Demonstrates

Devkey is intentionally small — the goal is to show the wiring, not fill it with features. Use it as a starting point for your own app or as a reference when integrating v0 into an existing project.

• Plugin registration — where and how createThemePlugin and friends get installed on the Vue app

• UnoCSS + theme tokens — mapping v0’s CSS variables to UnoCSS theme colors for utility-class styling

• Font loading — @fontsource/inter wired through unplugin-fonts for zero-flash webfonts

• Routing — vue-router 5’s built-in file-based routing alongside v0 components

• TypeScript — vue-tsc configured with project references for fast, strict type checks

Next Steps

Once Devkey is running locally, explore the pieces it relies on: