Question

141

NUXT how to pass data from page to layout

rated 0 times [ 143] [ 2] / answers: 1 / hits: 18882 / 4 Years ago, thu, june 25, 2020, 12:00:00

I am creating a very simple website. I want to change the Navbar elements depending on data set in navLayout on the page template. I want to pass the data to the layout, then use props to send it to the NavBar. My issue is how to emit data from the page to the layout.

layouts/default.vue

<template>

  <div>

    <NavBar />

    <div class="site-container">

      <nuxt />

    </div>

    <Footer />

  </div>

</template>

<script>

import NavBar from '~/components/NavBar.vue'



export default {

  components: {

    NavBar,

  }

}

</script>

pages/index.vue

...

<script>

export default {



  data: () => {

    return {

      navLayout: 'simple'

    }

  },

  computed: () => {

    return {

    this.$emit('navLayout', value)

    }



  }

...

</script>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

braydon

Add To Favorites

Follow

Total Points: 0

Total Questions: 102

Total Answers: 111

Location: Sao Tome and Principe

Member since Wed, Dec 29, 2021

2 Years ago

answered 4 Years ago kaitlynnb · Accepted Answer

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;

     }

}