Learn VUETIFY with Real Code Examples

<template>
    <v-app>
        <v-main class="d-flex justify-center align-center" style="height:100vh">
        <v-card class="pa-6 text-center">
        <v-card-title>
        Counter: {{ count }}
        </v-card-title>
        <v-card-actions>
        <v-btn color="primary" @click="increment">+</v-btn>
        <v-btn color="error" @click="decrement">-</v-btn>
        <v-btn color="secondary" @click="reset">Reset</v-btn>
        </v-card-actions>
        <v-btn class="mt-4" color="warning" @click="toggleTheme">Switch Theme</v-btn>
        </v-card>
        </v-main>
    </v-app>
</template>

<script>
import { ref } from 'vue';
export default {
    setup() {
        const count = ref(0);
        const isDark = ref(false);
        const increment = () => count.value++;
        const decrement = () => count.value--;
        const reset = () => count.value = 0;
        const toggleTheme = () => {
        isDark.value = !isDark.value;
        document.body.className = isDark.value ? 'theme--dark' : '';
        };
        return { count, increment, decrement, reset, toggleTheme };
    }
};
</script>

<style>
.theme--dark {
    background-color: #333;
    color: #fff;
}
</style>

Demonstrates a simple counter layout using Vuetify components and Vue.js for interactivity.

<template>
    <v-app>
        <v-main class="pa-6 text-center">
        <v-btn color="primary">Primary</v-btn>
        <v-btn color="success">Success</v-btn>
        <v-btn color="error">Error</v-btn>
        <v-btn color="warning">Warning</v-btn>
        <v-btn disabled>Disabled</v-btn>
        </v-main>
    </v-app>
</template>
<script>export default {}</script>

Shows different Vuetify button styles and colors.

<template>
    <v-app>
        <v-main class="pa-6 text-center">
        <v-text-field label="Enter name" v-model="name"></v-text-field>
        <p>You typed: {{ name }}</p>
        </v-main>
    </v-app>
</template>
<script>
import { ref } from 'vue';
export default { setup() { const name = ref(''); return { name }; } };
</script>

Demonstrates a text input using Vuetify VTextField.

<template>
    <v-app>
        <v-main class="pa-6 text-center">
        <v-switch v-model="isOn" label="Toggle"></v-switch>
        <p>Switch is {{ isOn ? 'On' : 'Off' }}</p>
        </v-main>
    </v-app>
</template>
<script>
import { ref } from 'vue';
export default { setup() { const isOn = ref(false); return { isOn }; } };
</script>

Shows a toggle switch using Vuetify VSwitch component.

<template>
    <v-app>
        <v-main class="pa-6 text-center">
        <v-slider v-model="value" min="0" max="100"></v-slider>
        <p>Value: {{ value }}</p>
        </v-main>
    </v-app>
</template>
<script>
import { ref } from 'vue';
export default { setup() { const value = ref(50); return { value }; } };
</script>

Demonstrates a slider component using Vuetify VSlider.

<template>
    <v-app>
        <v-main class="pa-6 text-center">
        <v-checkbox v-model="checked" label="Accept Terms"></v-checkbox>
        <p>{{ checked ? 'Checked' : 'Unchecked' }}</p>
        </v-main>
    </v-app>
</template>
<script>
import { ref } from 'vue';
export default { setup() { const checked = ref(false); return { checked }; } };
</script>

Demonstrates checkboxes using Vuetify VCheckbox component.

<template>
    <v-app>
        <v-main class="pa-6 text-center">
        <v-radio-group v-model="picked" row>
        <v-radio label="Option A" value="A"></v-radio>
        <v-radio label="Option B" value="B"></v-radio>
        <v-radio label="Option C" value="C"></v-radio>
        </v-radio-group>
        <p>Picked: {{ picked }}</p>
        </v-main>
    </v-app>
</template>
<script>
import { ref } from 'vue';
export default { setup() { const picked = ref('A'); return { picked }; } };
</script>

Shows radio buttons using Vuetify VRadioGroup component.

<template>
    <v-app>
        <v-main class="pa-6 text-center">
        <v-progress-linear :value="value" height="10" color="primary"></v-progress-linear>
        <p>Progress: {{ value }}%</p>
        </v-main>
    </v-app>
</template>
<script>
import { ref, onMounted } from 'vue';
export default {
    setup() {
        const value = ref(0);
        onMounted(() => { setInterval(() => { value.value = value.value >= 100 ? 0 : value.value + 10; }, 1000); });
        return { value };
    }
};
</script>

Demonstrates a progress bar using Vuetify VProgressLinear.

<template>
    <v-app>
        <v-main class="pa-6 text-center">
        <v-data-table :headers="headers" :items="items" class="elevation-1"></v-data-table>
        </v-main>
    </v-app>
</template>
<script>
import { ref } from 'vue';
export default {
    setup() {
        const headers = ref([{ text: 'Name', value: 'name' }, { text: 'Age', value: 'age' }]);
        const items = ref([{ name: 'Alice', age: 25 }, { name: 'Bob', age: 30 }, { name: 'Charlie', age: 22 }]);
        return { headers, items };
    }
};
</script>

Shows a simple data table using Vuetify VDataTable component.

<template>
    <v-app>
        <v-main class="pa-6 text-center">
        <v-btn color="primary" @click="dialog = true">Open Dialog</v-btn>
        <v-dialog v-model="dialog" max-width="400">
        <v-card>
        <v-card-title>Hello</v-card-title>
        <v-card-text>This is a Vuetify dialog example.</v-card-text>
        <v-card-actions>
        <v-btn color="primary" text @click="dialog = false">Close</v-btn>
        </v-card-actions>
        </v-card>
        </v-dialog>
        </v-main>
    </v-app>
</template>
<script>
import { ref } from 'vue';
export default { setup() { const dialog = ref(false); return { dialog }; } };
</script>

Shows a modal dialog using Vuetify VDialog component.