How to tell what layout is being used within a Nuxt.js component?

Question

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

Answer 1

You can use the following:

this.$nuxt.$data.layoutName

Which will return the name of the layout file used.