Home

If a page has fetch method which invokes redirect immediately (e.g. rejecting users without required permissions), that page is still rendered internally for no reason. This happens in nuxt@1.0.0-rc11.

This is however not happening if the same logic is moved to the middleware. It requires a developer to create separate single-use middleware even for ad-hoc page-specific logic.

Experiment 1

Create pages/test.vue:

<template>
  <div>
    This will crash: {{ noSuchVar }}
  </div>
</template>

<script>
export default {
  fetch ({ redirect }) {
    return redirect('/')
  },
}
</script>

Result: opening http://localhost:3000/test immediately redirects to http://localhost:3000 but the following is printed to stderr:

[Vue warn]: Property or method "noSuchVar" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in
 the data option.

found in

---> <Client/pages/test.vue> at client/pages/test.vue
       <Nuxt> at .nuxt/components/nuxt.vue
         <Default> at client/layouts/default.vue
           <Root>

Experiment 2

Create pages/test2.vue:

<template>
  <div>
    This will not crash: {{ noSuchVar }}
  </div>
</template>

<script>
export default {
  middleware: 'test',
}
</script>

and middleware/test.vue:

export default function ({ redirect }) {
  return redirect('/')
}

Result: opening http://localhost:3000/test immediately redirects to http://localhost:3000 and no errors are produced.

Expected result

The two experiments behave identically (no errors are produced in either case).