Introduction

Do you want to avoid tinkering with CSS to get your website looking just right?

Branding is everything in today's digital landscape. With Vuetify 3's customizable theming options, you can create web projects that perfectly reflect your unique branding, and visual identity. Additionally, you can reduce the duplicated code by creating layouts representing your application's different page structures.

In a previous article introducing Vuetify 3 with Vue 3, we created an application that allowed us to add, display, and delete jokes. If you'd like to follow along with this article, please clone the GitHub repository.

git clone https://github.com/thisdot/blog-demos.git
# or `git@github.com:thisdot/blog-demos.git` for ssh

# then cd into the project directory
cd layouts-and-theming-in-vueityf

In this article, we'll go over how you can create layouts in Vuetify 3 to allow you to reuse the same layout for pages that share the same structure. We will also go over how you can customize the look and feel of your application to match your brand's visual identity through the powerful theming tools that Vuetify 3 offers us.

Layouts in Vuetify 3

What are layouts, and how are they useful?

In web development, layouts are akin to blueprints for the structure of your web pages. They provide a consistent and reusable frame for the different pages of an application. A well-designed layout can improve the user experience by providing familiarity and predictability as the user navigates through other parts of your application.

Layouts are particularly helpful in reducing code duplication. Instead of defining the same structure for each page—headers, footers, and navigation menus, you define them once in a layout, and then apply that layout to any page that uses the same structure. This speeds up development, and makes your code easier to maintain.

Using Layouts in Vuetify 3

Creating a layout in Vuetify 3 is as simple as creating a new Vue component. This component will include the common elements shared across multiple pages like headers, footers, and navigation bars. Here is an example of a basic layout:

<template>
  <v-app>
    <v-main>
      <v-header> ... </v-header>
      <v-navigation-drawer> ... </v-navigation-drawer>
      <router-view/>
    </v-main>
    <v-footer> ... </v-footer>
  </v-app>
</template>

This layout has a header, a navigation drawer, and a footer. The <router-view/> component is where the content of the specific pages will be injected.

Building a layout for our application

Let's create a layout for our application. We'll have a top navigation bar and a footer. Inside the layouts directory, create a new file named Default.vue and add the following code:

<template>
  <v-app>
    <v-app-bar app color="primary" dark>
      <v-toolbar-title>Joke Machine</v-toolbar-title>
    </v-app-bar>

    <v-main>
      <router-view/>
    </v-main>

    <v-footer color="primary" app>
      <span>&copy; 2023 Joke Machine</span>
    </v-footer>
  </v-app>
</template>

Additionally, in order for us to use our layout, we will need to modify our router/index.ts file to use the Default.vue component:

const routes = [
{
    //...
    component: () => import('@/layouts/Default.vue'),
    //...
}

This will make sure that our respective pages use the Default.vue layout that we created. The contents of the pages will appear in place of <router-view> in the layout.

It is also worth noting that you can create, and nest as many layouts as you want.

Theming in Vuetify 3

Themes allow you to customize your application's default colors, surfaces, and more. If your brand has specific colors and styling, you can theme your Vuetify application to resemble your brand through theming better. Additionally, Vuetify 3 allows you to modify your theme in real-time programmatically. [Vuetify 3] also comes with light and dark themes pre-installed.

Theming API

Vuetify 3 offers us 2 main APIs for working with themes:

• useTheme is a composable that allows us to get information about the current theme and will enable us to modify the existing theme.
• v-theme-provider is used in the <template> section of your Vue files to modify the theme of all of its children.

Updating the theme of our application

Updating the theme of our application is straightforward with Vuetify 3. Let's customize our application's primary and secondary colors. In the vuetify.ts file, modify the themes section to contain the following styles:

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

const vuetify = createVuetify({
  theme: {
    themes: {
      light: {
        background: '#FFFFFF',
        surface: '#F2F5F8',
        primary: '#6200EE',
        secondary: '#03DAC6',
        error: '#B00020',
        info: '#2196F3',
        success: '#4CAF50',
        warning: '#FB8C00',
      },
    },
  },
})

In this example, we're defining a custom 'light' theme. If you want to use a dark theme, or any other named theme, you can add those as additional properties within the themes object. For example:

themes: {
  light: { /* ... */ },
  dark: { /* ... */ },
}

And... That's it! By changing the various config options in the vuetify.ts file, you can modify how your application looks and feels to match your brand. If you'd like to learn more about themes and all the options you can provide, please check out the official Vuetify documentation.

Conclusion

In this article, we've gone through the concepts of layouts and theming in Vuetify 3. We've seen how layouts can reduce code duplication, and provide consistency across your application. We've looked at how Vuetify's theming features allow you to customize your application to match your brand's visual identity.

Understanding and utilizing these features effectively can significantly enhance the development experience and the end user's interaction with your application. Remember, a well-structured and visually appealing application not only attracts users, but also retains them. Happy coding!