Vue Toggles

2.2.2 verified Sat Apr 25 auth: no javascript

Vue Toggles is a highly customizable and accessible toggle/switch component for Vue 3 (v2.2.2, stable, actively maintained). It provides accessibility support out of the box: aria-checked, aria-readonly, and prefers-reduced-motion. Props allow control over colors, sizes, text, and orientation. Supports v-model and @click patterns. Ships TypeScript types. Minimal footprint with only Vue 3 as a peer dependency. Differentiators: strong accessibility focus, simple API, no extra dependencies.

Common errors

error Could not resolve 'vue-toggles' ↓

cause Package not installed or import path incorrect.

fix

Run 'npm install vue-toggles' and ensure the import statement is 'import { VueToggles } from "vue-toggles"'.

error Cannot find module 'vue-toggles' or its corresponding type declarations. ↓

cause TypeScript cannot locate module types. May need to install types or package is missing.

fix

Run 'npm install vue-toggles' (types are bundled). Restart TS server.

error Failed to resolve component: VueToggles ↓

cause Component not registered locally or globally in Vue.

fix

error v-model expects a boolean value ↓

cause Passing a non-boolean value to v-model.

fix

Ensure the variable is boolean: 'const myVar = ref(false)' or use ':value="myVar" @click="myVar = !myVar"'.

Warnings

gotcha The 'fontSize' prop is not documented in the README but exists in the source. It may be available, but use with caution as it could change. ↓

fix Check the source or the latest documentation for correct usage.

deprecated Using @click to toggle value is not necessary; v-model is the recommended approach. ↓

fix Use v-model="myVar" instead of @click="myVar = !myVar".

gotcha The component expects v-model to be a boolean. Passing non-boolean values may cause unexpected behavior. ↓

fix Ensure the v-model variable is explicitly boolean (e.g., ref(false)).

Install

npm install vue-toggles

yarn add vue-toggles

pnpm add vue-toggles

Imports

VueToggles
wrong
```
import VueToggles from 'vue-toggles'
```
correct
```
import { VueToggles } from 'vue-toggles'
```
Named export, not default. CommonJS require is also not supported; package is ESM-only.

VueTogglesProps

wrong

import { VueTogglesProps } from 'vue-toggles' (without 'type')

correct

import type { VueTogglesProps } from 'vue-toggles'

Use 'import type' for type-only imports when using TypeScript.

VueToggles (default import)
```
import VueToggles from 'vue-toggles'
```
Default import is not supported; always use named import { VueToggles }.

Quickstart

Shows registering the component globally and using v-model in a Vue 3 component with TypeScript.

import { createApp } from 'vue'
import App from './App.vue'
import { VueToggles } from 'vue-toggles'

const app = createApp(App)
app.component('VueToggles', VueToggles)
app.mount('#app')

<!-- In App.vue -->
<template>
  <VueToggles v-model="isChecked" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
const isChecked = ref(false)
</script>