Unable to render the table component in the vue frontend

[toxifiedmatrix]

This package seems to do wonders, but I am unable to render the page as soon as I import the component. I am on Laravel 8, Inertia JS and Vue 3. Please help me if incase I am doing it incorrectly. Thank you for your time.

Here is the console error which is getting thrown.

Uncaught (in promise) TypeError: this.$once is not a function
at Proxy.mounted (app.js:66560)
at callWithErrorHandling (app.js:24930)
at callWithAsyncErrorHandling (app.js:24939)
at Array.hook.__weh.hook.__weh (app.js:26707)
at flushPostFlushCbs (app.js:25128)
at flushJobs (app.js:25164)

Here is my index method in the controller through which I am rendering the component.

public function index()
{
    $users = QueryBuilder::for(User::class)
        ->allowedFields(['id', 'name', 'email', 'role_id', 'created_at'])
        ->allowedSorts(['id', 'name', 'email', 'role_id', 'created_at'])
        ->allowedFilters(['name', 'email', 'role_id'])
        ->paginate()
        ->withQueryString();

    return Inertia::render('Backend/Management/AudienceManagement/Users/Data', [
        'users' => $users
    ])->table(function (InertiaTable $table) {
        $table->addSearchRows([
            'name' => 'Name',
            'email' => 'Email Address'
        ])->addFilter('role_id', 'Role', [
            '1' => 'Administrator',
            '2' => 'Employee',
            '3' => 'Client',
        ])->addColumns([
            'id' => 'ID',
            'name' => 'Name',
            'email' => 'Email',
            'role_id' => 'Role',
            'created_at' => 'Date',
        ])->disableGlobalSearch();
    });
}

Here is the table component imported in the frontend.

<Table :filters="queryBuilderProps.filters" :search="queryBuilderProps.search" :columns="queryBuilderProps.columns" :on-update="setQueryBuilder" :meta="users">
    <template #head>
        <tr>
            <th @click.prevent="sortBy('id')">ID</th>
            <th @click.prevent="sortBy('name')">Name</th>
            <th v-show="showColumn('email')" @click.prevent="sortBy('email')">Email</th>
            <th v-show="showColumn('role_id')" @click.prevent="sortBy('role_id')">Role</th>
            <th v-show="showColumn('created_at')" @click.prevent="sortBy('created_at')">Date</th>
        </tr>
    </template>

    <template #body>
        <tr v-for="user in users.data" :key="user.id">
            <td>{{ user.id }}</td>
            <td>{{ user.name }}</td>
            <th v-show="showColumn('email')">{{ user.email }}</th>
            <th v-show="showColumn('role_id')">{{ user.role_id }}</th>
            <th v-show="showColumn('created_at')">{{ user.created_at }}</th>
        </tr>
    </template>
</Table>

<script>
    import BreezeAuthenticatedLayout from '@/Layouts/Authenticated';
    import {
        InteractsWithQueryBuilder,
        Tailwind2
    } from '@protonemedia/inertiajs-tables-laravel-query-builder';

    export default {
        mixins: [InteractsWithQueryBuilder],

        components: {
            Table: Tailwind2.Table,
            BreezeAuthenticatedLayout
        },

        props: {
            users: Object
        }
    }
</script>

[pascalbaljet]

Thanks for trying the package! Currently it's only compatible with Vue 2.6, but I'm looking into Vue 3 as we speak :)

[toxifiedmatrix]

@pascalbaljet Yes please, because this package is a life savior. Till when are you planning to make the next release?

[pascalbaljet]

I've added support for Vue 3 in v1.1.0 :)

[muhammedfayaz]

is it avaible in v3.2.3?