vue-api-query

library1.11.0jsnpmunverified

Vue API Query (v1.11.0) provides an elegant way to build REST API requests in Vue/Nuxt applications by moving logic and backend requests to dedicated Model and Query classes. It is especially well-suited for Laravel backends using spatie/laravel-query-builder, as it mirrors its query syntax (e.g., filters, includes, sorts). The package ships TypeScript definitions, supports ESM and CJS, and has a stable release cadence. Unlike alternative packages that enforce JSON API specification, Vue API Query works with any REST API and offers a simple, builder-like interface. It is ideal for projects that need a structured, type-safe way to manage API calls.

devops

npm install vue-api-query

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE-API-QUERY

vue-api-query

devopsjavascriptv1.11.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Model

✓ import { Model } from 'vue-api-query'

✗ const VueApiQuery = require('vue-api-query'); const Model = VueApiQuery.Model

The package supports ESM and CommonJS; named imports are preferred for tree-shaking.

Query

✓ import { Query } from 'vue-api-query'

✗ import VueApiQuery from 'vue-api-query'; const Query = VueApiQuery.Query

Query is a named export; default import is the whole module object.

default

✓ import VueApiQuery from 'vue-api-query'

✗ var VueApiQuery = require('vue-api-query').default

Default export is an object containing Model, Query, and install method. Use named imports for individual classes.

Shows creating a Model class, configuring axios, and performing common CRUD operations with query building (filters, includes, pagination).

// 1. Install and configure axios base URL import axios from 'axios'; axios.defaults.baseURL = process.env.API_URL ?? 'http://localhost/api'; // 2. Create a Model // models/User.ts import { Model } from 'vue-api-query'; export default class User extends Model { resource() { return 'users'; } } // 3. Use the model to query // In a Vue component import User from '@/models/User'; async function fetchUsers() { const users = await User.query() .with('posts') .where('active', true) .orderBy('created_at') .page(1) .limit(15) .get(); console.log(users); } // 4. Create a single user const newUser = new User({ name: 'John', email: 'john@example.com' }); await newUser.save(); // 5. Update existing user const user = await User.find(1); user.name = 'Jane'; await user.save(); // 6. Delete user await user.delete();

Debug

Known issues

breakingv1.x changed the way resources are defined: resource() was previously a static method returning a string. Now it's an instance method.

fix

Change static resource() to instance method: resource() { return 'users'; } instead of static resource().

affects: >=1.0.0 <2.0.0

gotchaQuery builder methods (where, orderBy, page) are chainable but return a new Query instance; if you cache a query object, chaining later will modify the original.

fix

Avoid reusing query objects: always call Model.query() each time you need a fresh query.

affects: >=1.0.0

gotchaModel instances must have a primary key property (by default 'id') for update/delete operations. If your API uses a different key, you must override the primaryKey property.

fix

In your model class, add get primaryKey() { return 'uuid'; } or similar.

affects: >=1.0.0

deprecatedUsing axios directly with Model instances (e.g., calling $http) is deprecated in favor of the built-in Query builder.

fix

Replace custom axios calls with Model.query() methods.

affects: >=1.9.0

Errors

Common errors & fixes

Cannot find module 'vue-api-query'

Missing or incorrect import path, or package not installed.

fix

Run npm install vue-api-query (or yarn add) and ensure the import path is correct: import { Model } from 'vue-api-query'.

Model is not a constructor

Using default import instead of named import for Model.

fix

Use import { Model } from 'vue-api-query' instead of import VueApiQuery from 'vue-api-query'.

Cannot read property 'get' of undefined

Calling .get() on an object that is not a Query instance, possibly because Model.query() returned undefined due to misconfiguration.

fix

Ensure you have called Model.query() correctly and that axios is configured with baseURL. Verify that the resource() method returns a valid endpoint.

Upgrade

Version history

1.11.0latest on npm

Audit

Dependencies

axiosrequiredUsed as the default HTTP client for performing API requests.

vueoptionalRequired as a peer dependency for Vue plugin installation and component integration (e.g., use in composition API).

Agent activity

9 hits · last 30 days

node

Amazon

Resources

githubhttps://github.com/robsontenorio/vue-api-query ↗

packagevue-api-query ↗

homepagehttps://github.com/robsontenorio/vue-api-query#readme ↗