Vue 3 frontend utility

[RalfHei]

Hey Spatie community! 👋

I've created @veebisepad/vue-query-filters utility package to help manage filters in the frontend.

Basic example:

import { useFilters, createFilterFactory } from '@veebisepad/vue-query-filters';
import { router } from '@inertiajs/vue3';

// Create a factory that automatically formats keys for laravel-query-builder
const f = createFilterFactory({
  keyTransformer: key => `filter[${key}]`
});

// Define your filters
const filters = useFilters(
  {
    name: f.single(),         // → filter[name]=value
    categories: f.multiple(), // → filter[categories]=value1,value2
    price: f.range(),         // → filter[price]=min,max
  },
  {
    onApply: params => {
      router.visit(route('products.index', params));
    }
  }
);

// Use reactively in your templates
// <input v-model="filters.name">
// <button @click="filters.get()">Apply</button>
// or use watch() to trigger get() when filter value changes

As a long-time user of Spatie Query Builder, I created this package based on my experience integrating it with Vue applications.

This is the first package that i have published and I'd value your thoughts:

• Any suggestions on the API or developer experience?
• Feedback regarding the package is also welcome (best practices, etc)

Package: npm | GitHub