Style entry points

Vuetify allows you to import styles via JavaScript (pre-compiled CSS) or SASS (SCSS). Choosing the right entry point depends on whether you need a quick setup or deep customization capabilities (such as overriding SASS variables).

From javascript

Imports in this section are typically added to your main.js or main.ts file. These are pre-compiled CSS files, meaning you cannot override SASS variables with them, but they are the easiest way to get started.

All-in-one

The vuetify/styles is the standard, all-in-one import. It includes the core framework, utility classes, and the layout system.

• Best for: Most applications that do not require granular control over CSS file size.

• Usage:

  jsCopy

  import 'vuetify/styles'
  import { createVuetify } from 'vuetify'
  

Individual modules

If you are strictly managing bundle size or using a manual build process, you can import style modules individually.

vuetify/styles/core

Contains the CSS reset, typography fundamentals, and basic application structure.

::: info Note: This must be first in your import order to ensure the CSS layers have not already been declared elsewhere. :::

vuetify/styles/colors

Includes the Material Design color palette utility classes (e.g., text-red, bg-blue-darken-1). If you are defining your own theme colors and do not use the standard Material palette classes, you may omit this.

vuetify/styles/utilities

Contains helper classes for layout and spacing (e.g., d-flex, mt-4, pa-2).

Example of modular import:

import 'vuetify/styles/core'      // Reset and structure (Required first)
import 'vuetify/styles/colors'    // Optional: standard color classes
import 'vuetify/styles/utilities' // Optional: helper classes

From SASS

Using SASS entry points allows you to utilize Vuetify's compilation-time features. This is required if you wish to override global SASS variables (like changing the default font or border radius) or use Vuetify's internal mixins.

Main entry point

The vuetify/styles acts as the main entry point to load the framework's styles. $color-pack and $utilities can be configured on this import if you aren't using styles.configFile.

@use 'vuetify';
// OR (these both point to the same file)
@use 'vuetify/styles';

This would be the same as only importing vuetify/styles/core:

@use 'vuetify' with (
  $color-pack: false,
  $utilities: false,
);

Sass settings

The vuetify/settings module is used to configure global SASS variables. See sass variables for more information.

Example configuration:

@use 'vuetify/settings' with (
  $utilities: false,
  $body-font-family: ('Remora Sans', sans-serif),
);