Yes. @qnot/vue and @qnot/core are MIT licensed. There is no license key, no trial banner and no per-developer pricing, which sets it apart from the commercial Vue query builders.

Which Vue versions are supported?

Vue 3.5 and later. The components are written with h(), so the package needs no SFC compiler and works in any Vue 3 build setup.

Does it work with Nuxt?

Yes. The default builder renders to HTML with Vue's server renderer (we checked it with renderToString), and node ids are sequential per store, so server and client agree. If you only need it in the browser, wrap it in . Server routes can import the same fields.ts to validate the query and turn it into SQL.

Does it support v-model?

Yes. QueryBuilder emits update:modelValue and change, so v-model works. You can also pass a store you created with useQueryStore and share it with provideQueryStore.

Can I build my own UI instead of the default one?

Yes. The composables (useRule, useGroup, useNode, useQuery, useHistory and the drag helpers) return shallowRefs and computeds fed by per-node subscriptions. Pass components to replace single pieces of the default builder, or write your own from scratch.

How does it compare with Syncfusion or DevExtreme?

Both are commercial suites with Vue wrappers, many more components and paid support. qnot is one free library focused on the query builder, with typed values and more export formats. In our benchmark its framework-free build renders 1,000 rules faster than the JavaScript builds of both; the Vue binding uses the same store but was not measured on its own.

Vue query builder

An open-source query builder for Vue 3. v-model in, typed query out, with undo, drag and drop, validation and export to SQL, MongoDB and JsonLogic.

Vue guide

MIT · Vue 3.5+ · v-model · TypeScript

@qnot/vue, default builder, live on this page. Edit a rule and watch the exports.

installpnpm add @qnot/core @qnot/vue

A Vue query builder in two files.

The fields you can query, and the component that edits them. It's the code behind the demo above, minus the export tabs.

fields.ts

import { defineFields, f, type QueryOf } from '@qnot/core';

export const fields = defineFields({
  name: f.text(),
  age: f.number({ min: 0, max: 120, integer: true }),
  plan: f.enum(['free', 'pro', 'team', 'enterprise']),
  tags: f.multiEnum(['vip', 'beta', 'churn-risk', 'partner']),
  verified: f.boolean(),
  signedUp: f.date({ label: 'Signed up' }),
});

export const initial: QueryOf<typeof fields> = {
  kind: 'group',
  combinator: 'and',
  children: [
    { kind: 'rule', field: 'age', operator: 'gte', value: 21 },
    { kind: 'rule', field: 'plan', operator: 'in', value: ['pro', 'team'] },
    {
      kind: 'group',
      combinator: 'or',
      children: [
        { kind: 'rule', field: 'tags', operator: 'hasAny', value: ['vip'] },
        { kind: 'rule', field: 'signedUp', operator: 'gt', value: '2025-01-01' },
      ],
    },
  ],
};

Filters.vue

<script setup lang="ts">
import '@qnot/core/styles.css';
import { encode } from '@qnot/core';
import { sqlFormat } from '@qnot/core/formats/sql';
import { QueryBuilder } from '@qnot/vue';
import { computed, shallowRef } from 'vue';
import { fields, initial } from './fields';

const pg = sqlFormat({ dialect: 'postgres', params: 'numbered' });

const query = shallowRef(initial);
// { sql: 'age >= $1 AND plan IN ($2, $3) AND …', params: [21, 'pro', 'team', …] }
const where = computed(() => encode(pg, query.value, fields));
</script>

<template>
  <QueryBuilder :fields="fields" v-model="query" show-lock />
  <pre>{{ where.sql }}</pre>
</template>

For more control, create the store with useQueryStore and share it with provideQueryStore. The composables mirror the React hooks: useRule(id), useGroup(id), useQuery(), useHistory(), useIsValid(). They return shallowRefs fed by the store's per-node subscriptions rather than deep reactivity, so editing one rule updates only that rule's component.

The default builder takes components and labels to swap pieces and strings. See the Vue guide.

What you get.

Everything below works in every binding, because it lives in the store, not the components.

How it compares.

Search for a Vue query builder and you mostly find commercial suites. They are complete and well supported, but you pay per developer. Below, their JavaScript builds against qnot's framework-free build on the same 1,000-rule tree. The Vue binding has its own numbers.

Questions people ask

Is it free?: Yes. @qnot/vue and @qnot/core are MIT licensed. There is no license key, no trial banner and no per-developer pricing, which sets it apart from the commercial Vue query builders.
Which Vue versions are supported?: Vue 3.5 and later. The components are written with h(), so the package needs no SFC compiler and works in any Vue 3 build setup.
Does it work with Nuxt?: Yes. The default builder renders to HTML with Vue's server renderer (we checked it with renderToString), and node ids are sequential per store, so server and client agree. If you only need it in the browser, wrap it in <ClientOnly>. Server routes can import the same fields.ts to validate the query and turn it into SQL.Server usage
Does it support v-model?: Yes. QueryBuilder emits update:modelValue and change, so v-model works. You can also pass a store you created with useQueryStore and share it with provideQueryStore.
Can I build my own UI instead of the default one?: Yes. The composables (useRule, useGroup, useNode, useQuery, useHistory and the drag helpers) return shallowRefs and computeds fed by per-node subscriptions. Pass components to replace single pieces of the default builder, or write your own from scratch.Vue guide
How does it compare with Syncfusion or DevExtreme?: Both are commercial suites with Vue wrappers, many more components and paid support. qnot is one free library focused on the query builder, with typed values and more export formats. In our benchmark its framework-free build renders 1,000 rules faster than the JavaScript builds of both; the Vue binding uses the same store but was not measured on its own.vs Syncfusion vs DevExtreme