Vue Nuxt Auth enable auth middleware per route using Class Components

Question

How can I enable auth middleware per route using Class Components?

What is the equivalent for this:

<script>
  export default {
    middleware: 'auth'
  }
</script>

This doesn't work:

<script>
  import { Vue, Component } from 'nuxt-property-decorator'

  @Component
  export default class Profile extends Vue {
    middleware = 'auth'
  }
</script>

Answer 1

You need to add it as a param in the Component decorator.

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator';

@Component({
  middleware: ['auth']
})
export default class Profile extends Vue {
  name = 'some data'
}
</script>

What you did initially will only create a data property. To add component specific option aside from Vue options like data computed methods and hooks you have to pass it as a param in the @Component decorator

Read more about it here