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.
tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme');
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: 'class',
content: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
'./resources/js/**/*.vue',
],
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);
</script>
<template>
<button
@click="toggleDark()"
class="px-4 py-2 text-white bg-gray-600 dark:bg-purple-700"
>
Dark Toggle
</button>
</template>
lets use Dashboard.vue.
js/Pages/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)
</script>
<template>
<Head title="Dashboard" />
<BreezeAuthenticatedLayout>
<template #header>
<h2 class="text-xl font-semibold leading-tight text-gray-800">
Laravel 9 Inertia vue 3 Dark mode
</h2>
</template>
<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>
</div>
<div class="mt-6">
<a
href="#"
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"
>
<h5
class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"
>
Noteworthy technology acquisitions 2021
</h5>
<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.
</p>
</a>
</div>
</div>
</div>
</BreezeAuthenticatedLayout>
</template>
Before dark mode.
laravel inertia dark mode toggle
After click dark mode toggle button.
laravel 9 inertia vue 3 dark mode switch
Read Also
Laravel 9 Inertia Vue 3 DataTables Example
Laravel 9 Inertia Vue 3 File Upload Example
Laravel 9 Inertia Vue 3 Form Submit Example
Laravel 9 Inertia Vue 3 Search & Filter Example
Laravel 9 Install Inertia js Server-side rendering (SSR)
Laravel 9 with Inertia Vue 3 Implement Flash Message
Laravel 9 Inertia Vue 3 CRUD Tutorial Example
Laravel Inertia Vue 3 Form Validation
Laravel 9 Inertia Vue 3 Pagination Example
