vuetify

popular UI library for Vuejs

Vuetify is a collection of pre-made components paired with powerful features such dynamic themes, global defaults, application layouts, and more

source: Getting Started with Vuetify

The vuetify-nuxt-module is used to integrate Vuetify into Nuxt.

Nuxt Images

Vuetify Documentation

SASS customization

@use 'vuetify' with (
    $font-size-root: .9em,
    $body-font-family: 'Playwrite AU VIC Guides'
);

Added head links for Google Fonts at nuxt.config.ts

  app: {
    head: {
      link: [
        {
          rel: 'preconnect',
          href: 'https://fonts.googleapis.com',
        },
        {
          rel: 'preconnect',
          href: 'https://fonts.gstatic.com',
          crossorigin: '',
        },
        {
          rel: 'stylesheet',
          href: 'https://fonts.googleapis.com/css2?family=Playwrite+AU+VIC+Guides&family=Quicksand:wght@300..700&display=swap',
        },
      ],

color configurations handled at vuetify.config.ts (for a particularly ugly combination):

export default defineVuetifyConfiguration({
  theme: {
    defaultTheme: 'light',
    themes: {
      light: {
        dark: false,
        colors: {
          'background': '#FF00FF',
          'surface': '#AA0000',
          'surface-bright': '#FFFF00',
          'surface-light': '#EEEEEE',
          'surface-variant': '#424242',
          'on-surface': '#00FF00' },
      },