Discover SVAR Vue: Enhance Your Vue Apps with Powerful UI Components

Introducing SVAR Vue: A Robust Component Library for Vue Apps

For developers seeking to expedite their Vue 3 application development, the SVAR Vue library is here to assist. This open-source library offers a collection of well-crafted, TypeScript-ready components tailored for common application needs such as form controls, navigation elements, modals, and more.

What Sets SVAR Vue Apart?

SVAR Vue belongs to the SVAR UI suite, a series of open-source libraries designed specifically for modern JavaScript frameworks like Svelte, React, and now Vue. By focusing on a framework-first approach, SVAR Vue delivers a seamless experience without the need for wrappers or adapters.

Exploring SVAR Vue Packages

SVAR Vue Core

The SVAR Vue Core library lays the groundwork with over 30 essential UI components. These include buttons, checkboxes, datepickers, tabs, modals, and more, all optimized for data-driven interfaces. With built-in themes (light and dark), developers can easily customize their applications through CSS variables.

To install the SVAR Vue Core library:

npm install @svar-ui/vue-core
npm install @svar-ui/vue-menu

Example usage:

<script setup>
import { Button, Willow } from "@svar-ui/vue-core";
</script>

<template>
  <Willow>
    <Button>Click Me</Button>
  </Willow>
</template>

SVAR Vue Editor

Addressing the need for configurable edit forms, the SVAR Vue Editor component simplifies the creation of forms for structured data. It integrates smoothly with other SVAR Vue Core components and supports customizable layouts, validation, and save modes.

Installation:

npm install @svar-ui/vue-editor

Example setup:

<script setup>
import { Editor, Willow } from "@svar-ui/vue-editor";

const items = [
  { comp: "text", key: "name", label: "Name" },
  { comp: "textarea", key: "descr", label: "Description" },
  { comp: "checkbox", key: "admin", label: "Is Admin" }
];

const values = {
  name: "John Doe",
  descr: "Lorem ipsum dolor sit amet",
  admin: true
};
</script>

<template>
  <Willow>
    <Editor :items="items" :values="values" />
  </Willow>
</template>

SVAR Vue Filter

SVAR Vue Filter provides a range of components for varying levels of filtering complexity. From a compact FilterBar to a comprehensive FilterBuilder, it empowers developers to create intuitive filtering experiences.

Install the Filter library:

npm install @svar-ui/vue-filter

Future Components

SVAR Vue will continue to expand with upcoming components like Vue DataGrid, Vue Gantt Chart, and Vue File Manager. Stay informed by subscribing to the SVAR newsletter.

Conclusion

SVAR Vue is a significant addition to the Vue ecosystem, offering developers the tools needed to create interactive and efficient applications. Dive into the documentation and explore the demos to maximize your development potential. Happy coding!