Vanguard-client NPM

Vanguard

vanguard-client, or simply Vanguard, is the Vue 3 client library for the Vanguard Laravel project using InertiaJS. It provides a set of composables to interface with the Vanguard API.

Installation

To install using NPM:

npm i vanguard-client

It requires any version of Vue 3+, and uses the stable release of InertiaJS 1.0.0. The queryString is a fluent way to interface with search params, and ensures consistency from the server to client.

Composables

useTable

useTable provides the direct interface to the Vanguard Table class, the core functionality of the package. A Table class should be passed to the Inertia rendered page as a property. The composable will then transform it into a reactive object that can be used in the template.

import { useTable } from 'vanguard-client'

defineProps({
    users: Object
})

const usersTable = useTable('users')

The composable requires a first argument, being the name of the property passed from the server. The optional second argument is the properties to search for the key in - this is used to extend the search if the props are nested in an object. The third argument is an optional options parameter to modify the behaviour of the querying composables.

import { useTable } from 'vanguard-client'

const props = defineProps({
    users: Object
})

const usersTable = useTable('users', props, { watch: false })

This will prevent the table from refreshing automatically if a filter or sort is modified, enforcing manual control. The table has the followed properties and methods available:

Attribute	Type	Description
`recordKey`	`string`	The key to use as the record identifier
`cols`	`Array`	The non-hidden columns to be used as table headings
`rows`	`Array`	The rows to be displayed in the table
`meta`	`Object`	The meta data for the rows, dependent on the selected pagination type
`actions`	`Object`	The actions associated with this table
`params`	`Object`	The search query parameters for the table
`sorts`	`Array`	The sorts for the table
`filters`	`Array`	The filters for the table
`update`	`Function`	Perform a manual update of the table using search parameters
`getFilter`	`Function`	Get the filter value by name
`getSort`	`Function`	Get the sort value by name
`reset`	`Function`	Reset the query params
`currentSorts`	`Function`	Get an array of currently active sorts
`currentFilters`	`Function`	Get an array of currently active filters