src/main.ts
import { createApp } from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import './styles.css'
createApp(App).use(vuetify).mount('#app')
8 files
Ready
Vuetify 4ReadyVUELn 1Ln 1, Col 1
Online Vuetify playground with Vue 3, TypeScript, editable components, custom themes, Material Design components, and instant live preview.
Choose a source file from the explorer and edit it with Monaco.
Edit package.json to add browser-compatible npm packages or change versions. Preview packages load from esm.sh. Successful previews save resolved versions for ranges and tags with your draft and shares; change the range to resolve again. Scripts and build plugins run only in downloaded projects.
Auto-run updates the browser preview as you type. Turn it off to run your changes manually.
Use the console for browser logs and errors, or evaluate a command against the preview.
Share creates a snapshot link. Download exports the source so you can continue locally.
import { createApp } from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import './styles.css'
createApp(App).use(vuetify).mount('#app')
<script setup lang="ts">
import { computed, ref } from 'vue'
import ProjectCard from './components/ProjectCard.vue'
type ProjectStatus = 'All' | 'On track' | 'At risk'
const focusMode = ref(true)
const filter = ref<ProjectStatus>('All')
const syncLabel = ref('Sync workspace')
const projects = ref([
{
name: 'Mobile checkout',
owner: 'Maya',
status: 'On track' as const,
progress: 82,
due: 'Aug 14',
},
{
name: 'Billing automation',
owner: 'Noah',
status: 'At risk' as const,
progress: 57,
due: 'Aug 21',
},
{
name: 'Customer insights',
owner: 'Ari',
status: 'On track' as const,
progress: 71,
due: 'Sep 02',
},
])
const visibleProjects = computed(() =>
filter.value === 'All'
? projects.value
: projects.value.filter((project) => project.status === filter.value),
)
function advanceProject(name: string) {
const project = projects.value.find((item) => item.name === name)
if (project) project.progress = Math.min(project.progress + 6, 100)
}
function syncWorkspace() {
syncLabel.value = 'Synced just now'
}
</script>
<template>
<v-app>
<v-app-bar flat class="app-bar">
<v-container class="d-flex align-center py-0">
<v-avatar color="primary" size="38" rounded="lg" class="font-weight-bold">
V
</v-avatar>
<div class="ml-3">
<div class="brand-kicker">VUETIFY 4 · VUE 3</div>
<div class="brand-name">Northstar workspace</div>
</div>
<v-spacer />
<v-chip color="success" variant="tonal" size="small">Live</v-chip>
<v-avatar color="surface-variant" size="34" class="ml-3">DM</v-avatar>
</v-container>
</v-app-bar>
<v-main class="page-shell">
<v-container class="py-8 py-md-12">
<div class="page-heading">
<div>
<p class="eyebrow">PRODUCT OPERATIONS</p>
<h1>Delivery overview</h1>
<p class="page-copy">
A responsive workspace built with real Vuetify components,
theme tokens, and an imported Vue component.
</p>
</div>
<v-btn
color="primary"
size="large"
variant="flat"
@click="syncWorkspace"
>
{{ syncLabel }}
</v-btn>
</div>
<v-row class="mb-2">
<v-col cols="12" sm="6" lg="4">
<v-card rounded="xl" variant="flat" class="metric-card">
<v-card-text>
<div class="metric-label">Active projects</div>
<div class="metric-value">12</div>
<div class="metric-detail text-success">↑ 8.2% this month</div>
</v-card-text>
</v-card>
</v-col>
<v-col cols="12" sm="6" lg="4">
<v-card rounded="xl" variant="flat" class="metric-card">
<v-card-text>
<div class="metric-label">Tasks completed</div>
<div class="metric-value">248</div>
<div class="metric-detail">36 completed this week</div>
</v-card-text>
</v-card>
</v-col>
<v-col cols="12" sm="6" lg="4">
<v-card rounded="xl" variant="flat" class="metric-card">
<v-card-text>
<div class="d-flex align-center justify-space-between">
<div>
<div class="metric-label">Delivery score</div>
<div class="metric-value">86%</div>
</div>
<v-progress-circular
:model-value="86"
color="primary"
:size="64"
:width="7"
>
86
</v-progress-circular>
</div>
</v-card-text>
</v-card>
</v-col>
</v-row>
<v-card rounded="xl" variant="flat" class="projects-panel">
<v-card-text class="pa-5 pa-md-6">
<div class="projects-heading">
<div>
<h2>Project health</h2>
<p>Current delivery status and team progress</p>
</div>
<div class="filter-row">
<v-btn
v-for="option in (['All', 'On track', 'At risk'] as ProjectStatus[])"
:key="option"
:color="filter === option ? 'primary' : undefined"
:variant="filter === option ? 'tonal' : 'text'"
size="small"
@click="filter = option"
>
{{ option }}
</v-btn>
</div>
</div>
<div class="project-grid">
<ProjectCard
v-for="project in visibleProjects"
:key="project.name"
v-bind="project"
@advance="advanceProject(project.name)"
/>
</div>
</v-card-text>
</v-card>
<v-card rounded="xl" variant="outlined" class="focus-card mt-5">
<v-card-text class="d-flex align-center">
<div>
<div class="font-weight-bold">Focus mode</div>
<div class="text-medium-emphasis text-body-2">
Reduce notifications while delivery work is active.
</div>
</div>
<v-spacer />
<v-switch
v-model="focusMode"
color="primary"
hide-details
inset
:label="focusMode ? 'On' : 'Off'"
/>
</v-card-text>
</v-card>
</v-container>
</v-main>
</v-app>
</template>
The editor uses Monaco, the engine behind VS Code, with language-aware editing tools and familiar keyboard controls.
Edit a source file from the project explorer — the live preview recompiles automatically.
Add, rename, duplicate or delete project files as needed. Update affected imports after renaming or moving a file.
Use the console for logs and errors, and Format to tidy the active file.
Share the complete project or download a Vite project ZIP with its source files and package.json.
Vuetify 4
Vue 3 + TypeScript
Material Design Components
Custom Theme
Responsive Grid
Local Component Imports
Live Preview
Auto-run updates the preview as you type. Turn it off to run manually with Run or Ctrl/⌘ + Enter.
The Console prompt can inspect browser globals and the rendered DOM, but not variables scoped inside ES modules or component state.
Console shortcuts apply when its prompt is focused. Editor shortcuts apply inside the code editor.
Code runs in a sandboxed browser preview, without Node.js, a backend, or private environment variables.
Download the project when you need build plugins, server APIs, native modules, or a production dependency workflow.