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:

plugins/vuetify.js
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 Design specification, 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

NameRelease dateStatusResource
Material Design 12014✅ AvailableSpecification
Material Design 22017✅ AvailableSpecification
Material Design 32021⚠️ DevelopmentSpecification

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.

plugins/vuetify.js
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.

plugins/vuetify.js
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.

plugins/vuetify.js
import { md3 } from 'vuetify/blueprints'

Preview:

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.