Vuetify

Store

For Enterprise

For version 2 of the Material Design specification, Google created Material studies in order to explore real-world design limitations through fictional apps, each with their own unique properties and use cases. Vuetify presets integrate these studies through pre-configured framework options, SASS variables and custom styles that instantly change the look and feel of your application.

The default Vuetify preset provides all framework services with baseline values. Each object key corresponds to a service on the $vuetify object and can be overwritten via a preset or custom user options in the Vuetify constructor.

Material Design is an opinionated visual language that can be overwhelming to work with when implementing highly customized designs. The new studies showcase the flexibility of Material Theming and walk you through just how easy it is to create unique applications without the default Material appearance.

There are currently a total of 7 Material Studies to choose from, each that have a corresponding preset plugin:

In your console type vue add vuetify-preset-{name}, where {name} corresponds to one of the available Material Studies. Once the plugin is installed, your vuetify.js file will be updated to include the selected preset.

To start development, in the command line type yarn serve or npm run serve. The Vuetify service plugin will bootstrap into Vue CLI and automatically apply all of the variable and style changes from the preset. For more information on how the generator and service plugins' work, checkout the Plugin Development Guide.

Vuetify options are merged from the top down—Defaults, Preset and User. The default preset is first merged with a provided preset property in the Vuetify constructor options. If applicable, user supplied options will then be merged with the global defaults and preset.

Due to the studies being more visual than technical, presets are our best-guess implementation. In many cases, styles and functionality must be inferred due to lack of information within the study's guidelines. There are also situations in which part of a study can not or will not be supported:

  • It requires changes to the framework
  • It's not currently possible with CSS
  • We haven't figured out how to support it yet

When you install a preset, it will update your main public/index.html file with only the fonts and weights it needs. For example, a study may only require 400,500,600 font weights. This would cause some helper classes in Vuetify to not work; e.g. font-weight-thin requires 300 font weight. Weights can always be later modified by updating the font link in your public.html.

In order to update SASS variables in Vuetify, styles are recompiled during development and when your application is built for production. This will increase your initial compilation time and will be triggered any time you edit a variables file. If your application isn't affected by any of the Vuetify loader limitations, you can opt to import Vuetify from vuetify/lib/framework. This can decrease compilation time by up to 50%.

A Vuetify preset is a npm package that provides framework wide options and custom styling using Vue CLI. It consists of a SASS variables file, a CSS overrides file and the Vue CLI Generator and Plugin Service. Some of the features offered by presets are:

  • configures framework options with pre-defined values — can use any combination of the available Vuetify options
  • injects custom SASS variables for configuring existing Vuetify functionality; e.g. components. Presets use the Vue CLI Plugin API to hoist SASS variables during compilation
  • provides global overrides for styling that is not coverable through variables
  • a streamlined approach to modifying a Vuetify application's style and options

This file is a Vue CLI Generator that updates the vuetify.js file in your application to include the defined preset.

This file is a Vue CLI Plugin Service that hooks into your application when running yarn serve or npm run serve. The injectSassVariables method injects the target file's variables into all SASS/SCSS files.

This contains the framework configuration options that are passed to the Vuetify constructor. These options combine with any user supplied values and the framework defaults.

This is a catch all for style modifications that do not have corresponding variables to target. This is useful when you need to add new CSS properties to existing components.

This is a SASS/SCSS variables file which will overwrite existing framework values. You can find more information about available variables on the Vuetify SASS Variables documentation page or within the API section of a component.

Ready for more? Continue reading with:

Caught a mistake or want to contribute to the documentation? Edit Layout or Content on GitHub!