javascript - How to tell what layout is being used within a Nuxt.js component? - Stack Overflow

admin管理员组

文章数量:1387462

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

Share Improve this question Follow asked Jun 6, 2019 at 15:34 user782860user782860 2,77955 gold badges2020 silver badges1616 bronze badges 3

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

You can use the following:

this.$nuxt.$data.layoutName

Which will return the name of the layout file used.

本文标签： javascriptHow to tell what layout is being used within a Nuxtjs componentStack Overflow