status states
TuxErrorPage
Full-page template for 404 / 500 / 403 / 503 scenarios. Status code in display type, editorial title + lede, recovery actions, optional support / status-page link block. Use as the
error.vue Nuxt route in consuming apps, or inline via the inline prop. 404 \u00b7 default
Not found
error
Page not found
The page you're looking for has moved, been retired, or never existed. The links below should get you back on track.
<tux-error-page code="404" />500 \u00b7 with support slot
Server error
error
Something went wrong on our end
An unexpected error stopped this page from loading. The team has been notified. Try again in a minute, or check the status page if it persists.
Need help? File a ticket at helpdesk.tti.tamu.edu or call (979) 317-2345 · incident #INC-029141.
<tux-error-page code="500">
<template #support>
Need help? File a ticket at
<a href="https://helpdesk.tti.tamu.edu" class="link-tti">helpdesk.tti.tamu.edu</a>
or call (979) 317-2345 · incident #INC-029141.
</template>
</tux-error-page>403 \u00b7 custom copy + actions
Override defaults
error
Restricted to TAMUS sponsors
This corridor study is gated to TxDOT · FHWA sponsors. Sign in with a sponsor account.
<tux-error-page
code="403"
title="Restricted to TAMUS sponsors"
lede="This corridor study is gated to TxDOT · FHWA sponsors. Sign in with a sponsor account."
:actions="[
{ label: 'Sign in as sponsor', to: '/sign-in?role=sponsor', intent: 'primary', icon: 'lucide:log-in' },
{ label: 'Public dashboards', to: '/dashboards', intent: 'ghost', icon: 'lucide:bar-chart-3' },
]"
/>notes
As a Nuxt error route
For app-level errors, drop into app/error.vue and forward the Nuxt error object's statusCode: <TuxErrorPage :code="String(error.statusCode)" />. Defaults are provided for 404 / 500 / 403 / 503; anything else falls back to a generic template.