vuesax

library3.12.2jsnpmunverified

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.

web-framework

npm install vuesax

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUESAX

vuesax

web-frameworkjavascriptv3.12.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.

Vuesax (full bundle)

✓ import Vuesax from 'vuesax'; Vue.use(Vuesax);

✗ const Vuesax = require('vuesax'); // CommonJS import for ESM-first projects Vue.use(Vuesax);

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.

Individual components

✓ import { vsButton, vsSelect } from 'vuesax'; Vue.use(vsButton); Vue.use(vsSelect);

✗ import { Button, Select } from 'vuesax'; // Incorrect component naming convention import vsButton from 'vuesax/lib/vsButton';

Allows for tree-shaking and smaller bundle sizes by only importing the necessary components. Component names are prefixed with 'vs'.

Global CSS

✓ import 'vuesax/dist/vuesax.css';

✗ import 'vuesax/dist/style.css'; // Incorrect path // No CSS import at all

This import is mandatory for Vuesax components to be styled correctly. It should be included once in your main application entry file.

Demonstrates how to set up Vuesax v3 in a Vue 2 project, registering individual components and importing the necessary global CSS.

import Vue from 'vue'; import App from './App.vue'; import { vsButton, vsInput } from 'vuesax'; import 'vuesax/dist/vuesax.css'; // Don't forget the styles! Vue.use(vsButton); Vue.use(vsInput); new Vue({ render: h => h(App), }).$mount('#app'); // App.vue example (inside <template>): // <template> // <div id="app"> // <vs-button type="primary">Hello Vuesax</vs-button> // <vs-input placeholder="Enter text" v-model="myValue"/> // </div> // </template> // // (inside <script>): // export default { // name: 'App', // data() { // return { // myValue: '' // } // } // }

Debug

Known issues

breakingThe `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.

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.

affects: >=3.0.0

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

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.

affects: >=3.0.0

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

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

affects: >=3.0.0

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

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.

affects: >=3.0.0

Errors

Common errors & fixes

TypeError: Cannot read property 'filter' of undefined

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.

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.

RangeError: Maximum call stack size exceeded

Can happen with complex component nesting or improper lifecycle hook usage within Vuesax components, leading to infinite recursion.

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.

Notification and dialog component gives console error

Generic console errors often indicate issues with component state, improper prop usage, or conflicts with global styles/scripts affecting Vuesax's internal logic.

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.

Upgrade

Version history

3.12.2latest on npm

Audit

Dependencies

vuerequiredVuesax is a component framework built on Vue.js, specifically compatible with Vue 2.x.

Agent activity

8 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/lusaxweb/vuesax ↗

packagehttps://www.npmjs.com/package/vuesax ↗

homepagehttps://lusaxweb.github.io/vuesax/ ↗