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"

Vue.use(Vuesax)

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:

<template>
  <vs-row vs-justify="center">
    <vs-col
      type="flex"
      vs-justify="center"
      vs-align="center"
      vs-lg="3"
      vs-sm="6"
    >
      <vs-card actionable>
        <div slot="header">
          <h3>Login</h3>
        </div>
        <div class="centerx">
          <vs-row vs-justify="center">
            <vs-input
              size="large"
              label-placeholder="Username"
              v-model="username"
              vs-w="12"
            />
            <vs-input
              size="large"
              label-placeholder="Password"
              v-model="password"
              type="password"
            />
          </vs-row>
        </div>
        <div slot="footer">
          <vs-row vs-justify="flex-end">
            <vs-button size="large" type="gradient" color="primary">
              Login
            </vs-button>
          </vs-row>
        </div>
      </vs-card>
    </vs-col>
  </vs-row>
</template>

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

this.$vs.theme({
  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:

• Vuetify
• Quasar
• Buefy

Demo: CodeSandbox Demo

Website: lusaxweb.github

Documentation

NPM

- Jitendra Nirnejak