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:
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.
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),
);