{"id":18919,"library":"vue-toggles","title":"Vue Toggles","description":"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.","status":"active","version":"2.2.2","language":"javascript","source_language":"en","source_url":"https://github.com/juliandreas/vue-toggles","tags":["javascript","vue","vuejs","vue.js","vue3","toggle","checkbox","switch","library","typescript"],"install":[{"cmd":"npm install vue-toggles","lang":"bash","label":"npm"},{"cmd":"yarn add vue-toggles","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-toggles","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Vue 3 is a peer dependency, required for component usage.","package":"vue","optional":false}],"imports":[{"note":"Named export, not default. CommonJS require is also not supported; package is ESM-only.","wrong":"import VueToggles from 'vue-toggles'","symbol":"VueToggles","correct":"import { VueToggles } from 'vue-toggles'"},{"note":"Use 'import type' for type-only imports when using TypeScript.","wrong":"import { VueTogglesProps } from 'vue-toggles' (without 'type')","symbol":"VueTogglesProps","correct":"import type { VueTogglesProps } from 'vue-toggles'"},{"note":"Default import is not supported; always use named import { VueToggles }.","wrong":null,"symbol":"VueToggles (default import)","correct":"import VueToggles from 'vue-toggles'"}],"quickstart":{"code":"import { createApp } from 'vue'\nimport App from './App.vue'\nimport { VueToggles } from 'vue-toggles'\n\nconst app = createApp(App)\napp.component('VueToggles', VueToggles)\napp.mount('#app')\n\n<!-- In App.vue -->\n<template>\n  <VueToggles v-model=\"isChecked\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\nconst isChecked = ref(false)\n</script>","lang":"typescript","description":"Shows registering the component globally and using v-model in a Vue 3 component with TypeScript."},"warnings":[{"fix":"Check the source or the latest documentation for correct usage.","message":"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.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Use v-model=\"myVar\" instead of @click=\"myVar = !myVar\".","message":"Using @click to toggle value is not necessary; v-model is the recommended approach.","severity":"deprecated","affected_versions":">=2.0.0"},{"fix":"Ensure the v-model variable is explicitly boolean (e.g., ref(false)).","message":"The component expects v-model to be a boolean. Passing non-boolean values may cause unexpected behavior.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run 'npm install vue-toggles' and ensure the import statement is 'import { VueToggles } from \"vue-toggles\"'.","cause":"Package not installed or import path incorrect.","error":"Could not resolve 'vue-toggles'"},{"fix":"Run 'npm install vue-toggles' (types are bundled). Restart TS server.","cause":"TypeScript cannot locate module types. May need to install types or package is missing.","error":"Cannot find module 'vue-toggles' or its corresponding type declarations."},{"fix":"Register the component: either globally (app.component) or locally ('components: { VueToggles }').","cause":"Component not registered locally or globally in Vue.","error":"Failed to resolve component: VueToggles"},{"fix":"Ensure the variable is boolean: 'const myVar = ref(false)' or use ':value=\"myVar\" @click=\"myVar = !myVar\"'.","cause":"Passing a non-boolean value to v-model.","error":"v-model expects a boolean value"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}