@reviewskits/vue

📖 Quick Links

• Installation
• Setup
• Usage
  • Fetching Reviews
  • Infinite Scrolling
• Nuxt Support
• Full Documentation

✨ Features

• Vue 3 Optimized: Built with the Composition API in mind.
• Nuxt Friendly: Ready-to-use plugin for Nuxt 3 projects.
• Type-safe: Built with TypeScript for a better developer experience.
• Composable API: Simple and powerful composables for data fetching.

🚀 Installation

Install the package using your preferred package manager:

bun add @reviewskits/vue
# or
npm install @reviewskits/vue
# or
pnpm add @reviewskits/vue

🛠️ Setup

1. Initialize the Plugin

In your main entry file (e.g., main.ts):

import { createApp } from 'vue'
import { createReviewsKit } from '@reviewskits/vue'
import App from './App.vue'

const app = createApp(App)

// Initialize Reviewskits
app.use(createReviewsKit({
  pk: 'pk_your_public_key',
  host: 'https://api.reviewskits.com',
  cache: true // Enabled by default
}))

app.mount('#app')

2. Nuxt 3 Support

For Nuxt 3, create a plugin in plugins/reviewskits.ts:

import { createReviewsKit } from '@reviewskits/vue'

export default defineNuxtPlugin((nuxtApp) => {
  const config = useRuntimeConfig()
  
  nuxtApp.vueApp.use(createReviewsKit({
    pk: config.public.reviewsKitPk,
    host: 'https://api.reviewskits.com'
  }))
})

💻 Usage

Fetching Reviews

Use the useReviews composable for standard pagination:

<script setup>
import { useReviews } from '@reviewskits/vue'

const { data, isLoading, error } = useReviews({
  formId: 'your_form_id',
  limit: 10
})
</script>

<template>
  <div v-if="isLoading">Loading...</div>
  <div v-else-if="error">Error: {{ error.message }}</div>
  <div v-else>
    <div v-for="review in data.reviews" :key="review.id">
      <h3>{{ review.author.name }}</h3>
      <p>{{ review.content }}</p>
      <span>Rating: {{ review.rating }}/5</span>
    </div>
  </div>
</template>

Infinite Scrolling

Use useInfiniteReviews for "Load More" patterns:

<script setup>
import { useInfiniteReviews } from '@reviewskits/vue'

const { data, fetchNextPage, hasNextPage, isLoading } = useInfiniteReviews({ 
  formId: 'your_form_id',
  limit: 5 
})
</script>

<template>
  <div v-if="isLoading">Loading...</div>
  <div v-else>
    <div v-for="page in data?.pages" :key="page.meta.page">
      <div v-for="review in page.reviews" :key="review.id">
        <!-- Review content -->
      </div>
    </div>
    
    <button v-if="hasNextPage" @click="fetchNextPage">Load More</button>
  </div>
</template>

💡 Best Practices

Reactive Parameters

Always pass reactive objects (like ref or reactive) to our composables. This allows the SDK to automatically track changes and refresh data efficiently.

<script setup>
const params = reactive({ limit: 10 });
const { data } = useReviews(params);

// Changing this will automatically trigger a new fetch
// and cancel any pending stale requests.
const updateLimit = () => params.limit = 20;
</script>

Request Cancellation

The SDK internally manages AbortController. If you switch filters rapidly, the SDK will automatically cancel previous pending requests, ensuring your UI stays in sync with the latest selection without race conditions.

📄 Documentation

For detailed API reference and advanced guides, please visit our Full Documentation.

⚖️ License

MIT © ReviewsKits