Nuxt•8mo ago

add class to default root div __nuxt

Hi, I'm migrating a VUE 3 SSR project to Nuxt 3 and saw that Nuxt adds a rot div that we don't have direct access as we have on Vue as there's no index.html Looking at the docs I see that we can change the ID and tag name using rootId and rootTag This has to do with the fact that we have a class applied to that HTML element to put the footer on the bottom of the page when the content on the main "div" isn't enough to fill the page. Currently, I'm doing it on "jquery" way, but I don't think it's the best way to do it as I didn't see any other option I'm wondering if something like rootClass couldn't be added to prevent doing the way I had to do it I would say this would be very helpful @moderator thanks

13 Replies

harlan•8mo ago

Please avoid pinging the mods unless someone is breaking the rules

Victor NevesOP•8mo ago

sorry looks like I missed that rule, the idea was to have someone from the core team look into the suggestion Maybe I should had it on the repo :/

Cue•8mo ago

Is the class dynamic or something that you’re having to do this the “jQuery” way and not add a couple of lines of css properties to an id?

Victor NevesOP•8mo ago

@L422Y Thanks, but it's not on the body @cuebit it's not a dynamic class it's where we set out the "grid" display for managing all the layout Refactoring the CSS to use the ID can be a solution but, to be honest, I'm not a fan of using IDs for styling, and I believe there will be cases that will not be a solution But looks like I will need to refactor the CSS as doing on the jquery way there's a layout shift

harlan•8mo ago

you're trying to target <div id="__nuxt"> by the sounds of it?

Victor NevesOP•8mo ago

yes @harlan

onMounted(() => {
    const nuxtDiv = document.getElementById('__nuxt');

    if (nuxtDiv) {
        nuxtDiv.classList.add('base-wrapper');
    }
});

onMounted(() => {
    const nuxtDiv = document.getElementById('__nuxt');

    if (nuxtDiv) {
        nuxtDiv.classList.add('base-wrapper');
    }
});

manniL•8mo ago

As a note: this won't work for SSR. I wonder why a wrapper in app.vue wouldn't be enough here

Victor NevesOP•8mo ago

I know, that's the problem 😅 well, we have this class on the wrapper, on the vue project as we have the index.html file and it was where we have added that class Since on Nuxt, we don't have the index.html I cannot directly add the class Vue

<body ssr-bodyAttrs class="base-body">
    <div id="app" class="base-wrapper"><!--ssr-app-html--></div>
    <!--ssr-initial-state-->
    // rest of the code
</body>

<body ssr-bodyAttrs class="base-body">
    <div id="app" class="base-wrapper"><!--ssr-app-html--></div>
    <!--ssr-initial-state-->
    // rest of the code
</body>

now on Nuxt our app.vue is like this

<Html>
    <Body class="base-body">
        <NuxtLayout :name="layout">
            <main class="base-main">
                <NuxtPage></NuxtPage>
                <TheServiceSheet v-if="isNoSystemLogicView" />
            </main>
        </NuxtLayout>
    </Body>
</Html>

<Html>
    <Body class="base-body">
        <NuxtLayout :name="layout">
            <main class="base-main">
                <NuxtPage></NuxtPage>
                <TheServiceSheet v-if="isNoSystemLogicView" />
            </main>
        </NuxtLayout>
    </Body>
</Html>

Cue•8mo ago

The question that’s being asked here is what’s preventing you from adding base-wrapper around your layout?

Victor NevesOP•8mo ago

the base-wrapper is the div that wraps the markup

<head></head>
<main></main>
<footer><footer>

<head></head>
<main></main>
<footer><footer>

it's the one that sets the grid

display: grid;
grid-template:
    [header-start] 'header' auto [header-end]
    [main-start] 'main' 1fr [main-end]
    [footer-start] 'footer' auto [footer-end];

display: grid;
grid-template:
    [header-start] 'header' auto [header-end]
    [main-start] 'main' 1fr [main-end]
    [footer-start] 'footer' auto [footer-end];

Also, I don't like having unnecessary HTML elements on the DOM, just the strict ones required to generate the right layout (page, component, etc) Nevertheless, thank you all for the feedback And for now, I think I need to go with the option to refactor the CSS and set the base-wrapper as an ID and override the default __nuxt one using the rootId Besides this, I'll gonna try to create a PR to add a rootCssClass (or something similar) prop to the nuxt config it wouldn't work, as this needs to be on the div that wraps the head, main, and footer So it needs to be on the one that Nuxt adds, and renaming the class .base-wrapper to #base-wrapper is the option that requires less effort and less refactoring For sure I'm not the only one migrating projects from Vue or even from other technologies to Nuxt that have classes applied over there and if there's nothing that might create problems doing that I would say having this option on nuxt config would be helpful. Just need to see what steps I too follow to create a PR to submit this enhance

manniL•8mo ago

1 more DOM element shouldn't be a big deal. I'd go with a top-level element in app.vue ☺️ If you really want to overoptimize, you could even write a nitro plugin that changes the HTML and adapts it or just move .base-wrapper declarations to __nuxt

Cue•8mo ago

If the root id is the least arduous then you could just do that? Rename __nuxt to base-wrapper

Victor NevesOP•8mo ago

that's what I did 😅 sure, 1 more DOM element will not be a big deal, but the way we have it structured, in this case, impacts 😅 When we started the project we already did based on Nuxt folder structure as the idea was to use Nuxt, but it wasn't yet released (Nuxt 3), but we weren't expecting that we couldn't add a class name directly to the root element as we can when working with Vue. For sure, if we had noticed that, we would have made it differently but it wasn't the case But no problem, I already updated the CSS to have that class as an ID and I have overridden the default __nuxt by base-wrapper

Gaming

Programming

add class to default root div __nuxt