I struggle at the moment with the following error:
runtime-core.esm-bundler.js:41 [
Vue warn]: Failed to resolve component: i:pgfRef
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
at <ApplicationLogo class="block h-9 w-auto fill-current text-gray-800 dark:text-gray-200" >
at <Link href="http://127.0.0.1:8000/dashboard" >
at <AuthenticatedLayout>
at <Dashboard errors= {} ziggy= {url: 'http://127.0.0.1:8000', port: 8000, defaults: Array(0), routes: {…}, location: 'http://127.0.0.1:8000/dashboard'} auth= {user: {…}} ... >
at <Inertia initialPage= {component: 'Dashboard', props: {…}, url: '/dashboard', version: '5dd4e6adde169e0e13de6c61cb4b5165'} initialComponent= {__name: 'Dashboard', __hmrId: '8e8f4dea', __file: '/Users/soeren/Desktop/dg-app/resources/js/Pages/Dashboard.vue', setup: ƒ, render: ƒ, …} resolveComponent=fn<r> ... >
at <App>
I have googled it but have not been able to fix the error yet. Unfortunately, I also do not know how it occurred. Does anyone of you have an idea what I can try?
App.js
import './bootstrap';
import '../css/app.css';
import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';
const appName = window.document.getElementsByTagName('title')[0]?.innerText || '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(ZiggyVue, Ziggy)
.mount(el);
},
progress: {
color: '#4B5563',
},
});
vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import ViteComponents from 'vite-plugin-components'
export default defineConfig({
plugins: [
laravel({
input: 'resources/js/app.js',
refresh: true,
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
ViteComponents()
],
});
I undid the last steps in the code, but this did not help.
Dashboard.vue
<script setup>
import SearchGoods from '@/Components/SearchGoods.vue';
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
import { Head } from '@inertiajs/vue3';
</script>
<template>
<Head title="Dashboard" />
<AuthenticatedLayout>
<div class="pt-8">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div
class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg"
>
<div class="p-6 text-gray-900 dark:text-gray-100">
You're logged in!
</div>
</div>
</div>
</div>
<div class="p-6">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div
class="overflow-hidden shadow-sm sm:rounded-lg"
>
<div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
<SearchGoods class="min-w-full"></SearchGoods>
</div>
</div>
</div>
</div>
</AuthenticatedLayout>
</template>
SearchGoods.vue
<script setup>
import { ref, onMounted, watchEffect } from 'vue';
import MeiliSearch from 'meilisearch';
const query = ref("");
const client = ref(null);
const results = ref(null);
const selectedHitIndex = ref(0);
onMounted(() => {
client.value = new MeiliSearch({ host: 'http://localhost:7700' });
});
const search = async (query) => {
if (query) {
results.value = await client.value.index('numbers').search(query);
console.log(results.value);
}
}
watchEffect(() => {
search(query.value);
})
</script>
<template>
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div
class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg"
>
<div class="p-6 text-gray-900 dark:text-gray-100">
<h1>Search</h1>
<form action="#" method="get">
<input
class="block w-full border-none rounded"
placeholder="Search..."
type="search"
v-model="query"
/>
<button class="mt-2 p-2 rounded bg-black text-white">
Search
</button>
</form>
</div>
</div>
</div>
</template>
