Summary

The article provides guidance on changing the default font family in Vuetify 3 and Nuxt 3 applications using the v-defaults-provider component.

Abstract

The article discusses the challenge of altering the default font family in Vuetify, a framework based on Material Design, which does not offer a straightforward method for this customization. The author explains how Vuetify 3 introduces the v-defaults-provider component, which allows developers to set default prop values for components. The article demonstrates how to use this feature to apply a custom font family to the entire application by wrapping the v-app component within v-defaults-provider. It also addresses potential issues when using NuxtLayout and provides solutions for ensuring the custom font is applied consistently across all components, including those in the layout. The author concludes by showing how to import fonts globally and suggests further reading on Vuetify through a curated list.

Opinions

The author believes that changing the default font family in Vuetify can be challenging but is achievable with the right approach in Vuetify 3.
The v-defaults-provider component is highlighted as a useful feature for customizing Vuetify components.
The author emphasizes the importance of wrapping both the v-app and layout components with v-defaults-provider to ensure a consistent font family throughout the application.
The author values community engagement and encourages readers to support the article by giving claps or sharing their ideas in the comments.
There is an opinion that every part of a page can be considered a component, which is a key concept in achieving a global font change in a Nuxt 3 project.
The author provides a GitHub discussion link as a reference for confirming the possibility of setting a default font-family for components.
The article promotes the idea of learning more about Vuetify through a provided list of resources, indicating the author's dedication to sharing knowledge within the developer community.

The Easiest Way to Change the Default Font Family in Vuetify 3 and Nuxt 3

For non-member readers, you can read from this friend link.

You can support me by giving me some claps or sharing your ideas in the comments, which is important to me.

Vuetify doesn’t provide a usual way to edit its default font-family. That’s understandable cause it is based on Material Design. It is hard to change the default font by my search result in Vuetify 2, and it is also not cleared in Vuetify 3.

However, Vuetify 3 has a very useful feature: v-defaults-provider

Defaults provider component — Vuetify (vuetifyjs.com)

The defaults provider allows you to provide specific default prop values to components in a section of your application.

Sounds good and you can use it in this way:

<v-defaults-provider
  :defaults="{'VBtn':{'color':'primary','size':'large','variant':'tonal'}}"
>
  <v-btn>Button</v-btn>
</v-defaults-provider>

Vuetify will use your options to rewrite the props of the Vuetify components. We can see there are some props that affect the style. Since we can set the color, can we set the font-family? I found a discussion in GitHub and the answer is yes:

How to set a default font-family for the button component ? · vuetifyjs/vuetify · Discussion #19165 (github.com)

But up to now, we are still rewriting the props of a specific component, not the whole page. After I started to use Nuxt 3, I drew a conclusion that every part of a page is actually a component, even the page itself. So maybe we can rewrite the v-app component?

In your Nuxt 3 project (also the same for the normal Vue 3 project) , use v-defaults-provider to wrap the v-app component:

<template>
  <NuxtLayout>
    <v-defaults-provider :defaults="{ VApp: { style: 'font-family: Protest Riot, sans-serif;' } }">
      <v-app>
        <NuxtPage />
      </v-app>
    </v-defaults-provider>
  </NuxtLayout>
</template>

And things are done! If you are using <NuxtLayout> like me, you may find this won’t work for the Vuetify components in the layout. Because the layout is not being wrapped in v-app, so you may need to do the same in your layout code; Or you could also use v-defaults-provider to wrap both the v-app and <slot /> in the layout:

<template>
  <div>
    <v-defaults-provider :defaults="{ VBreadcrumbs: { style: 'font-family: Protest Riot, sans-serif;' } }">
      <v-breadcrumbs :items="breadcrumbs">
        ...
      </v-breadcrumbs>
    </v-defaults-provider>
    <slot />
  </div>
</template>

Then you just need to import your fonts globally:

If you are interested, you can read my list to learn more about Vuetify:

List: Learn Frontend from Vuetify | Curated by LikeDreamwalker | Medium

In Plain English 🚀

Thank you for being a part of the In Plain English community! Before you go:

Be sure to clap and follow the writer ️👏️️
Follow us: X | LinkedIn | YouTube | Discord | Newsletter
Visit our other platforms: Stackademic | CoFeed | Venture | Cubed
More content at PlainEnglish.io