vuetify-camelcase-snippets

> This are all available snippets for Vuetifyjs in Visual Studio Code. If you want to add another snippet which is useful for community. Just create an issue and I will know :) ## APPLICATION LAYOUT ### Pre-defined layouts - vPreDefinedLayoutDefault -> Vuetify default layout - vPreDefinedLayoutBaseline -> Baseline Pre-defined layout - vPreDefinedLayoutBaselineFlipped -> Baseline Flipped Pre-defined layout - vPreDefinedLayoutCentered -> Centered Pre-defined layout - vPreDefinedLayoutComplex -> Complex Pre-defined layout - vPreDefinedLayoutDark -> Dark Pre-defined layout - vPreDefinedLayoutGoogleContacts -> Google Contacts Pre-defined layout - vPreDefinedLayoutGoogleKeep -> Google Keep Pre-defined layout - vPreDefinedLayoutGoogleYoutube -> Google Youtube Pre-defined layout - vPreDefinedLayoutSandbox -> Sandbox Pre-defined layout ### Pre-defined themes - vPreDefinedThemeParallax -> Parallax Pre-defined themes - vPreDefinedThemeBlog -> Blog Pre-defined themes ### Grid & Breakpoints #### Grid system - vContainer -> v-container component - vContainerProps -> v-container props list - vContainerWithProps -> v-container with all props - vLayout -> v-layout component - vLayoutProps -> v-layout props list - vLayoutWithProps -> v-layout with all props - vLayoutColumn -> v-layout with column prop - vFlex -> v-flex component - vFlexProps -> v-flex props list - vFlexWithProps -> v-flex with all props - vSpacer -> v-spacer component - vGridBreakpointObject -> Breakpoing object of Grid system ### Spacing - vSpacing -> Spacing options ### Text alignment - vTextAlign -> Text align helper classes ### Display - vVisibility -> List for visibility options - vDisplay -> Display property of elements ### Elevation - vElevation -> Elevation for elements ## STYLES & THEMES ### Colors - vColors -> All available colors - vTextColors -> Text color ### Typography - vTypography -> Typography helper classes ## MOTION & TRANSITIONS ### Scrolling - vGoTo -> Scrolling in your application ### Transitions - transition -> Transition provided by Vuetify ## UI COMPONENTS ### ALERT - vAlert -> v-alert component - vAlertProps -> v-alert props list - vAlertWithProps -> v-alert with all props - vAlertClosable -> v-alert closable without icon - vAlertClosableIcon -> v-alert closable with icon - vAlertIcon -> v-alert with icon - vAlertNoIcon -> v-alert with no icon - vAlertTransition -> v-alert with transition - vAlertOutline -> v-alert outlined ### AVATAR - vAvatar -> v-avatar component - vAvatarProps -> v-avatar props list - vAvatarWithProps -> v-avatar with all props - vAvatarIcon -> v-avatar with an icon - vAvatarText -> v-avatar with text - vAvatarBadge -> v-avatar with a badge ### BADGE - vBadge -> v-badge component - vBadgeProps -> v-badge props list - vBadgeWithProps -> v-badge with all props - vBadgeOverlap -> v-badge with overlap prop - vBadgeInline -> v-badge with inline text - vBadgeVisibility -> v-badge visibility example ### BOTTOM NAVIGATION - vBottomNav -> v-bottom-nav component - vBottomNavProps -> v-bottom-nav props list - vBottomNavWithProps -> v-bottom-nav with all props - vBottomNavTemplate -> v-bottom-nav simple template ### BOTTOM SHEETS - vBottomSheet -> v-bottom-sheet component - vBottomSheetProps -> v-bottom-sheet props list - vBottomSheetWithProps -> v-bottom-sheet with all props - vBottomSheetTemplateInset -> v-bottom-sheet template with inset example ### BREADCRUMBS COMPONENT - vBreadcrumbs -> v-breadcrumbs component - vBreadcrumbsProps -> v-breadcrumbs props list - vBreadcrumbsWithProps -> v-breadcrumbs with all props - vBreadcrumbsTemplate -> v-breadcrumbs simple template - vBreadcrumbsTemplateIconDivider -> v-breadcrumbs template with icon divider - vBreadcrumbsItem -> v-breadcrumbs-item component - vBreadcrumbsItemProps -> v-breadcrumbs-item props - vBreadcrumbsItemWithProps -> v-breadcrumbs-item with all props ### BUTTON - vBtn -> v-btn component - vBtnProps -> v-btn props list - vBtnWithProps -> v-btn with all props - vBtnFlat -> v-btn with flat prop - vBtnRaised -> v-btn with raised prop - vBtnDepressed -> v-btn with depressed prop - vBtnDropdown -> v-select as button with dropdown varient - vBtnToggle -> v-btn-toggle as button - vBtnToggleTemplate -> v-btn-toggle simple template - vBtnToggleTemplateText -> v-btn-toggle template with text - vBtnToggleTemplateTextIcon -> v-btn-toggle with text and icon - vBtnIcon -> v-btn as icon - vBtnFloating -> v-btn as floating - vBtnLoader -> v-btn with a loader when clicked - vBtnLoaderCustom -> v-btn with custom loader example - vBtnOutline -> v-btn with outline prop - vBtnRound -> v-btn with round prop - vBtnBlock -> v-btn with block prop ### BUTTONS: FLOATING ACTIBUTTONS - vSpeedDial -> v-speed-dial component - vSpeedDialProps -> v-speed-dial props list - vSpeedDialWithProps -> v-speed-dial with all props - vSpeedDialTemplate -> v-speed-dial simple template - vFab -> v-btn as floating action button - vFabDisplayAnimation -> v-btn as fab with display animation ### CARDS - vCard -> v-card component - vCardProps -> v-card props list - vCardWithProps -> v-card with all props - vCardTemplate -> v-card simple template - vCardTemplateMediaWithText -> v-card template media with text - vCardTemplateHorizontal -> v-card horizontal template - vCardTemplateCustomActions -> v-card custom actions template - vCardMedia -> v-card-media component - vCardMediaProps -> v-card-media props list - vCardMediaWithProps -> v-card-media with all props - vCardTitle -> v-card-title component - vCardTitleProps -> v-card-title props list - vCardActions -> v-card-actions component - vCardText -> v-card-text component ### CAROUSEL - vCarousel -> v-carousel component - vCarouselProps -> v-carousel props list - vCarouselWithProps -> v-carousel with all props - vCarouselTemplate -> v-carousel simple template - vCarouselItemProps -> v-carousel-item props list - vCarouselItemWithProps -> v-carousel-item with all props ### CHIP - vChip -> v-chip component - vChipProps -> v-chip props list - vChipWithProps -> v-chip with all props - vChipAvatar -> v-chip with avatar - vChipColored -> v-chip as colored example - vChipIcon -> v-chip with icon - vChipIconRight -> v-chip with icon to right side - vChipOutline -> v-chip as outlined - vChipLabel -> v-chip as label - vChipClosable -> v-chip closable - vChipTemplateInSelect -> v-chip used with in selects ### DATA ITERA - vDataIterator -> v-data-iterator component - vDataIteratorProps -> v-data-iterator props list - vDataIteratorWithProps -> v-data-iterator with all props - vDataIteratorTemplate -> v-data-iterator simple template ### DATA TABLE - vDataTable -> v-data-table component - vDataTableProps -> v-data-table props list - vDataTableWithProps -> v-data-table with all props - vEditDialog -> v-edit-dialog component - vEditDialogProps -> v-edit-dialog props list - vEditDialogWithProps -> v-edit-dialog with all props - vDataTableSlotHeaders -> v-data-table headers slot - vDataTableSlotItems -> v-data-table items slot - vDataTableSlotNoData -> v-data-table no-data slot - vDataTableSlotHeaderCell -> v-data-table header cell slot - vDataTableSlotProgress -> v-data-table progress slot - vDataTableSlotFooter -> v-data-table footer slot - vDataTableSlotExpand -> v-data-table expand slot - vDataTableSlotNoResult -> v-data-table no-results slot - vDataTableSlotPageText -> v-data-table with page-text slot - vDataTableTemplate -> v-data-table simple template - vDataTableTemplateNoData -> v-data-table simple template with no data slot - vDataTableTemplateHeaderCell -> v-data-table template with header cell slot - vDataTableTemplateProgress -> v-data-table template with progress slot - vDataTableTemplateFooter -> v-data-table template with footer slot - vDataTableTemplateExpand -> v-data-table template with expand slot - vDataTableTemplatePageText -> v-data-table template with page-text slot - vDataTableTemplateSelectableRows -> v-data-table selectable rows template - vDataTableTemplateSearchNoResults -> v-data-table template with search with custom no-results slot - vDataTableTemplateCustomIcons -> v-data-table template with custom icons - vDataTableTemplateExternalPagination -> v-data-table template with external pagination - vDataTableTemplateExternalSorting -> v-data-table template with external sorting - vDataTableTemplateHeaderless -> v-data-table template without headers - vDataTableTemplateInlineEditing -> v-data-table template with inline editing example - vDataTableTemplatePaginateSortServerSide -> v-data-table template with paginate and sort server-side - vDataTableTemplateCRUD -> v-data-table template with CRUD actions ### DIALOG - vDialog -> v-dialog component - vDialogProps -> v-dialog props list - vDialogWithProps -> v-dialog with all props - vDialogTemplateWitoutActivator -> v-dialog template without activator - vDialogTemplateModal -> v-dialog as modal template - vDialogTemplateFullscreen -> v-dialog template fullscreen - vDialogTemplateForm -> v-dialog template form - vDialogTemplateScrollable -> v-dialog template scrollable - vDialogTemplateOverflowed -> v-dialog template overflowed ### DIVIDER - vDivider -> v-divider component - vDividerProps -> v-divider props list - vDividerWithProps -> v-divider with all props - vDividerInset -> v-divider with inset prop ### EXPANSION PANELS - vExpansionPanel -> v-expansion-panel component - vExpansionPanelProps -> v-expansion-panel props list - vExpansionPanelWithProps -> v-expansion-panel with all props - vExpansionPanelContent -> v-expansion-panel-content component - vExpansionPanelContentProps -> v-expansion-panel-content props list - vExpansionPanelContentWithProps -> v-expansion-panel-content with all props - vExpansionPanelTemplateUsage -> v-expansion-panel usage template - vExpansionPanelTemplateExpand -> v-expansion-panel expand template - vExpansionPanelTemplatePopout -> v-expansion-panel popout template - vExpansionPanelTemplateInset -> v-expansion-panel inset template - vExpansionPanelTemplateFocusable -> v-expansion-panel focusable template ### FOOTER - vFooter -> v-footer component - vFooterProps -> v-footer props list - vFooterWithProps -> v-footer with all props - vFooterTemplateCompany -> v-footer company template ### INPUTS & CONTROLS #### FORMS - vForm -> v-form component - vFormProps -> v-form props list - vFormWithProps -> v-form with all props - vFormTemplateVuelidate -> v-form template with Vuelidate - vFormTemplateVeeValidate -> v-from template with Vee-validate - vFormTemplateValidation -> v-form template for Validation with submit & clear #### SELECT - vSelect -> v-select component - vSelectProps -> v-select props list - vSelectWithProps -> v-select with all props - vSelectScopedSlotSelection -> v-select selection scoped slot - vSelectScopedSlotItem -> v-select item scoped slot - vSelectMultiplePersistentHint -> v-select with prop multiple with persistent hint - vSelectMultiplePersistentHintChip -> v-select with prop multiple with persistent hint and chip - vSelectAutocomplete -> v-select with prop autocomplete - vSelectCustomFilterAutocomplete -> v-select custom filter on autocomplete - vSelectFunctionCustomFilter -> v-select function custom filter - vSelectAsynchronousItems -> v-select asynchronous items #### SELECTION CONTROLS - vRadioGroup -> v-radio-group component - vRadioGroupProps -> v-radio-group props list - vRadioGroupWithProps -> v-radio-group with all props - vRadio -> v-radio component - vRadioProps -> v-radio props list - vRadioWithProps -> v-radio with all props - vRadioDirection -> v-radio direction - vCheckbox -> v-checkbox component - vCheckboxProps -> v-checkbox props list - vCheckboxWithProps -> v-checkbox with all props - vCheckboxOn -> v-checkbox with state on - vCheckboxOff -> v-checkbox with state off - vCheckboxIndeterminate -> v-checkbox with state indeterminate - vCheckboxDisabled -> v-checkbox with state disabled - vCheckboxInlineTextfield -> v-checbox inline with a textfield - vSwitch -> v-switch component - vSwitchProps -> v-switch props list - vSwitchWithProps -> v-switch with all props - vSwitchDisabledOn -> v-switch disabled on - vSwitchDisabledOff -> v-switch disabled off #### TEXT FIELD - vTextField -> v-text-field component - vTextFieldProps -> v-text-field props list - vTextFieldWithProps -> v-text-field with all props - vTextFieldDisabled -> v-text-field with disabled prop - vTextFieldNormalWithHintText -> v-text-field normal with hint text - vTextFieldPress -> v-text-field press - vTextFieldFocus -> v-text-field focus - vTextFieldNormalWithInputText -> v-text-field normal with input text - vTextFieldError -> v-text-field error - vTextFieldWithIcon -> v-text-field with an icon - vTextFieldMultiLine -> v-text-field with multi-line - vTextFieldCharacteCount -> v-text-field with character count - vTextFieldPassword -> v-text-field password - vTextFieldEmail -> v-text-field with email rule example - vTextFieldRequired -> v-text-field with required prop - vTextFieldPrefix -> v-text-field with prefix prop - vTextFieldSuffix -> v-text-field with suffix prop - vTextFieldTextarea -> v-text-field with textarea prop - vTextFieldBox -> v-text-field with box prop - vTextFieldSolo -> v-text-field with solo prop - vTextFieldSoloInverted -> v-text-field with solo-inverted prop - vTextFieldMask -> v-text-field with mask prop - vTextFieldCustomProgress -> v-text-field custom progress example - vTextFieldFunctionEmailRule -> v-text-field email rules example ### ICON - vIcon -> v-icon component - vIconProps -> v-icon props list - vIconWithProps -> v-icon with all props - vIconColor -> v-icon with color prop - vIconFontAwesome -> v-icon with font awesome - vIconMaterialDesign -> v-icon with material design icons ### LIST - vList -> v-list component - vListProps -> v-list props list - vListWithProps -> v-list with all props - vListTwoLine -> v-list with two-line prop - vListThreeLine -> v-list with three-line prop - vListTemplate -> v-list simple template - vListTemplateAvatarWithTitleAction -> v-list avatar with title and action template - vListTemplateAvatarWith3Lines -> v-list avatar with three lines template - vListGroup -> v-list-group component - vListTile -> v-list-tile component - vListTileProps -> v-list-tile props list - vListTileWithProps -> v-list-tile with all props - vListTileTitle -> v-list-tile-title component - vListTileSubTitle -> v-list-tile-sub-title component - vListTileAvatar -> v-list-tile-avatar component - vListTileContent -> v-list-tile-content component - vListTileAction -> v-list-tile-action component ### JUMBOTRON - vJumbotron -> v-jumbotron component - vJumbotronProps -> v-jumbotron props list - vJumbotronWithProps -> v-jumbotron with all props - vJumbotronTemplate -> v-jumbotron simple template - vJumbotronTemplateCustomColor -> v-jumbotron custom color template - vJumbotronTemplateGradient -> v-jumbotron gradient template ### MENU - vMenu -> v-menu component - vMenuProps -> v-menu props list - vMenuWithProps -> v-menu with all props - vMenuTemplateAbsolutePosition -> v-menu template with absolute position - vMenuTemplateHover -> v-menu template with hover prop ### NAVIGATION DRAWER - vNavigationDrawer -> v-navigation-drawer component - vNavigationDrawerProps -> v-navigation-drawer props list - vNavigationDrawerWithProps -> v-navigation-drawer with all props - vNavigationDrawerPermanent -> v-navigation-drawer component with permanent prop - vNavigationDrawerTemporary -> v-navigation-drawer component with temporary prop - vNavigationDrawerTemplate -> v-navigation-drawer simple template - vNavigationDrawerTemplateColored -> v-navigation-drawer template with colored example - vNavigationDrawerTemplatePermanentFloating -> v-navigation-drawer template example with permanent floating - vNavigationDrawerTemplateAvatar -> v-navigation-drawer template with avatar - vNavigationDrawerTemplateMini -> v-navigation-drawer template mini drawer - vNavigationDrawerTemplateTemporary -> v-navigation-drawer template with temporary drawer ### PAGINATION - vPagination -> v-pagination component - vPaginationProps -> v-pagination props list - vPaginationWithProps -> v-pagination with all props - vPaginationLimit -> v-pagination with limit - vPaginationRound -> v-pagination with round buttons - vPaginationIcons -> v-pagination with custom icons - vPaginationDisabled -> v-pagination with disabled prop ### PARALLAX - vParallax -> v-parallax component - vParallaxProps -> v-parallax props list - vParallaxWithProps -> v-parallax with all props - vParallaxHeight -> v-parallax with height prop - vParallaxJumbotron -> v-parallax as standard jumbotron - vParallaxTemplateContent -> v-parallax template with content ### PICKERS #### DATE/MONTH PICKER - vDatePicker -> v-date-picker component - vDatePickerProps -> v-date-picker props list - vDatePickerWithProps -> v-date-picker with all props - vDatePickerColor -> v-date-picker with color prop - vDatePickerAllowedDates -> v-date-picker with allowed dates prop - vDatePickerWidth -> v-date-picker with width prop - vDatePickerFullWidth -> v-date-picker with full width prop - vDatePickerBirthday -> v-date-picker as a birthday picker - vDatePickerEvents -> v-date-picker with events props - vDatePickerLocale -> v-date-picker with locale prop - vDatePickerIcons -> v-date-picker with icons prop - vDatePickerReadOnly -> v-date-picker with read only prop - vDatePickerCureentDate -> v-date-picker showing current date - vDatePickerInMenu -> v-date-picker in a menu example - vDatePickerInDialog -> v-date-picker in a dialog example - vMonthPicker -> Month picker component - vMonthPickerLocale -> Month picker with locale prop - vMonthPickerColors -> Month picker with custom colors - vMonthPickerInMenu -> Month picker in menu - vMonthPickerInDialog -> Month picker in dialog - vMonthPickerAllowedMonths -> Month picker with allowed months prop - vMonthPickerIcons -> Month picker with custom icons - vMonthPickerReadOnly -> Month picker read only - vMonthPickerCurrentMonth -> Month picker showing current month #### TIME PICKER - vTimePicker -> v-time-picker component - vTimePickerProps -> v-time-picker props list - vTimePickerWithProps -> v-time-picker with all props - vTimePickerColors -> v-time-picker with colors option - vTimePickerInMenu -> v-time-picker in menu - vTimePickerInDialog -> v-time-picker in dialog - vTimePicker24hFormat -> v-time-picker in 24h format - vTimePickerAllowedTimes -> v-time-picker with allowed times props - vTimePickerLandscape -> v-time-picker in ladscape mode ### PROGRESS #### CIRCULAR PROGRESS - vProgressCircular -> v-progress-circular component - vProgressCircularProps -> v-progress-circular props list - vProgressCircularWithProps -> v-progress-circular with all props - vProgressCircularColored -> v-progress-circular with colored prop - vProgressCircularIndeterminate -> v-progress-circular with indeterminate prop - vProgressCircularSizeWidth -> v-progress-circular with size and width prop - vProgressCircularRotate -> v-progress-circular with rotate prop #### LINEAR PROGRESS - vProgressLinear -> v-progress-linear component - vProgressLinearProps -> v-progress-linear props list - vProgressLinearWithProps -> v-progress-linear with all props - vProgressLinearDeterminate -> v-progress-linear with determinate example - vProgressLinearIndeterminate -> v-progress-linear with indeterminate prop - vProgressLinearBuffer -> v-progress-linear with buffer prop - vProgressLinearQuery -> v-progress-linear with query prop - vProgressLinearHeight -> v-progress-linear with custom height and contextual colors - vProgressLinearColors -> v-progress-linear with custom colors ### SLIDER - vSlider -> v-slider component - vSliderProps -> v-slider props list - vSliderWithProps -> v-slider with all props - vSliderDisabled -> v-slider with disabled prop - vSliderDiscrete -> v-slider discrete example - vSliderIcons -> v-slider with icons - vSliderColors -> v-slider with all color props - vSliderTemplateEditableNumericValue -> v-slider template with editable numeric value ### SNACKBAR - vSnackbar -> v-snackbar component - vSnackbarProps -> v-snackbar props list - vSnackbarWithProps -> v-snackbar with all props - vSnackbarColor -> v-snackbar with color prop ### STEPPER - vStepper -> v-stepper component - vStepperProps -> v-stepper props list - vStepperWithProps -> v-stepper with all props - vStepperVertical -> v-stepper with vertical prop - vStepperStep -> v-stepper-step component - vStepperStepProps -> v-stepper-step props list - vStepperStepWithProps -> v-stepper-step with all props - vStepperEditable -> v-stepper-step with editable prop - vStepperOptional -> v-stepper-step optional example - vStepperContent -> v-stepper-content component - vStepperContentProps -> v-stepper-content props list - vStepperHeader -> v-stepper-header component - vStepperItems -> v-stepper-items component - vStepperTemplate -> v-stepper template - vStepperTemplateOptional -> v-stepper ### SUBHEADERS - vSubheader -> v-subheader component - vSubheaderProps -> v-subheader props list - vSubheaderWithProps -> v-subheader with all props ### TAB - vTabs -> v-tabs component - vTabsProps -> v-tabs props list - vTabsWithProps -> v-tabs with all props - vTabsFixed -> v-tabs with fixed prop - vTabsRightAligned -> v-tabs with right aligned - vTabsIcons -> v-tabs with custom icons - vTabsTemplate -> v-tabs simple template - vTabsTemplateSearch -> v-tabs template with search - vTab -> v-tab component - vTabProps -> v-tab props list - vTabWithProps -> v-tab with all props - vTabsItems -> v-tabs-items component - vTabsItemsProps -> v-tabs-items props list - vTabsItemsWithProps -> v-tabs-items with all props - vTabItem -> v-tab-item component - vTabItemProps -> v-tab-item props list - vTabItemWithProps -> v-tab-item with all props - vTabsSlider -> v-tabs-slider component ### TOOLBAR - vToolbar -> v-toolbar component - vToolbarProps -> v-toolbar props list - vToolbarWithProps -> v-toolbar with all props - vToolbarExtended -> v-toolbar with extended prop - vToolbarFloating -> v-toolbar with floating prop - vToolbarWithItems -> v-toolbar with items - vToolbarProminent -> v-toolbar with prominent prop - vToolbarDense -> v-toolbar with dense prop - vToolbarDenseProminent -> v-toolbar with dense and prominet prop - vToolbarTemplateFloatingSearch -> v-toolbar template with floating search - vToolbarTemplateScrollingTechnique -> v-toolbar template with scrolling technique example - vToolbarItems -> v-toolbar-items component - vSystemBar -> v-system-bar component - vSystemBarLightStatusBar -> v-system-bar with light status bar - vSystemBarLightsOut -> v-system-bar with lights out bar - vSystemBarProps -> v-system-bar props ### TOOLTIP - vTooltip -> v-tooltip component - vTooltipProps -> v-tooltip props list - vTooltipWithProps -> v-tooltip with all props ## DIRECTIVES ### RESIZE - vResize -> v-resize directive - vResizeFunction -> v-resize directive function ### RIPPLE - vRipple -> Ripple directive - vRippleCenter -> Ripple directive center - vRippleClass -> Ripple directive custom class - vRippleDisabled -> Ripple directive disabled - vRippleHTML -> Ripple directive for standard HTML element ### SCROLLING - vScroll -> v-scroll directive - vScrollFunction -> v-scroll directive function - vScrollTarget -> v-scroll directive for target ### TOUCH SUPPORT - vTouch -> v-touch directive - vTouchAllDirections -> v-touch directive for all directions - vTouchEvents -> v-touch directive with events ## KEYWORD (Often used in Vuetify) ### Aligment - alignBaseline -> align-baseline - alignCenter -> align-center - alignContentCenter -> align-content-center - alignContentEnd -> align-content-end - alignContentSpaceAround -> align-content-space-around - alignContentSpaceBetween -> align-content-space-between - alignContentStart -> align-content-start - alignEnd -> align-end - alignStart -> align-start ### Display - dFlex -> d-flex - dInlineFlex -> d-inline-flex - dInlineBlock -> d-inline-block - dBlock -> d-block - dInline -> d-inline ### Grid - gridListXs -> grid-list-xs - gridListSm -> grid-list-sm - gridListMd -> grid-list-md - gridListLg -> grid-list-lg - gridListXl -> grid-list-xl ### Grid system > Vuetify has a 12 point grid system - xs(1-12) -> xs screen size - sm(1-12) -> sm screen size - md(1-12) -> md screen size - lg(1-12) -> lg screen size - xl(1-12) -> xl screen size ### Justify - justifyCenter -> justify-center - justifyEnd -> justify-end - justifySpaceAround -> justify-space-around - justifySpaceBetween -> justify-space-between - justifyStart -> justify-start ### Visibility - hiddenXsOnly -> hidden xs only - hiddenXsAndDown -> hidden xs and down - hiddenXsAndUp -> hidden xs and up - hiddenSmOnly -> hidden sm only - hiddenSmAndDown -> hidden sm and down - hiddenSmAndUp -> hidden sm and up - hiddenMdOnly -> hidden md only - hiddenMdAndDown -> hidden md and down - hiddenMdAndUp -> hidden md and up - hiddenLgOnly -> hidden lg only - hiddenLgAndDown -> hidden lg and down - hiddenLgAndUp -> hidden lg and up - hiddenXlOnly -> hidden xl only - hiddenXlAndDown -> hidden xl and down - hiddenXlAndUp -> hidden xl and up ### Elevation - elevation(1 to 24) -> elevation from 1 to 24 ### Colors - primary -> primary - accent -> accent - secondary -> secondary - success -> success - info -> info - error -> error - red -> red - pink -> pink - purple -> purple - deepPurple -> deep-purple - indigo -> indigo - blue -> blue - light-blue -> light-blue - cyan -> cyan - teal -> teal - green -> green - lightGreen -> light-green - lime -> lime - yellow -> yellow - amber -> amber - orange -> orange - deepOrange -> deep-orange - brown -> brown - blue-grey -> blue-grey - grey -> grey - black -> black - white -> white - transparent -> transparent - lighten1 -> lighten-1 - lighten2 -> lighten-2 - lighten3 -> lighten-3 - lighten4 -> lighten-4 - lighten5 -> lighten-5 - darken1 -> darken-1 - darken2 -> darken-2 - darken3 -> darken-3 - darken4 -> darken-4 ### Typography - display1 -> display-1 - display2 -> display-2 - display3 -> display-3 - display4 -> display-4 - headline -> headline - title -> title - subheading -> subheading - body2 -> body-2 - body1 -> body-1 - caption -> caption ### Spacing (margin & padding) > Size from 1 to 5 - mt-(1-5) -> margin-top - mb-(1-5) -> margin-bottom - ml-(1-5) -> margin-left - mr-(1-5) -> margin-right - mx-(1-5) -> margin-left & margin-right - my-(1-5) -> margin-top & margin-bottom - ma-(1-5) -> margin in all directions - pt-(1-5) -> padding-top - pb-(1-5) -> padding-bottom - pl-(1-5) -> padding-left - pr-(1-5) -> padding-right - px-(1-5) -> padding-left & padding-right - py-(1-5) -> padding-top & padding-bottom - pa-(1-5) -> padding in all directions ### Offset - offset-xs-(1-12) -> offset for xs screen size - offset-sm-(1-12) -> offset for sm screen size - offset-md-(1-12) -> offset for md screen size - offset-lg-(1-12) -> offset for lg screen size - offset-xl-(1-12) -> offset for xl screen size - offsetX -> offset-x - offsetY -> offset-y ### Order - order-xs-(1-12) -> order for xs screen size - order-sm-(1-12) -> order for sm screen size - order-md-(1-12) -> order for md screen size - order-lg-(1-12) -> order for lg screen size - order-xl-(1-12) -> order for xl screen size ### Text alignment for screen sizes - textXsRight -> text align to right for xs screen size - textXsLeft -> text align to left for xs screen size - textXsCenter -> text align to center for xs screen size - textSmRight -> text align to right for sm screen size - textSmLeft -> text align to left for sm screen size - textSmCenter -> text align to center for sm screen size - textMdRight -> text align to right for md screen size - textMdLeft -> text align to left for md screen size - textMdCenter -> text align to center for md screen size - textLgRight -> text align to right for lg screen size - textLgLeft -> text align to left for lg screen size - textLgCenter -> text align to center for lg screen size - textXlRight -> text align to right for xl screen size - textXlLeft -> text align to left for xl screen size - textXlCenter -> text align to center for xl screen size ### Transition - slideXTransiton -> slide-x-transiton - reverse -> reverse - reverseTrasition -> reverse-trasition - tabTransition -> tab-transition - slideXReverseTransition -> slide-x-reverse-transition - slideYReverseTransition -> slide-y-reverse-transition - tabReverseTransition -> tab-reverse-transition - fadeTransition -> fade-transition - slideYTransition -> slide-y-transition - dialogTransition -> dialog-transition - menuTransition -> menu-transition - fabTransition -> fab-transition ### Hide related props - hideOverlay -> hide-overlay - hideControls -> hide-controls - hideDelimiters -> hide-delimiters - hideSelected -> hide-selected - hideHeaders -> hide-headers - hideActions -> hide-actions - hideDetails -> hide-details - hideSlider -> hide-slider ### Line related props - multiLine -> multi-line - singleLine -> single-line - threeLine -> three-line - twoLine -> two-line ### Nudege related props - nudgeBottom -> nudge-bottom - nudgeLeft -> nudge-left - nudgeTop -> nudge-top - nudgeWidth -> nudge-width - nudgeRight -> nudge-right ### Height related props - fillHeight -> fill-height - rowHeight -> row-height - autoHeight -> auto-height - extensionHeight -> extension-height - maxHeight -> max-height - maxHeight -> max-height auto - height -> height ### Color related props - color -> color - textColor -> text-color - eventColor -> event-color - backgroundColor -> background-color - thumbColor -> thumb-color - trackColor -> track-color - sliderColor -> slider-color - headerColor -> header-color ### Event related props - custom-filter -> custom-filter - custom-sort -> custom-sort - input -> input - change -> change - pagination.sync -> pagination.sync - append-icon-cb -> append-icon-cb - activeSync -> active.sync - updatePagination -> update:pagination - updateSearchInput -> update:search-input - updateMiniVariant -> update:mini-variant - updateActive -> update:active - next -> next - updateError -> update:error - locale -> locale - openOnHover -> open-on-hover - shift -> shift - hover -> hover - contain -> contain - openOnClear -> open-on-clear - counter -> counter - blur -> blur - validateOnBlur -> validate-on-blur ### Icon related props - icon -> icon - delimiterIcon -> delimiter-icon - prependIcon -> prepend-icon - yearIcon -> year-icon - nextIcon -> next-icon - prevIcon -> prev-icon - completeIcon -> complete-icon - editIcon -> edit-icon - errorIcon -> error-icon - appendIcon -> append-icon - expandIcon -> expand-icon - prependIconCb -> prepend-icon-cb - iconsAndText -> icons-and-text ### Time & Date related props - valueComparator -> value-comparator - headerDateFormat -> header-date-format - allowedDates -> allowed-dates - dayFormat -> day-format - monthFormat -> month-format - titleDateFormat -> title-date-format - yearFormat -> year-format - allowedHours -> allowed-hours - allowedMinutes -> allowed-minutes - firstDayOfWeek -> first-day-of-week ### Position related props - column -> column - row -> row - rows -> rows - positionX -> position-x - positionY -> position-y - clippedRight -> clipped-right - clippedLeft -> clipped-left - bottom -> bottom - top -> top - left -> left - overlap -> overlap - absolute -> absolute - fixed -> fixed - direction -> direction ### Overflow related props - offsetOverflow -> offset-overflow - allowOverflow -> allow-overflow ### Scroll related props - manualScroll -> manual-scroll - invertedScroll -> inverted-scroll - vScrollTarget -> v-scroll:#target - vScroll -> v-scroll ### Ripple related props - ripple -> ripple - vRipple -> v-ripple - vRippleCenter -> v-ripple from center - vRippleClass -> v-ripple with custom my-class ### Value related props - returnMaskedValue -> return-masked-value - returnValue -> return-value - itemValue -> item-value - falseValue -> false-value - trueValue -> true-value - inputValue -> input-value - bufferValue -> buffer-value - value -> value ### Class & Tag related props - activeClass -> active-class - exactActiveClass -> exact-active-class - contentClass -> content-class - contentTag -> content-tag - tag -> tag ### Text related props - pageText -> page-text - noDataText -> no-data-text - noResultsText -> no-results-text - rowsPerPageText -> rows-per-page-text - cancelText -> cancel-text - saveText -> save-text - itemText -> item-text ### Size & Look related props - small -> small - medium -> medium - large -> large - xLarge -> x-large - width -> width - maxWidthAuto -> max-width set to auto - landscape -> landscape - gradient -> gradient - rotate -> rotate - extended -> extended - dense -> dense - block -> block - depressed -> depressed - flat -> flat - raised -> raised - loading -> loading - round -> round - dark -> dark - light -> light - editable -> editable - multiple -> multiple - disabled -> disabled - fluid -> fluid - wrap -> wrap - lightsOut -> lights-out - window -> window - prominent -> prominent - floating -> floating - max -> max - min -> min - backgroundOpacity -> background-opacity - outline -> outline - tile -> tile - badge -> badge - fullWidth -> full-width - fab -> fab - solo -> solo - soloInverted -> solo-inverted - combobox -> combobox - overflow -> overflow - segmented -> segmented - maxWidth -> max-width - autoGrow -> auto-grow - autofocus -> autofocus - box -> box - clearable -> clearable - clipped -> clipped - permanent -> permanent - stateless -> stateless - temporary -> temporary - vertical -> vertical - nonLinear -> non-linear - centered -> centered - circle -> circle - size -> size - button -> button - active -> active - query -> query - ticks -> ticks - minWidth -> min-width - noResize -> no-resize - disableResizeWatcher -> disable-resize-watcher ### Function related props - scrollOffScreen -> scroll-off-screen - status -> status - extension -> extension - fixedTabs -> fixed-tabs - touchless -> touchless - showArrows -> show-arrows - inset -> inset - lazy -> lazy - lazyValidation -> lazy-validation - persistent -> persistent - persistentHint -> persistent-hint - exact -> exact - append -> append - nuxt -> nuxt - replace -> replace - mustSort -> must-sort - itemDisabled -> item-disabled - fullscreen -> fullscreen - scrollable -> scrollable - focusable -> focusable - attach -> attach - popout -> popout - filter -> filter - actions -> actions - expand -> expand - readonly -> readonly - required -> required - disableInitialSort -> disable-initial-sort - closeOnClick -> close-on-click - closeOnContentClick -> close-on-content-click - disableRouteWatcher -> disable-route-watcher - openOnClick -> open-on-click - timeout -> timeout - pickerDate -> picker-date - vResize -> v-resize - vResizeQuiet -> v-resize.quiet - transition -> transition - format -> format - :ripple -> :ripple - zIndex -> z-index - totalVisible -> total-visible - events -> events - openDelay -> open-delay - debounce -> debounce - closeDelay -> close-delay - scrollThreshold -> scroll-threshold - mobileBreakPoint -> mobile-break-point - miniVariantWidth -> mini-variant-width - showCurrent -> show-current - reactive -> reactive ### Data related props - app -> app - id -> id - noData -> no-data - noResults -> no-results - headers -> headers - headerCell -> header-cell - primaryTitle -> primary-title - deletableChips -> deletable-chips - dontFillMaskBlanks -> dont-fill-mask-blanks - returnObject -> return-object - selected -> selected - footer -> footer - items -> items - cacheItems -> cache-items - thumbLabel -> thumb-label - mandatory -> mandatory - activator -> activator - cycle -> cycle - progress -> progress - selection -> selection - autocomplete -> autocomplete - chips -> chips - textarea -> textarea - subheader -> subheader - inactive -> inactive - auto -> auto - label -> label - items -> item - rowsPerPageItems -> rows-per-page-items - totalItems -> total-items - contentProps -> content-props - altLabels -> alt-labels - complete -> complete - tabs -> tabs - miniVariant -> mini-variant - slot -> slot - grow -> grow - tabindex -> tabindex - errorMessages -> error-messages - hint -> hint - itemAvatar -> item-avatar - placeholder -> placeholder - rules -> rules - toggleKeys -> toggle-keys - origin -> origin - type -> type ### Target related props - to -> to - target -> target - scrollTarget -> scroll-target ### Other - alignWithTitle -> align-with-title - indeterminate -> indeterminate - prefix -> prefix - suffix -> suffix - noTitle -> no-title - mode -> mode - divider -> divider - interval -> interval - item-key -> item-key - search -> search - select-all -> select-all - headers -> header - search-input -> search-input - browser-autocomplete -> browser-autocomplete - mask -> mask - name -> name - step -> step - attachFalse= -> attach false ## EXTRAS (JAVASCRIPT IMPORTS & HELPER METHODS) - vImport -> Vuetify import - vImportCss -> Vuetify css import - bablePolyfillImport -> babel-polyfill - vThemeCreate -> Define new theme - vThemeMinification -> Theme minification - vThemeCaching -> Theme caching - vFormEmailRules -> v-form email rule - vFormNameRule -> v-form name rule ## Links - vLink -> Vuetify script link - mIconLink -> Material design icons link - vQuickStart -> vuetify quick start