In this quick post, we will teach you how to build an animated toggle switch button in Vue 3 with the help of Vue js toggle button library.
Vue 3 toggle component comes with labels, custom slots, and most importantly styling options with Tailwind CSS support. We will throw light on the procedure that will help us build a simple toggle component in Vue.
A toggle button is a graphical user interface element that help users to switch either between “on” and “off” or “enabled” and “disabled.”
Ideally, a toggle switch button is used manage settings, options, or features in web applications, websites, or various devices.
Vue 3 Animated Toggle Button Example
- Step 1: Create Vue Project
- Step 2: Install Toggle Package
- Step 3: Add Bootstrap CSS
- Step 4: Create Basic Component
- Step 5: Create Toggle Button
- Step 6: Update App File
- Step 7: View App on Browser
Create Vue Project
In order to start development in Vue, you must have Vue CLI installed on your system.
You have to execute the given command:
npm install -g @vue/cliYou can now use the given command to install a new Vue 3 application, ensure that you choose the Vue 3 option from the given list.
vue create vue-demo-appNavigate to the project folder:
cd vue-demo-appInstall Toggle Package
In this step, you will have to type the given command, then press enter to let the terminal add the package to the Vue project.
npm install @vueform/toggle --legacy-peer-depsUI Components are the backbone of any user interface, you might require many components. Sometimes, you might have to display alert messages you can use Toast notification in Vue, make sure to check this guide.
Add Bootstrap CSS
We are using Bootstrap framework, you can do it in multiple ways.
Either you can install the package or if you wanna make it short and simple then add the given URL under the head section inside the public/index.html file:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet"/>Create Basic Component
Components allow us to keep specific functionality code in separate file, therefore make the components/Home.vue file:
<template>
<div>
</div>
</template>
<script>
export default {
data() {
return {
}
}
}
</script>Create Toggle Button
Define the Toggle directive, set the value in the v-model prop to integrate the toggle button in Vue.
Insert the given code in the components/Home.vue file:
<template>
<div>
<h2 class="mb-4">Vue 3 Toggle Button Example</h2>
<Toggle v-model="value" />
</div>
</template>
<script>
import Toggle from '@vueform/toggle'
export default {
components: {
Toggle,
},
data() {
return {
value: true
}
}
}
</script>
<style src="@vueform/toggle/themes/default.css"></style>Update App File
We have created a toggle button reusable component, now we can add it to the App.vue file:
<template>
<div class="container mt-5">
<Home />
</div>
</template>
<script>
import Home from './components/Home.vue';
export default {
components: {
Home
}
}
</script>View App on Browser
We have to now run the application’s development server, invoke the given command after typing on the console.
npm run serveHere is the URL that allows you to view the app on the browser:
http://localhost:8080
Conclusion
Generally, a button is used to simplify the user interaction in web applications. It makes the human computer interaction facile.
The look and feel of a toggle button depends on your choice, in this Vue animated toggle button example we created a simple toggle button.
We defined a series of steps to comprehend the process of implementing a basic toggle switch button in Vue.