Step 1: Getting Project Ready
To get started you will need to have your VueJs project ready. You can make use of Vite to scaffold a new VueJS project or in my case, it will be a new Laravel Project. If you do have an existing VueJs project then you can go ahead and continue to step 2.
# npm 7+, extra double-dash is needed: npm create vite@latest my-vue-app -- --template vue # yarn yarn create vite my-vue-app --template vue
For a new Laravel project, you can make use of the "laravel new" command. Do note that you can use Breeze for the pre-configured VueJs setup provided by Laravel.
laravel new my-laravel-app
Step 2: Install VueUse Libaray
The 2nd step is to install VueUse library which is "Collection of Essential Vue Composition Utilities" and this library has many utilities that we can make use of. But in this case, we'll be using "useToggle" and "useDark".
import { useToggle, useDark } from '@vueuse/core';
const isDark = useDark()
const toggleDark = useToggle(isDark)
Step 3: Tailwind CSS Toggle Component
The next step is to have the Toggle Component and in this case, we'll be using Tailwind CSS as the front-end styling library. This component is quite simple and straightforward, do visit PostSrc Components to see more.
<div class="inline-flex bg-white p-8 shadow-lg shadow-slate-200 rounded-lg w-auto"> <label for="toggle" class="inline-flex relative items-center cursor-pointer"> <input type="checkbox" id="toggle" class="sr-only peer"> <div class="w-11 h-6 bg-slate-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-slate-300 dark:peer-focus:ring-indigo-300 rounded-full peer dark:bg-slate-300 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white dark:bg-slate-500 after:border-slate-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-slate-400 peer-checked:bg-indigo-600"></div> </label> </div>
Step 4: VueJS Binding
For this example, we'll make use of the VueJS Single File Component (SFC). We'll directly make use of the utilities that we have import previously and then bind them with our HTML toggle element.
<script>
import { useToggle, useDark } from '@vueuse/core';
const isDark = useDark()
const toggleDark = useToggle(isDark)
</script>
<template>
<label for="toggle" class="inline-flex relative items-center cursor-pointer ml-4">
<input type="checkbox" id="toggle" class="sr-only peer" :checked="isDark" @click="toggleDark()">
<div class="w-11 h-6 bg-slate-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 dark:peer-focus:ring-indigo-800 rounded-full peer dark:bg-slate-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-slate-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-slate-600 peer-checked:bg-indigo-600"></div>
</label>
</template>I hope you learned something and happy coding!
