CODEWITHSUNDEEP
vue.jsnuxt.js
Jack Richard
Jack Richard

Reputation: 48

nuxtjs - two separate 404 pages

I'm developing a Nuxt app with two sections. Admin panel (pages are located inside the pages/admin/*) and the rest of the pages for normal users(located inside the root of pages directory). I'm using the following middleware to turn off SSR for whole "/admin/" URLs:

export default function(req, res, next) {
  const currentPaths = req.originalUrl
  if (currentPaths.includes('/admin/')) {
    res.spa = true
  }
  next()
}

As I have a 404 page in the Admin panel, normal users are also redirecting to this page when 404 happens. So, how can have a separate 404 page for normal users?

And the second question: Is the way I used to turn off SSR for admin pages OK? Can anyone suggest a better method?

Upvotes: 1

Views: 539

Answers (2)

Jack Richard
Jack Richard

Reputation: 48

So, to have separate error pages with the different layout we can have a conditional layout:

layout: (context) => context.route.path.indexOf('/admin/') > -1 ? 'default' : 'front/fullpage',

Upvotes: 0

garudamon
garudamon

Reputation: 197

error page for pages/admin and /pages can not be separated, but you can actually show the different error by adding condition to detect /admin/ path

<template>
  <div>
    <h3 v-if="error.statusCode === 404 && $nuxt.$route.path.indexOf('/admin/') > -1">Page not found in admin</h3>
    <h3 v-else>Page not found</h3>
  </div>
</template>

i don't have any experiences for the second question, but you can try to build first and see check the result (contain error or not) when you run on build mode. if you found any error you can try <client-only> component to wrap your admin layout

Upvotes: 2

Related Questions