I have the following component where I am using PrimeVue Datatable and ConfimDialog
<template>
<Head title="Patients" />
<AppLayout>
<template #header>
<div class="p-2">
<div>
<span class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">Patients</span>
<span class="h-fit min-h-full flex justify-end" style="margin-top: -24px;">
<a href="/pateints/create">
<PrimaryButton class="ml-2 float-right" type="button">
<i class="pi pi-plus"></i>
Add Patient
</PrimaryButton>
</a>
</span>
</div>
</div>
</template>
<div class="py-2">
<ConfirmDialog></ConfirmDialog>
<Button icon="pi pi-check" label="Confirm"></Button>
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div v-if="$page.props.flash.notification" class="alert">
{{ $page.props.flash.notification }}
</div>
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
<div class="p-2 text-gray-900 dark:text-gray-100">
<div class="p-2">
<DataTable :value="$page['props']['patients']" responsiveLayout="scroll" :paginator="true"
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
:rows="10" dataKey="id" :rowsPerPageOptions="[10, 25, 50]"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries">
<Column field="name" header="Name" :sortable="true"></Column>
<Column field="gender" header="Gender" :sortable="true"></Column>
<Column field="contact_number" header="Contact Number" :sortable="true"></Column>
<Column field="email_id" header="Email" :sortable="true"></Column>
<Column field="city" header="City" :sortable="true"></Column>
<Column header="Actions">
<template #body="slotProps">
<span>
<a :href="'pateints/edit/' + slotProps.data.id">
<i class="pi pi-user-edit"></i>
</a>
<a href="/pateints/delete"><i class="pi pi-trash"></i></a>
</span>
</template>
</Column>
</DataTable>
</div>
</div>
</div>
</div>
</div>
</AppLayout>
</template>
<script>
import { Head, Link, useForm } from '@inertiajs/vue3';
import AppLayout from '@/Layouts/AppLayout.vue';
import DataTable from "primevue/datatable";
import Column from "primevue/column";
import PrimaryButton from '@/Components/PrimaryButton.vue';
import { ref, onMounted, defineComponent } from "vue";
import { useConfirm } from "primevue/useconfirm";
import ConfirmDialog from 'primevue/confirmdialog';
import Button from 'primevue/button';
export default {
methods: {
delete() {
this.$confirm.require({
message: 'Are you sure you want to proceed?',
header: 'Confirmation',
icon: 'pi pi-exclamation-triangle',
accept: () => {
//callback to execute when user confirms the action
},
reject: () => {
//callback to execute when user rejects the action
},
onShow: () => {
//callback to execute when dialog is shown
},
onHide: () => {
//callback to execute when dialog is hidden
}
});
},
}
}
</script>
Before adding the export default everything is working fine. But once I add the function, it is showing a blank page. It is showing the following warnings in the console.
runtime-core.esm-bundler.js:40 [Vue warn]: Failed to resolve component: Head
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
at <Index jetstream= {canCreateTeams: false, canManageTwoFactorAuthentication: true, canUpdatePassword: true, canUpdateProfileInformation: true, hasEmailVerification: true, …} auth= {user: null} errorBags= [] ... >
at <Inertia initialPage= {component: 'pateints::Index', props: {…}, url: '/pateints', version: '6666cd76f96956469e7be39d750cc7d9'} initialComponent= {__hmrId: 'c2a09695', __file: '/Resources/Pages/Index.vue', inheritAttrs: false, setup: ƒ, render: ƒ, …} resolveComponent=fn<r> ... >
at <App>
I am not sure what is wrong here. I have tried both options API and Composition API, but both gives the same result. I am new to Laravel inertia and Vue and so it will be helpful if someone can point out what I am missing here. It is same for all the components that I am using.
I hope this is still helpful 2 months later ...
I too was surprised when Webpack didn't catch the error, so the console did.
Looks to me like you need to register your components (including Head) in script like so:
export default {
// ...
components: {
Head,
Link,
// and so on ...
},
props: [
// ...
Use the "components" option in Options API, "script setup" or also "components" in plain "script" for Composition API. btw, this is a common Vue thing, not just with Inertia. vue.js Component Registration