How to Use Dark Mode in Laravel 9 Inertia Vue 3

In this section we will see how to use dark mode in laravel 9 inertia vue 3 with using vueuse. For dark mode we will use tailwind css and vue use, first we need to install & setup laravel breeze for inertia, you can also use laravel jetstream.

Laravel 9 Inertia Vue 3 with Tailwind CSS Dark Mode

Create Laravel Project.

composer create-project --prefer-dist laravel/laravel inertia-darkmode

Install laravel breeze via composer

composer require laravel/breeze --dev

install inertia vue 3

php artisan breeze:install vue

install & run npm

npm install && npm run dev

run below command to migrate

php artisan migrate

Run vite

npm run dev

Install VueUse in laravel Inertia For Dark Mode

Run below command install vueuse.

npm i @vueuse/core

Add darkMode class in tailwind.config.js.


const defaultTheme = require('tailwindcss/defaultTheme');

/** @type {import('tailwindcss').Config} */
module.exports = {
    darkMode: 'class',
    content: [

    theme: {
        extend: {
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],

    plugins: [require('@tailwindcss/forms')],

You can use dark mode anywhere in inertia vue with Vueuse Dark mode.

<script setup>
import { useDark, useToggle } from "@vueuse/core";

const isDark = useDark();
const toggleDark = useToggle(isDark);
        class="px-4 py-2 text-white bg-gray-600 dark:bg-purple-700"
        Dark Toggle

lets use Dashboard.vue.


<script setup>
import { useDark, useToggle } from '@vueuse/core'
import BreezeAuthenticatedLayout from "@/Layouts/Authenticated.vue";
import { Head } from "@inertiajs/inertia-vue3";

const isDark = useDark()
const toggleDark = useToggle(isDark)

    <Head title="Dashboard" />

        <template #header>
            <h2 class="text-xl font-semibold leading-tight text-gray-800">
                Laravel 9 Inertia vue 3 Dark mode

        <div class="py-12">
            <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
                <div class="overflow-hidden bg-white shadow-sm sm:rounded-lg">
                    <div class="p-6 bg-white border-b border-gray-200">
                        <button @click="toggleDark()" class="px-4 py-2 text-white bg-gray-600 dark:bg-purple-700">Dark Toggle</button>
                <div class="mt-6">
                        class="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow-md hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700"
                            class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"
                            Noteworthy technology acquisitions 2021
                        <p class="font-normal text-gray-700 dark:text-gray-400">
                            Here are the biggest enterprise technology
                            acquisitions of 2021 so far, in reverse
                            chronological order.

Before dark mode.

laravel inertia dark mode toggle

laravel inertia dark mode toggle

After click dark mode toggle button.

laravel 9 inertia vue 3 dark mode switch

laravel 9 inertia vue 3 dark mode switch