https://github.com/rtucek/vue-query-builder

A Vue-Query-Builder
https://github.com/rtucek/vue-query-builder

drag-and-drop query-builder serialization themeable typescript vue vuex

Last synced: 8 months ago
JSON representation

A Vue-Query-Builder

• Host: GitHub
• URL: https://github.com/rtucek/vue-query-builder
• Owner: rtucek
• License: mit
• Created: 2019-06-03T23:34:53.000Z (over 6 years ago)
• Default Branch: main
• Last Pushed: 2024-06-12T18:52:40.000Z (over 1 year ago)
• Last Synced: 2025-03-29T03:04:11.322Z (8 months ago)
• Topics: drag-and-drop, query-builder, serialization, themeable, typescript, vue, vuex
• Language: TypeScript
• Homepage: https://rtucek.github.io/vue-query-builder/
• Size: 4.32 MB
• Stars: 103
• Watchers: 1
• Forks: 34
• Open Issues: 17
• Metadata Files:
  • Readme: README.md
  • Contributing: docs/contributing.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-vue - query-builder-vue - A Vue-Query-Builder ` 📝 20 days ago` (UI Components [🔝](#readme))
• awesome-vue - query-builder-vue - A query-builder library for building complex and nested queries with draggable re-ordering. (Components & Libraries / UI Components)

README

          
[![CI Testing](https://github.com/rtucek/vue-query-builder/actions/workflows/ci-testing.yml/badge.svg)](https://github.com/rtucek/vue-query-builder/actions/workflows/ci-testing.yml)

[![CI Build](https://github.com/rtucek/vue-query-builder/actions/workflows/ci-build.yml/badge.svg)](https://github.com/rtucek/vue-query-builder/actions/workflows/ci-build.yml)

[![Lint](https://github.com/rtucek/vue-query-builder/actions/workflows/lint.yml/badge.svg)](https://github.com/rtucek/vue-query-builder/actions/workflows/lint.yml)

[![npm version](https://img.shields.io/npm/v/query-builder-vue)](https://www.npmjs.com/package/query-builder-vue)

[![MIT LICENSE](https://img.shields.io/npm/l/query-builder-vue)](https://github.com/rtucek/vue-query-builder/blob/master/LICENSE)

# Vue Query Builder

A query-builder for Vue.

## Demos

Plenty of samples and use cases are covered in the

[documentation](https://rtucek.github.io/vue-query-builder/demos.html).

## Features

Key features:

- Re-ordering of rules and groups with drag'n'drop.

- Emphasizing groups with configurable colors.

- Control maximum depth of nested groups.

- Easy to customize with pure CSS and slots.

- Layout can be serialized and restored.

- Vuex compatible.

- TypeScript support.

## Installation

```bash

yarn add query-builder-vue

npm install query-builder-vue

```

Follow the docs for [minimum

configuration](https://rtucek.github.io/vue-query-builder/getting-started.html#usage).

## Contribution

[Contribution guidelines](https://rtucek.github.io/vue-query-builder/contributing.html) are located

in the documentation.