PrimeVue Select Ajax

Advanced PrimeVue AutoComplete component with ajax/async data fetching, infinite scroll, and debounce support.

Features

• ✅ Ajax/Async data fetching with custom fetch function
• ✅ Infinite scroll with pagination
• ✅ Debounce support for search
• ✅ Loading states and spinner
• ✅ Full slot support
• ✅ TypeScript support
• ✅ Fully customizable

Installation

npm install primevue-select-ajax

Prerequisites

This component requires:

• Vue 3.3+
• PrimeVue 3.50+ or 4.0+

Usage

Basic Example

<template>
  <PrimeVueSelectAjax v-model="selectedItem" :fetchFunction="fetchUsers" optionLabel="name" placeholder="Search users..." />
</template>

<script setup>
import { ref } from "vue";
import PrimeVueSelectAjax from "primevue-select-ajax";

const selectedItem = ref(null);

const fetchUsers = async (params) => {
  const response = await fetch(`/api/users?${new URLSearchParams(params)}`);
  const data = await response.json();

  return {
    data: data.users,
    current_page: data.page,
    to: data.to,
    total: data.total,
  };
};
</script>

With Authentication

<script setup>
const fetchUsers = async (params) => {
  const response = await fetch(`/api/users?${new URLSearchParams(params)}`, {
    headers: {
      Authorization: `Bearer ${token.value}`,
    },
  });
  return await response.json();
};
</script>

With Axios

<script setup>
import axios from "axios";

const fetchUsers = async (params) => {
  const response = await axios.get("/api/users", { params });
  return response.data;
};
</script>

Nuxt 3 Example

<script setup>
const token = useCookie("token");
const config = useRuntimeConfig();

const fetchUsers = async (params) => {
  const response = await $fetch("/api/users", {
    baseURL: config.public.apiBase,
    headers: {
      Authorization: `Bearer ${token.value}`,
    },
    params,
  });
  return response.data;
};
</script>

Props

| Prop | Type | Default | Description | | ------------- | -------------------- | ------------ | ------------------------------ | | modelValue | Object/String/Number | null | Selected value | | optionLabel | String | required | Property name to display | | placeholder | String | '' | Input placeholder | | invalid | Boolean | false | Invalid state | | classes | String | 'w-full' | Additional CSS classes | | fetchFunction | Function | required | Async function to fetch data | | searchKey | String | 'search' | Query parameter key for search | | debounceTime | Number | 300 | Debounce time in ms | | disabled | Boolean | false | Disable component | | perPage | Number | 30 | Items per page |

Events

| Event | Payload | Description | | ----------------- | ------- | ------------------------------ | | update:modelValue | value | Emitted when selection changes | | error | error | Emitted when fetch fails |

Fetch Function Response Format

Your fetch function should return data in this format:

{
  data: [...],           // Array of items
  current_page: 1,       // Current page number
  to: 30,               // Last item index on current page
  total: 100            // Total number of items
}

Slots

All PrimeVue AutoComplete slots are supported:

<PrimeVueSelectAjax v-model="selected" :fetchFunction="fetchData" optionLabel="name">
  <template #option="slotProps">
    <div class="flex items-center gap-2">
      <img :src="slotProps.option.avatar" class="w-8 h-8 rounded-full" />
      <span>{{ slotProps.option.name }}</span>
    </div>
  </template>
</PrimeVueSelectAjax>

Advanced Examples

With Error Handling

<template>
  <div>
    <PrimeVueSelectAjax v-model="selectedItem" :fetchFunction="fetchUsers" optionLabel="name" @error="handleError" />
    <Message v-if="error" severity="error">{{ error }}</Message>
  </div>
</template>

<script setup>
import { ref } from "vue";
import PrimeVueSelectAjax from "primevue-select-ajax";

const selectedItem = ref(null);
const error = ref(null);

const fetchUsers = async (params) => {
  const response = await fetch(`/api/users?${new URLSearchParams(params)}`);
  if (!response.ok) throw new Error("Failed to fetch users");
  return await response.json();
};

const handleError = (err) => {
  error.value = err.message;
  console.error("Fetch error:", err);
};
</script>

Custom Debounce Time

<PrimeVueSelectAjax v-model="selectedItem" :fetchFunction="fetchUsers" optionLabel="name" :debounceTime="500" />

Custom Search Key

<PrimeVueSelectAjax v-model="selectedItem" :fetchFunction="fetchUsers" optionLabel="name" searchKey="query" />

License

MIT