DevKey

DevKey (live↗︎, source↗︎) is the reference starter project for Vuetify0. Scaffolded with the Vuetify CLI, it is the starter shipped with the Vuetify0 Alpha.

Copy Markdown

BeginnerOct 13, 2026

Tip

Looking for the fastest way to start? Run pnpm create vuetify0 to scaffold a fresh DevKey-shaped project locally.

Note

Want a guided walkthrough? The Vuetify0 alpha announcement↗︎ builds DevKey step-by-step as a reusable UI library — landing page, auth flow, dashboard, and command palette.

Preview

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

Overview

DevKey is a full app on @vuetify/v0. The toolchain is in the table below.

Layer	Choice
Framework	Vue 3.5+↗︎
Build tool	Vite 8↗︎
Language	TypeScript↗︎
UI primitives	@vuetify/v0↗︎
Styling	UnoCSS↗︎
Routing	vue-router 5↗︎
Fonts	@fontsource/inter↗︎ via `unplugin-fonts`
Icons	@mdi/js↗︎
Package manager	pnpm↗︎

Get the Code

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

Scaffold a fresh copy

bash

pnpm create vuetify0

bash

npm create vuetify0

bash

yarn create vuetify0

bash

bun create vuetify0

Clone the repository

bash

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

Then install dependencies with your preferred package manager:

bash

pnpm install

bash

npm install

bash

yarn install

bash

bun install

Note

create vuetify0 produces the same layout as the DevKey repository. Cloning directly is useful if you want to track upstream changes.

Scripts

DevKey exposes a small, focused set of scripts:

Script	Purpose
`pnpm dev`	Start the Vite dev server
`pnpm build`	Type-check and produce a production build
`pnpm build-only`	Skip type-checking during build
`pnpm preview`	Preview the production build
`pnpm type-check`	Run `vue-tsc` across the project

Project Structure

text

devkey/
├── public/                # Static assets served as-is
├── src/
│   ├── components/        # Reusable Vue components
│   ├── plugins/           # Vuetify0 plugin registration (theme, locale, etc.)
│   ├── styles/            # Global styles and theme tokens
│   ├── App.vue            # Root component
│   └── main.ts            # App entry — registers Vuetify0 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 Vuetify0 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:

Goal	Start Here
Understand how Vuetify0 plugins are wired	Getting Started
Build your own components on top of Vuetify0	Building Frameworks
Customize the theme	Theming
Add SSR	Nuxt