Can't set middleware

ndarilek
40
ndarilek
commented 2 years ago

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.

0
AndrewBogdanovTSS
69
AndrewBogdanovTSS
commented a year ago

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 ?

0
moritzsternemann
0
moritzsternemann
commented a year ago

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.

0
ndarilek
40
ndarilek
commented a year ago

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.

0
moritzsternemann
0
moritzsternemann
commented a year ago

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

0
ndarilek
40
ndarilek
commented a year ago

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?

0
AndrewBogdanovTSS
69
AndrewBogdanovTSS
commented a year ago

Looks like a bug in nuxt-class-component

0
jberry93
0
jberry93
commented 10 months ago

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!

0
AndrewBogdanovTSS
69
AndrewBogdanovTSS
commented 10 months ago

@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?

0
jberry93
0
jberry93
commented 10 months ago

@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

0
AndrewBogdanovTSS
69
AndrewBogdanovTSS
commented 10 months ago
0
husayt
425
husayt
commented 4 months ago

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

0
Informations
Question โ€ข Unresolved
#c1 - Created 2 years ago