Vuetify Snippets for VSCode
A comprehensive collection of Vuetify component snippets for efficient Vue development with Vuetify 3.
✨ Features
- Quickly scaffold Vuetify UI components
- Covers layout, forms, navigation, data display, and more
- Snippets include placeholder variables for fast customization
- Supports
.vue and .html files
🧪 How to Use
Simply type the prefix of a component (e.g., v-btn) inside a .vue or .html file and autocomplete will suggest the snippet.
Each snippet follows this format:
- Prefix: What you type to trigger the snippet
- Description: A short explanation of what the snippet generates
📚 Snippets Included
| Prefix |
Component |
v-app |
Vuetify App Root |
v-app-bar |
App Bar |
v-navigation-drawer |
Navigation Drawer |
v-toolbar |
Toolbar |
v-btn |
Button |
v-icon |
Icon |
v-card |
Card |
v-dialog |
Dialog |
v-text-field |
Text Field |
v-select |
Select |
v-checkbox |
Checkbox |
v-radio-group |
Radio Group |
v-radio |
Radio |
v-switch |
Switch |
v-slider |
Slider |
v-range-slider |
Range Slider |
v-date-picker |
Date Picker |
v-time-picker |
Time Picker |
v-menu |
Menu |
v-tooltip |
Tooltip |
v-data-table |
Data Table |
v-list |
List |
v-form |
Form |
v-container |
Container |
v-row |
Grid Row |
v-col |
Grid Column |
v-avatar |
Avatar |
v-badge |
Badge |
v-chip |
Chip |
v-card-title |
Card Title |
v-card-text |
Card Text |
v-card-actions |
Card Actions |
v-alert |
Alert |
v-snackbar |
Snackbar |
v-progress-circular |
Progress Circular |
v-progress-linear |
Progress Linear |
v-textarea |
Textarea |
v-checkbox-group |
Checkbox Group |
📦 Installation
Search for Vuetify Snippets in the Extensions panel of VSCode and click Install.
Or install manually with the .vsix file:
code --install-extension vuetify-snippets.vsix
| |
