Vue Toggle Switch

About this module

A Vue 3 toggle switch with <script setup>, v-model support, keyboard toggling and ARIA attributes.

Installation

1. 1

   Install Vue

   Create a Vue 3 project or add the component to an existing one.

   npm create vue@latest

2. 2

   Create the component

   Create VueToggleSwitch.vue and paste the source below.

3. 3

   Import and use

   Import the component in your page or parent component and render it.

Usage

1. 1

   Import the component

   Import VueToggleSwitch in a parent component.

   import VueToggleSwitch from "./components/VueToggleSwitch.vue";

2. 2

   Register and render

   Register it in your setup and render it in the template.

   <script setup>
   import VueToggleSwitch from "./components/VueToggleSwitch.vue";
   </script>
   
   <template>
     <vue-toggle-switch />
   </template>