Setup

Adding Vuetify to your project is only a few steps away. Lets go through them quickly.

Installation

Install the vuxtify module dependency to your project. This will also install the vuetify dependency.

Yarn

yarn add @jacobgardos/vuxtify

Vuxtify has vuetify as a dependency. You do not need to install vuetify separately.

Add it your modules section in your nuxt.config.ts

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@jacobgardos/vuxtify']
})

Provide your Vuetify options in your app.config.ts

app.config.ts

export default defineAppConfig({
  vuetify: {
    theme: {
      defaultTheme: "light",
      themes: {
        light: {
          colors: {
            primary: "#1976D2",
            secondary: "#424242",
            accent: "#82B1FF",
            error: "#FF5252",
            info: "#2196F3",
            success: "#4CAF50",
            warning: "#FFC107",
          },
        },
      },
    },
  },
});

See the Vuetify Docs for more details on the options.

The vuetify options in app.config.ts can edited at runtime and it's changes will be reflected in the app after refreshing the page. Allowing you to make changes without having to restart the dev server.

Options

You can customize the module's behavior by using the vuxtify property in your nuxt.config.ts file.

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@jacobgardos/vuxtify'],
  vuxtify: {
    // Module Options
  }
})

See the module options for more details.

Getting StartedOptions