default theme 404 error message customization

[tassoman]

It's possible to customize the 404 error message, without writing a custom theme?

For example by having just a configuration, also compatible with i18n

themeConfig: {
  404: {
    title: 'Page not found',
    message: [
      "But if you don't change your direction, and if you keep looking, you may end up where you are heading.",
      "Another random message",
    ],
    action: 'Take me home',
    link: '/',
  },
},

[brc-dd]

not-found slot? https://vitepress.dev/guide/extending-default-theme#layout-slots

[tassoman]

I was inspired by this Vuepress configuration.

Extending not-found slot means to write a component into a custom theme, I can understand well?

[brc-dd]

Yeah, you'll just have to write a component and add 3-4 lines to extend the default theme and add that component to slot, and then you'll get it on the 404 page.

[tassoman]

I managed to write the Layout extender, who reads mini-templates from MyLayout extension.

when I edit the not-found template, do I overwrite this component? NotFound.vue

[brc-dd]

when I edit the not-found template, do I overwrite this component? NotFound.vue

yeah

[tassoman]

While for the hooks *-before and *-after the extension is pretty straightforward, overriding the whole template it's overwhelmed complicated because needs to bring the whole parts of a Vue component. Maybe the component override procedure is more suitable.

Now I have overwritten but I can't figure how I could i18n the whole thing ... I just expected something easier or pluggable like a configuration.

[tassoman]

@brc-dd I'm sorry I return on this question.

Is there a way to simply override {{ theme.notFound.* }} variables, as seen here 👀
Maybe in themeConfig ?

vitepress/src/client/theme-default/NotFound.vue

Line 25 in 7a3b2d5

<p class="code">{{ theme.notFound?.code ?? '404' }}</p>

[brc-dd]

Yeah, those weren't added at that time. On rc versions you do that:

// .vitepress/config.ts

export default defineConfig({
  themeConfig: {
    notFound: {
      title: 'PAGE NOT FOUND',
      quote: "But if you don't change your direction, and if you keep looking, you may end up where you are heading.", // set to '' to hide
      linkLabel: 'go to home', // aria-label
      linkText: 'Take me home',
      code: '404'
    }
  }
})

You can customize them per locale too if you're using i18n:

import { defineConfig } from 'vitepress'

export default defineConfig({
  // shared properties and other top-level stuff...

  locales: {
    root: {
      label: 'English',
      lang: 'en',

      themeConfig: { notFound: { ... } }
    },
    fr: {
      label: 'French',
      lang: 'fr',

      themeConfig: { notFound: { ... } }
    }
  }
})

[tassoman]

cool, thanks!