I have two Nuxt.js layouts, default.vue and secondary.vue. There's the same footer.vue ponent that is being used in both of these layouts. I'd like to change some CSS classes inside of the footer.vue ponent based upon which layout the ponent is being used in. How Does one know what layout is being used from within a ponent nested in Nuxt.js layout?

I have two Nuxt.js layouts, default.vue and secondary.vue. There's the same footer.vue ponent that is being used in both of these layouts. I'd like to change some CSS classes inside of the footer.vue ponent based upon which layout the ponent is being used in. How Does one know what layout is being used from within a ponent nested in Nuxt.js layout?

• javascript
• vue.js
• vuejs2
• nuxt.js

• You could pass down a type property or something depending on what ponent is using footer. So in default.vue when you render footer.vue give it a prop type called 'default'. Same with secondary.vue. And then in footer.vue check prop type and change css there. – Isaac Vidrine Commented Jun 6, 2019 at 15:37
• @IsaacVidrine I tried something like that with vuex. However, how do you create a lifestyle hook when a layout is loaded? mounted() and created() do not work in layouts. – user782860 Commented Jun 6, 2019 at 15:40
• The lifecycle methods belong in the logic of the ponent, so of course you can't use them in the layout. That should be irrelevant though. Just pass down a property to footer.vue ? – Isaac Vidrine Commented Jun 6, 2019 at 15:42

1 Answer 1

You can use the following:

this.$nuxt.$data.layoutName

Which will return the name of the layout file used.