Can't set middleware

[ndarilek]

I have the following in layout/default.vue:

<script>
export default {
  middleware: "connected"
}
</script>

connected is a middleware that checks a store state property and redirects if it is null. If I change to:

<script lang="ts">
import Component from "nuxt-class-component"
import Vue from "vue"

@Component({
  middleware: ["connected"]
})
export default class extends Vue {
}

</script>

Am I doing something wrong, or is this a bug in nuxt-class-component? It doesn't seem to matter whether middleware is a string or array.

Thanks.

_{This question is available on Nuxt.js community (#c1)}

[AndrewBogdanovTSS]

What are you getting in the console? What version of Nuxt are you using? What is the file extension of the middleware, ts or js ?

[moritzsternemann]

Same problem for me. I'm using Nuxt 1.3.0 and I tried both ts and js for my middleware files. There is no console output related to this.

[ndarilek]

Same, except my project was with an earlier Nuxt, and I haven't worked with it since. Sounds like the issue still exists with something more recent, though.

[moritzsternemann]

I found out that the middlware directive works fine when using it in page components instead of layout components.

[ndarilek]

Me too, but why can't it be used on the layout level? Further, why does it seem to work on the layout level as a normal property vs. as a decorator?

[AndrewBogdanovTSS]

Looks like a bug in nuxt-class-component

[jberry93]

Took me a while to find the answer on Stack Overflow but it seems like we need to add the property to Vue's ComponentOptions interface since middleware "is not a standard Vue property" (Citing the SO answer). Adding a .d.ts file to the root of your project and including the code from SO should allow you to apply middleware. Here's my index.d.ts to save you a click:

import Vue, {ComponentOptions} from 'vue';

declare module '*.vue' {
    import Vue from 'vue';
    const _default: Vue;
    export default _default;
}

/* Cite: https://stackoverflow.com/a/49090772 */
declare module 'vue/types/options' {
    interface ComponentOptions<V extends Vue> {
        middleware?: string | string[];
    }
}

and here's a snippet of a page component I'm using the middleware property on for clarity:

// inside script tag with lang="ts"

@Component({
    components: {...},
    middleware: ['auth']
})
export default class extends Vue {...}

There might be a better answer (if you have one, please add it) but adding a property to Vue's ComponentOptions interface does not seem to have any adverse effects (that I know of) other than making the interface more compliant to Nuxt. Hope this helps!

[AndrewBogdanovTSS]

@jberry93 thanks for the provided solution, but isn't that what Nuxt class component should do in the first place? If it was created to augment Vue class component with Nuxt related functionality - I think the module is the best place to have code like you provided. Maybe you could make a PR to the nuxt-class-component module?

[jberry93]

@AndrewBogdanovTSS No problem! Yep the nuxt-class-component should support this. I took a look at the other PRs to see if someone already added it in and I see this PR: #14 does add it in. I asked to update it since it does not include middleware as an array of strings for applying more than one middleware to a page. Hope the devs working on Nuxt (or whoever is in charge of the Nuxt Community) notices that PR and this issue

[AndrewBogdanovTSS]

cc: @breakingrobot @Atinux

[husayt]

I strongly recommend using nuxt-property-decorator which has all this functionality and more