Files
headless-2026-03/wp-content/themes/headless/app/pages/[...uri].vue

40 lines
931 B
Vue

<script setup lang="ts">
// Fetch node by URI and handle query errors
const { path: uri } = useRoute();
const { data: node, error } = await useAsyncGraphQLQuery(
"NodeByUri",
{ uri },
{
transform: ({ nodeByUri }) => nodeByUri,
},
);
// Handle errors and missing nodes
if (!node.value) {
console.error("NodeByUri query error:", error.value);
throw createError({
statusCode: 404,
message: `La page demandée est introuvable: ${uri}`,
fatal: true,
});
}
// Dynamically resolve component based on node type
const componentName = `Node${node.value.__typename}`;
if (!useNuxtApp().vueApp.component(componentName)) {
throw createError({
statusCode: 404,
message: `La page demandée ne peut pas être affichée correctement: ${componentName}`,
fatal: true,
});
}
</script>
<template>
<div id="page-node-from-uri">
<Component :is="componentName" :node="node" />
</div>
</template>