How to Use Vuetify with Laravel
Thank you for your continued support.
This article contains advertisements that help fund our operations.
Table Of Contents
A guide on how to use Vuetify with Laravel.
Introduction
As of Laravel 11, Vue can be integrated with Inertia, as described in the Laravel documentation. This article focuses on setting up Vuetify with Inertia. If you’re using an older setup, such as Laravel-Mix, you can refer to this article:
Setting up Laravel + Vue.js + Vue-Router + Vuetify
How to Use Vuetify with Laravel
Install Necessary Packages
Run the following commands to install Vuetify and Material Design Icons.
npm i vuetify
npm i @mdi/fontUpdate app.js
Add the following lines to resources/js/app.js.
import { createApp, h } from "vue"
import { createInertiaApp } from "@inertiajs/vue3"
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers"
import { ZiggyVue } from "../../vendor/tightenco/ziggy"
// Add these lines
import "@mdi/font/css/materialdesignicons.css"
import "vuetify/styles"
import { createVuetify } from "vuetify"
import * as components from "vuetify/components"
import * as directives from "vuetify/directives"
const vuetify = createVuetify({
components,
directives,
})
// End of added section, and one more addition in the .use section below
const appName = import.meta.env.VITE_APP_NAME || "Laravel"
createInertiaApp({
title: title => `${title} - ${appName}`,
resolve: name =>
resolvePageComponent(
`./Pages/${name}.vue`,
import.meta.glob("./Pages/**/*.vue")
),
setup({ el, App, props, plugin }) {
return createApp({ render: () => h(App, props) })
.use(vuetify) // ← Add this line
.use(plugin)
.use(ZiggyVue)
.mount(el)
},
progress: {
color: "#4B5563",
},
})If Not Using Inertia
The code snippet below contains the necessary Vuetify setup. Add it using createApp.
// Add these lines
import "@mdi/font/css/materialdesignicons.css"
import "vuetify/styles"
import { createVuetify } from "vuetify"
import * as components from "vuetify/components"
import * as directives from "vuetify/directives"
const vuetify = createVuetify({
components,
directives,
})
return createApp({ render: () => h(App, props) })
.use(vuetify) // ← Add this line
.use(plugin)
.use(ZiggyVue)
.mount(el)Wrap Content in v-app
This step is easy to forget but essential. To use Vuetify, wrap your content in <v-app></v-app>. Vuetify components will not work outside this tag.
<template>
<main>
<v-app>
<slot />
</v-app>
</main>
</template>Confirm the Installation
Try displaying a button with the following code:
<v-btn depressed color="primary"> Primary </v-btn>If you see a button similar to the one below, the setup is complete.
This article configures Vuetify to display Material Design Icons. You can use icons like this:
<v-icon>mdi-plus-thick</v-icon>Hope this guide is helpful!
