{"id":15050,"library":"vuesax","title":"Vuesax v3","description":"Vuesax v3 is a user interface component framework for Vue.js, offering a suite of visually distinctive and customizable components such as buttons, inputs, tables, and popups. The package, `vuesax`, with its last significant release being 3.12.2, was primarily designed for applications built with Vue 2. While the provided release notes indicate a period of active bug fixes and feature additions within the v3 series, the official `vuesax` npm package itself has not seen updates for several years, leading it to be considered effectively abandoned by its original author in favor of a complete rewrite, Vuesax v4. For developers seeking to use Vuesax's design language, this package serves as a legacy option for Vue 2 projects. For Vue 3 compatibility, users should consider community-maintained forks like `vuesax3` or the officially in-development Vuesax v4, which is a separate, in-progress framework.","status":"abandoned","version":"3.12.2","language":"javascript","source_language":"en","source_url":"https://github.com/lusaxweb/vuesax","tags":["javascript","vuesax","vue","vuejs","vue-components","components","component","css"],"install":[{"cmd":"npm install vuesax","lang":"bash","label":"npm"},{"cmd":"yarn add vuesax","lang":"bash","label":"yarn"},{"cmd":"pnpm add vuesax","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Vuesax is a component framework built on Vue.js, specifically compatible with Vue 2.x.","package":"vue","optional":false}],"imports":[{"note":"This imports the entire Vuesax library, including all components and styles. Recommended for smaller projects or if you use most components. For Vue 2 applications.","wrong":"const Vuesax = require('vuesax'); // CommonJS import for ESM-first projects\nVue.use(Vuesax);","symbol":"Vuesax (full bundle)","correct":"import Vuesax from 'vuesax';\nVue.use(Vuesax);"},{"note":"Allows for tree-shaking and smaller bundle sizes by only importing the necessary components. Component names are prefixed with 'vs'.","wrong":"import { Button, Select } from 'vuesax'; // Incorrect component naming convention\nimport vsButton from 'vuesax/lib/vsButton';","symbol":"Individual components","correct":"import { vsButton, vsSelect } from 'vuesax';\nVue.use(vsButton);\nVue.use(vsSelect);"},{"note":"This import is mandatory for Vuesax components to be styled correctly. It should be included once in your main application entry file.","wrong":"import 'vuesax/dist/style.css'; // Incorrect path\n// No CSS import at all","symbol":"Global CSS","correct":"import 'vuesax/dist/vuesax.css';"}],"quickstart":{"code":"import Vue from 'vue';\nimport App from './App.vue';\nimport { vsButton, vsInput } from 'vuesax';\nimport 'vuesax/dist/vuesax.css'; // Don't forget the styles!\n\nVue.use(vsButton);\nVue.use(vsInput);\n\nnew Vue({\n  render: h => h(App),\n}).$mount('#app');\n\n// App.vue example (inside <template>):\n// <template>\n//   <div id=\"app\">\n//     <vs-button type=\"primary\">Hello Vuesax</vs-button>\n//     <vs-input placeholder=\"Enter text\" v-model=\"myValue\"/>\n//   </div>\n// </template>\n//\n// (inside <script>):\n// export default {\n//   name: 'App',\n//   data() {\n//     return {\n//       myValue: ''\n//     }\n//   }\n// }","lang":"javascript","description":"Demonstrates how to set up Vuesax v3 in a Vue 2 project, registering individual components and importing the necessary global CSS."},"warnings":[{"fix":"For Vue 3 compatibility, use the community-maintained `vuesax3` package (npm: `vuesax3`) or migrate to the officially supported Vuesax v4 (`vuesax-next`), which is a complete rewrite.","message":"The `vuesax` package (v3) is designed for Vue 2. Attempting to use it directly in a Vue 3 project will lead to incompatibility issues and errors, as Vue 3 introduced significant breaking changes to its API.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"For active development and support, especially with Vue 3, consider using `vuesax3` or the Vuesax v4 (`vuesax-next`) project. If you must use v3, be aware that you are on an unmaintained branch.","message":"The original `vuesax` npm package (v3.x.x) is largely unmaintained by its original author, with its last publish date being several years ago for version 3.12.2. Critical bug fixes or new features are unlikely to be released for this version.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Ensure `import 'vuesax/dist/vuesax.css';` is included once in your main application entry point (e.g., `main.js` or `App.vue`'s script section if using a build tool).","message":"Vuesax v3 requires an explicit CSS import (`import 'vuesax/dist/vuesax.css'`) for its components to render with the correct styling. Forgetting this import will result in unstyled (plain HTML-looking) components.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Consult the Vuesax v4 documentation for migration guides and new API specifications if you plan to upgrade from a Vue 2 Vuesax v3 project to a Vue 3 Vuesax v4 project. It's often easier to start a new project with V4.","message":"Vuesax v4 (`vuesax-next`) is a complete rewrite with different underlying technologies (e.g., TypeScript, Sass instead of Stylus) and significantly altered APIs compared to Vuesax v3. Migration from v3 to v4 is not a direct upgrade but requires substantial refactoring.","severity":"breaking","affected_versions":">=3.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure that data bound to Vuesax components that expect arrays (like `vs-table`'s `data` prop) is always initialized as an array (e.g., `[]`) to prevent `undefined` access.","cause":"Often occurs in Vuesax components (e.g., Table component) when data properties expected to be arrays are undefined or null, leading to runtime errors during rendering.","error":"TypeError: Cannot read property 'filter' of undefined"},{"fix":"Review component nesting, especially with components like `vs-dropdown` or `vs-select`, and ensure no reactive property updates trigger endless re-renders. Check for circular dependencies or incorrect `beforeDestroy` hook implementations.","cause":"Can happen with complex component nesting or improper lifecycle hook usage within Vuesax components, leading to infinite recursion.","error":"RangeError: Maximum call stack size exceeded"},{"fix":"Check the specific console error message for more details. Ensure all required props are passed correctly and that there are no conflicting global styles or JavaScript interfering with Vuesax's internal DOM manipulation for notifications and dialogs.","cause":"Generic console errors often indicate issues with component state, improper prop usage, or conflicts with global styles/scripts affecting Vuesax's internal logic.","error":"Notification and dialog component gives console error"}],"ecosystem":"npm"}