Vuetify online editor

Write, Run & Share Vuetify code online using OneCompiler's Vuetify online editor for free. Choose 'Vuetify' as the language to start from a small card with buttons. The preview updates as you type, so you can try components without setting up a Vue project.

About Vuetify

Vuetify is a Vue component library that follows Google's Material Design. It gives you ready-made buttons, cards, forms, dialogs, navigation, data tables and a responsive grid, so you can put together a polished interface mostly by writing templates.

Syntax help

Setup

The editor loads Vue and Vuetify from a CDN. You write the template straight into index.html and create the app in script.js.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@4/dist/vuetify.min.css" />
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@4/dist/vuetify.min.js"></script>

const { createApp, ref } = Vue;
const { createVuetify } = Vuetify;

createApp({
  setup() {
    const count = ref(0);
    return { count };
  },
})
  .use(createVuetify())
  .mount('#app');

App layout

Wrap everything in v-app, and put page content inside v-main.

<div id="app">
  <v-app>
    <v-main class="pa-6">
      <!-- your content -->
    </v-main>
  </v-app>
</div>

Buttons and cards

<v-card title="Welcome" subtitle="A Vuetify card" max-width="360">
  <v-card-text>Cards group related content.</v-card-text>
  <v-card-actions>
    <v-btn color="primary" variant="flat">Save</v-btn>
    <v-btn variant="text">Cancel</v-btn>
  </v-card-actions>
</v-card>

Forms

Bind inputs to data with v-model.

<v-text-field v-model="name" label="Your name"></v-text-field>
<v-switch v-model="enabled" label="Notifications" color="primary"></v-switch>
<p>Hello, {{ name }}</p>

setup() {
  const name = ref('');
  const enabled = ref(true);
  return { name, enabled };
}

Grid

v-row and v-col build responsive layouts on a 12-column grid.

<v-container>
  <v-row>
    <v-col cols="12" md="6">Left</v-col>
    <v-col cols="12" md="6">Right</v-col>
  </v-row>
</v-container>

Spacing helpers

Utility classes like pa-4 (padding on all sides) and mt-2 (margin top) adjust spacing without writing CSS.