How to show full screen error page with throw createError()

//~/pages/blog/[slug].server.vue
<script setup lang="ts">
import type { RawBlogPost, BlogPost } from '~/types/posts';

const config = useRuntimeConfig();
const route = useRoute();
const { data: post, pending, error, refresh} = await useAsyncData('post',
    () => $fetch<RawBlogPost>(`/api/posts/${route.params.slug}`, { baseURL: config.public.apiBase }),
{
    transform: (rawPost: RawBlogPost): BlogPost => {
      const post = {
        ...rawPost,
        date: new Date(rawPost.date),
        last_updated: new Date(rawPost.last_updated),
      } 

      return post;
    },
} 
)

function formatMonthDayYear(date: Date): string {
  const options: Intl.DateTimeFormatOptions = {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  };

  return new Intl.DateTimeFormat('en-US', options).format(date);
}

if (!post.value) {
  throw createError({
    statusCode: 404,
    statusMessage: 'Post not found',
    fatal: true,
  });
}
if (error.value) {
  throw createError({
    statusCode: error.value.statusCode,
    statusMessage: error.value.statusMessage,
    fatal: true,
  })
}
</script>