Livewire, React & Vue.

Pro interfaces#

Every Pro license includes all three interface families. Choose the one that matches the consuming application; there is no interface add-on or separate purchase.

The Livewire demo, React demo, and Vue demo read and write the same Laravel records. The UI runtime changes; validation, identity, permissions, throttling, moderation, and storage remain server-side.

The same REVIEW_RATEABLE_PRO_THEME value applies to all three. Livewire selects a complete Tailwind or Bootstrap Blade template set. React and Vue use framework-neutral markup and receive the theme key from the context API, then the published shared stylesheet applies its matching Tailwind-like or Bootstrap-like preset. The JavaScript components therefore do not require Tailwind or Bootstrap themselves. Custom JavaScript themes can override CSS beneath .rrp-client[data-rrp-theme="custom"].

Livewire setup#

Livewire is an optional Composer dependency. Install it only when using the Blade components:

composer require livewire/livewire

Set up Tailwind (the default) or Bootstrap CSS using the customization instructions. The complete Livewire templates work directly from Pro without publishing. If you want to edit their Blade markup, publish only the theme you use:

php artisan vendor:publish --tag=review-rateable-pro-tailwind-views
# Or, for Bootstrap:
php artisan vendor:publish --tag=review-rateable-pro-bootstrap-views

The published files live under resources/views/vendor/review-rateable-pro/themes/. See Styles & publishable views for theme selection, CSS setup, and override details. With the selected framework's CSS and Livewire assets installed in your layout, render the two main components:

<livewire:review-rateable-pro-review-form
    :reviewable="$product"
    :key="'review-form-'.$product->getKey()" />

<livewire:review-rateable-pro-review-list
    :reviewable="$product"
    :key="'review-list-'.$product->getKey()" />

For another department, pass department="support" to both. The model must use the core trait and be saved. Do not load a second Alpine instance alongside Livewire.

The form includes configured star criteria, recommendation, validation, loading states, and submission throttling. The list includes approved-review summaries, sorting, filters, and pagination. By default, authors may see their own pending reviews; other visitors cannot.

React setup#

Enable the API with a safe alias for each reviewable model. Do not accept a PHP class name from the browser:

'api' => [
    'enabled' => true,
    'prefix' => 'review-rateable-pro/api/v1',
    'middleware' => ['web'],
    'reviewables' => [
        'products' => App\Models\Product::class,
    ],
    'author_name_attribute' => 'name',
],

Publish the React source and install React in the application:

php artisan vendor:publish --tag=review-rateable-pro-react
npm install react react-dom
npm install --save-dev @vitejs/plugin-react

Register react() from @vitejs/plugin-react in vite.config.js, alongside the application's Laravel Vite plugin.

Create a Vite entry such as resources/js/reviews-react.jsx:

import React from 'react';
import { createRoot } from 'react-dom/client';
import { createReviewRateableClient } from './vendor/review-rateable-pro/core/client.js';
import './vendor/review-rateable-pro/core/review-rateable.css';
import { ReviewRateable } from './vendor/review-rateable-pro/react/index.jsx';

const element = document.querySelector('[data-review-rateable]');
const client = createReviewRateableClient({
    contextUrl: element.dataset.contextUrl,
});

createRoot(element).render(<ReviewRateable client={client} />);

Mount it from Blade and include the entry in the application's Vite inputs:

<meta name="csrf-token" content="{{ csrf_token() }}">

<div data-review-rateable
     data-context-url="{{ route('review-rateable-pro.api.context', [
         'reviewable' => 'products',
         'reviewableId' => $product->getRouteKey(),
     ]) }}"></div>

@viteReactRefresh
@vite('resources/js/reviews-react.jsx')

Keep @viteReactRefresh before the React entry. It installs Vite's development refresh preamble; omitting it can leave the mount element empty while the browser reports that the React preamble was not detected. Production builds do not emit the refresh runtime.

React's renderReview prop replaces individual review cards without forking the form, query, or pagination behavior.

Vue setup#

Use the same API configuration shown above, publish the Vue source, and install Vue 3 plus its Vite plugin:

php artisan vendor:publish --tag=review-rateable-pro-vue
npm install vue
npm install --save-dev @vitejs/plugin-vue

Register vue() in vite.config.js, then create a Vite entry:

import { createApp } from 'vue';
import { createReviewRateableClient } from './vendor/review-rateable-pro/core/client.js';
import './vendor/review-rateable-pro/core/review-rateable.css';
import { ReviewRateable } from './vendor/review-rateable-pro/vue/index.js';

const element = document.querySelector('[data-review-rateable]');
const client = createReviewRateableClient({
    contextUrl: element.dataset.contextUrl,
});

createApp(ReviewRateable, { client }).mount(element);

Use the same Blade mount element as React. Vue exposes a scoped review slot for application-owned cards. For an existing Vue 2.7 application, install @vitejs/plugin-vue2 instead and mount with new Vue({ render: h => h(ReviewRateable, { props: { client } }) }). Vue 2.7 is end-of-life compatibility for migrations, not the recommended choice for a new application.

API security and customization#

The default web middleware makes the API same-origin, session-authenticated, and CSRF-protected. For a separate first-party SPA, replace it with the application's established Sanctum/API middleware and CORS policy. Configure view_ability and create_ability for private or purchase-gated models. In a tenant application, bind Codebyray\ReviewRateablePro\Contracts\ReviewableResolver to an implementation that establishes tenant context before resolving the mapped model.

The shared browser client exposes reviews, submit, update, addUpdate, setHelpful, report, reply, and moderate. Server-side Gates remain mandatory even when the application hides a button. The JSON resource intentionally excludes verification evidence and private content-filter records.

Published JavaScript becomes application-owned source under resources/js/vendor/review-rateable-pro. Re-publishing with --force overwrites changes. Keep customized components outside that directory or review and commit the diff before upgrading.

'images' => ['enabled' => true],

'form' => [
    'min_length' => 10,
    'max_length' => 5000,
    'submissions_per_minute' => 3,
    'one_review_per_user' => true,
],

'listing' => [
    'per_page' => 10,
    'show_own_pending' => true,
    'summary_rating_key' => 'overall',
],

Enable images only after installing Core's image migration. Pro uses core's storage limits and adds upload previews, ordering controls, thumbnails, and a full-review image dialog. Keep summary_rating_key valid for the selected department.