Gyen Abubakar Comments - Answer Overflow

Gyen Abubakar

•Created by Gyen Abubakar on 10/10/2024 in #❓・help

Disable root files being copied into `/_nuxt` path

Everything I import from ~/components yields this error because of this behaviour. And it is actually preventing the app from rendering.

2 replies

NNuxt

•Created by Gyen Abubakar on 9/3/2024 in #❓・help

NuxtErrorBoundary leaving a blank screen

UPDATE: Found a workaround; not sure how much of a bad practise this is 1. I rewrote the error boundary code:

<!--
  - showError() is a Nuxt function already available via auto-import.
  - Docs: https://nuxt.com/docs/getting-started/error-handling#showerror
-->
<NuxtErrorBoundary @error="showError">
  <slot />
</NuxtErrorBoundary>

<!--
  - showError() is a Nuxt function already available via auto-import.
  - Docs: https://nuxt.com/docs/getting-started/error-handling#showerror
-->
<NuxtErrorBoundary @error="showError">
  <slot />
</NuxtErrorBoundary>

2. I created a error.vue file beside app.vue:

<script setup lang="ts">
import type { NuxtError } from '#app';
import DashboardLayout from '~/layouts/dashboard.vue';
import AuthLayout from '~/layouts/auth.vue';
import DefaultLayout from '~/layouts/default.vue';
import { BonfoPageError } from '~/components/_bonfo';

const props = defineProps({
  error: Object as () => NuxtError,
});

console.dir(props.error);

const route = useRoute();

const Layout = computed(() => {
  switch (route.meta.layout) {
    case 'dashboard':
      return DashboardLayout;
    case 'auth':
      return AuthLayout;
    default:
      return DefaultLayout;
  }
});
</script>

<template>
  <Layout>
    <BonfoPageError
      title="Oops 😬, that was unexpected."
      description="An error occurred while trying to load this page. You can trust that we are working hard to fix it."
    />
  </Layout>
</template>

<script setup lang="ts">
import type { NuxtError } from '#app';
import DashboardLayout from '~/layouts/dashboard.vue';
import AuthLayout from '~/layouts/auth.vue';
import DefaultLayout from '~/layouts/default.vue';
import { BonfoPageError } from '~/components/_bonfo';

const props = defineProps({
  error: Object as () => NuxtError,
});

console.dir(props.error);

const route = useRoute();

const Layout = computed(() => {
  switch (route.meta.layout) {
    case 'dashboard':
      return DashboardLayout;
    case 'auth':
      return AuthLayout;
    default:
      return DefaultLayout;
  }
});
</script>

<template>
  <Layout>
    <BonfoPageError
      title="Oops 😬, that was unexpected."
      description="An error occurred while trying to load this page. You can trust that we are working hard to fix it."
    />
  </Layout>
</template>

This gives me the behaviour I want.

3 replies

NNuxt

•Created by Gyen Abubakar on 9/3/2024 in #❓・help

NuxtErrorBoundary leaving a blank screen

Obviously, I can fix the type error in the code by doing null checks, but this error made me think about using NuxtErrorBoundary to catch unexpected errors that I may not know about during development.

3 replies

NNuxt

•Created by Gyen Abubakar on 4/3/2024 in #❓・help

How do you set a PostCSS parser in the `nuxt.config.ts`?

Thanks @manniL / TheAlexLichter

5 replies

Gaming

Programming