Need help with VueJS? Schedule a Free Consultation with our Experts.
Learn More

Vuesax - The all new Vue Component Library

Vuesax - The all-new Vue Component Library. Why Vuesax? How to Install & Integrate Vuesax? How to customize Vuesax Theme?

Posted by Jitendra Nirnejak on 30 Nov 2019
Vuesax - The all new Vue Component Library

Vuesax is a radically new framework and with an idea of ​​being different from other frameworks

Building a website that works fine but isn't aesthetically pleasing is not acceptable anymore. Users now expect a certain level of quality and polish when they visit a website or app. So when you're building a new website you don't just have to think about functionality but also have to make sure it has a modern look and feel with good user experience. This may come as a challenge if you're working in a small team or you don't have enough time or resources to invest.

That's where choosing a design system library helps. A design system is a set of guidelines that provides a consistent design and user experience. Some of the most popular design systems are:

  • Material Design(Google)
  • Ant Design
  • Fluent Design System(Microsoft)

You can just go ahead and include the CSS from CDN and take advantage of these. Although that does not let you utilize all the features of a Design System. It is a better practice to use a complete framework to take full advantage of these Design Systems. Vuesax is such a framework.

In this blog, we are going to take a look at Vuesax which is a Component Library/Framework for Vue.

Why Vuesax?

  1. Modular: Vuesax is very modular. You can use the whole library or just the parts/components you need for your app
  2. Customization: Vuesax is highly customizable, you can customize the theme, animation behavior, and a lot of other variables too. You can also update the Theme variables during the runtime of your application(great for adding dark mode feature)
  3. Flexibility: Vuesax is very flexible, you can use it in your Vue CDN Setup.
  4. Server-Side Rendering: One of the main advantages of Vuesax is that it supports server-side rendering which enables very fast, pre-rendered applications.

Installing and Integrating Vuesax

You can install Vuesax in your Vue application using one simple command

npm i vuesax

Then in your main.js file, import and use it

import Vuesax from "vuesax"
import "vuesax/dist/vuesax.css"


Voila! Now you're ready to take full advantage of Vuesax.

While we're at it let's also install Material Icons since it works well with Vuesax

npm i material-icons

In main.js

import "material-icons/iconfont/material-icons.css"

Component Structure

Vuesax components are prefixed with vs-. Similar to how Vue uses the prefix to indicate Vue-specific directives, this is how Vuesax indicates that these components are part of its library.

Let's create a template for our component:

  <vs-row vs-justify="center">
      <vs-card actionable>
        <div slot="header">
        <div class="centerx">
          <vs-row vs-justify="center">
        <div slot="footer">
          <vs-row vs-justify="flex-end">
            <vs-button size="large" type="gradient" color="primary">

As you can see the Vuesax components have vs prefix. Now let's take a look at components we have used here:

  • <vs-row> is a grid row component, vs-justify="center" means it will arrange columns centred
  • <vs-col> is grid column component
  • <vs-card> vuesax component is used to build our card
  • <vs-input> is component for building input fields, is supports all basic attributes and events of a regular input field. You can directly bind this component with a data field.
  • <vs-button> is vuesax component for building buttons.

You also need to add data fields for your component


data() {
  return {
    username: "",
    password: ""


You can now start your development server and see the preview in your browser

npm run serve

Here's a CodeSandbox Demo for you to tinker:

Customizing the Theme

To write JSDoc for our component we'll use a theme(plugin) called better-docs.

You can customize the theme variables while adding the Vuesax to the application.

Vue.use(Vuesax, {
  theme: {
    colors: {
      primary: "#5b3cc4",
      success: "rgb(23, 201, 100)",
      danger: "rgb(242, 19, 93)",
      warning: "rgb(255, 130, 0)",
      dark: "rgb(36, 33, 69)",

and of course you can update them during the execution of your app

  primary: "rgb(5, 173, 88)", // my new color

You can check out more in details on How to customize Vuesax Theme

I hope this blog helped you learn more about Vuesax, an all-new component library for Vue. I would highly recommend you to check out the documentation and examples. You can also check out its official repository for contribution and raising issues. If vuesax doesn't suit your needs you can also check out some of the alternatives:

Demo: CodeSandbox Demo

Website: lusaxweb.github



Contact us to work on Vue.JS development needs.

- Jitendra Nirnejak

Need help with VueJS? Schedule a Free Consultation with our Experts.
Learn More

Related Services.

Hire ReactJS Developers
Hire Gatsby Developers
Hire NextJS Developers

We support the Open Source community.

Have a Project in mind?