NUXT how to pass data from page to layout NUXT how to pass data from page to layout vue.js vue.js

NUXT how to pass data from page to layout


One option is to use vuex for that.

First go into the store folder in your nuxt project and create a index.js file

export const state = () => ({   layout: 'Your default value',})    export const mutations = {  CHANGE_NAV_LAYOUT(state, layout) {    state.layout = layout;  }}

Then inside any page/component you can call this.$store.commit('CHANGE_NAV_LAYOUT',value)

For your navbar component you create a computed property and refer it to the store layout value:

computed: {     navLayout() {         return this.$store.state.layout;     }}


You should use $emit from parent element, so the parent element to the page is layout page. Here is sample:

this.$parent.$emit("eventName");

Then listen action at layout on the Nuxt component.

<Nuxt @eventname="actionHandler()"/> 

And here it is)