Blueprints
Vuetify blueprints are a new way to pre-configure your entire application with a completely unique design system.
Usage
Blueprints are a collection of Vuetify configuration options that assign default values for components, colors, language, and more. Open your project’s vuetify.js file and import the desired blueprint. The follow example demonstrates how to apply the Material Design 1 preset:
import { createVuetify } from 'vuetify'
import { md1 } from 'vuetify/blueprints'
export default createVuetify({
blueprint: md1,
})
White-label concept
While Vuetify is built under the guise of Google’s Material Designspecification, it is still flexible enough to be used as the foundation for any design system. By default, Vuetify components have no color and are white-label in nature. A white-label product is a product or service produced by one company that other companies rebrand to make it appear as if they had made it.
Available blueprints
| Name | Release date | Status | Resource |
|---|---|---|---|
| Material Design 1 | 2014 | ✅ Available | Specification |
| Material Design 2 | 2017 | ✅ Available | Specification |
| Material Design 3 | 2022 | ✅ Available | Specification |
Material Design 1
Released in 2014, the original Material Design specification aimed to create a visual language that combined principles and good design with technical and scientific innovation.
import { md1 } from 'vuetify/blueprints'
Preview:
Material Design 2
Released in 2017, version 2 of Google’s design specification received a massive upgrade with new components, guidelines, and improved on the principles that made the first system so successful.
import { md2 } from 'vuetify/blueprints'
Preview:
Material Design 3
Material Design 3 is currently in active development and represents the next chapter of Google’s design system.
import { md3 } from 'vuetify/blueprints'
Preview: