Adding a class or css to div id='__nuxt' the right way
Hi there. im using tailwind css and wanted to add some classes to the auto generated __nuxt div that wraps the application, is there a way to do this? if not what would be the best way to add regular css styling to this div? I didnt want to make a whole css file for one rule but i can if its the best way. thanks!
Solution:Jump to solution
had the same problem recently. In my case, since it was just a class, I used the option to give a new ID and refactored my CSS as it was "just" a small change
That's why I suggested in the repo to extend the nuxt config to also allow to set CSS classes
https://github.com/nuxt/nuxt/discussions/26609...
GitHub
Add the option to set css class to Nuxt root element at nuxt.config...
Hi all First of all, thank you for all your hard work in providing such a cool framework I'm currently working on a migration of a Vue 3 SSR project to Nuxt 3 When we started the project the id...
10 Replies
Why don't you just add the classes to your layout or app.vue
Those auto-generated divs are subject to change without notice, don't try and target internals
I have, but for my desired layout in this application having a random unstyled div is blocking my height settings.
i just want to set it to flex grow
have you tried setting it in public/index.html? that is the top div
@apply ftw @emerald
thats a great point! i usually try to avoid it since its a bit of an escape hatch but this might be a good use for it. thanks!
Solution
had the same problem recently. In my case, since it was just a class, I used the option to give a new ID and refactored my CSS as it was "just" a small change
That's why I suggested in the repo to extend the nuxt config to also allow to set CSS classes
https://github.com/nuxt/nuxt/discussions/26609
GitHub
Add the option to set css class to Nuxt root element at nuxt.config...
Hi all First of all, thank you for all your hard work in providing such a cool framework I'm currently working on a migration of a Vue 3 SSR project to Nuxt 3 When we started the project the id...
Thanks everyone. I’m actually moving over from 2 years of next.js to nuxt so I apologise for my lack of knowledge. In next the body tag is exposed and any classes/id are dynamically added to the DOM which has worked great for me.
In the end I went with the APPLY approach in a css file, I wasn’t planning to even have a global css file but I wanted to add some handy utilities like removing scrollbars etc so this has worked for me. I’ll update this post if I find a better way
You can also use the
bodyAttrs option of useHead or the <Body> component if you want to apply it to body 🙂Nuxt
SEO and Meta · Get Started with Nuxt
Improve your Nuxt app's SEO with powerful head config, composables and components.
Thanks! I’m already doing this and it works great, sorry I phrased my last message badly. It’s specifically the div with ID __nuxt that is automatically added. Ideally I would just add a class to it or remove it entirely to the body. In the issue Victor shared there is a change coming in an update coming that will resolve this. Also with the ability to hide or change the id value for privacy reasons