How to make Primevue work with Laravel Jetstream and Inertia?

Question

I'm working with Inertia and Jetsteam and I'd like to add Primevue in order to use datatables, but I'm getting no render elements after installation and setting up, I'll share my current files and a screenshot

app.js file

import './bootstrap';
import '../css/app.css';

import 'primevue/resources/themes/saga-blue/theme.css'; 
import 'primevue/resources/primevue.min.css'; 
import 'primeicons/primeicons.css';

import { createApp, h } from 'vue';
import PrimeVue from 'primevue/config';
import { createInertiaApp } from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';


const appName = import.meta.env.VITE_APP_NAME || 'Laravel';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, App, props, plugin }) {
        return createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(PrimeVue)
            .use(ZiggyVue)
            .mount(el);
    },
    progress: {
        color: '#4B5563',
    },
});

vite.conf.js file

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/js/app.js'],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

vue file

<script setup>
import { Head, Link } from '@inertiajs/vue3';
import AppLayout2 from '@/Layouts/AppLayout2.vue';

import Button  from "primevue/button"

defineProps({});
</script>

<template>
    <AppLayout2 title="Dashboard">
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                Crud
            </h2>
        </template>

        <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                    <button label="Submit" />
                </div>
            </div>
        </div>
    </AppLayout2>
</template>

... and here is the result, if I use the elements inspector I can see the element in the tree components but it doesnt render in the browser.

Another thing, I'm not sure if it is possible to use primevue with jetstream, I don't know if there is a conflict with the styles or something like that, I don't know if you also have to configure tailwind, thanks in advance.

Answer 1

Try following the steps if you're unable to fix the above issue.

1. Please refer below documentation on the official site.

   https://tailwind.primevue.org/datatable/

2. You can add the default tailwind CSS preset like lara or wind

   https://tailwind.primevue.org/overview/#preset

3. Add the following lines inside the content array in the tailwind.config.js

   ......
   './resources/**/*.{vue,js,ts,jsx,tsx}',
   './resources/*/.{vue,js,ts,jsx,tsx}',