vue-toggles

library2.2.2jsnpmunverified

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.

web-framework

npm install vue-toggles

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE-TOGGLES

vue-toggles

web-frameworkjavascriptv2.2.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VueToggles

✓ import { VueToggles } from 'vue-toggles'

✗ import VueToggles from 'vue-toggles'

Named export, not default. CommonJS require is also not supported; package is ESM-only.

VueTogglesProps

✓ import type { VueTogglesProps } from 'vue-toggles'

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

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

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')  <template> <VueToggles v-model="isChecked" /> </template> <script setup lang="ts"> import { ref } from 'vue' const isChecked = ref(false) </script>

Debug

Known issues

gotchaThe '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.

affects: >=2.0.0

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

fix

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

affects: >=2.0.0

gotchaThe 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)).

affects: >=2.0.0

Errors

Common errors & fixes

Could not resolve 'vue-toggles'

Package not installed or import path incorrect.

fix

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

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

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.

Failed to resolve component: VueToggles

Component not registered locally or globally in Vue.

fix

Register the component: either globally (app.component) or locally ('components: { VueToggles }').

v-model expects a boolean value

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"'.

Upgrade

Version history

2.2.2latest on npm

Audit

Dependencies

vuerequiredVue 3 is a peer dependency, required for component usage.

Agent activity

8 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/juliandreas/vue-toggles ↗

packagehttps://www.npmjs.com/package/vue-toggles ↗

homepagehttps://vue-toggles.netlify.app/ ↗