How to Create Animated Toggle Button in Vue 3

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/cli

You 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-app

Navigate to the project folder:

cd vue-demo-app

Install 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-deps

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 serve

Here 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.