[Vuejs]-Change layout according to wordpress page template NuxtJs

by

0👍

I found a way to pass something from middleware to store which you can use inside the layout function. Here is the basic example I put together.

middleware/get-layout.js I simulate an async call here, could also be result of axios.post() for example

export default async (ctx) => {
    return new Promise((resolve, reject) => {
        // you can also access ctx.params here
        ctx.store.commit('setLayout', 'new');
        resolve();
    });
}

store/index.js nothing crazy here

export const state = () => ({
    layout: ''
})

export const mutations = {
    setLayout(state, layout) {
        state.layout = layout;
    }
}

Middleware can either be registered globally for every route in nuxt.config.js or only for pages where you need this logic.

Finally using it in page component layout property:

layout(ctx) {
  return ctx.store.state.layout;
}

I tested it with new.vue inside layout folder.

Leave a comment