1

I have a page, served with Nuxt SSR. It has a header with position:fixed and content that will have a padding-top that equals the header's height:

.content {
    padding-top: var(--header-height);
}

Before I switched to using SSR I simply set the custom CSS var in the onMounted hook of the header component. This would come too late now, since the content will already be rendered before the Vue app mounts (SSR).

Is there an elegant way to set the custom CSS variable --header-height (i.e. on the <html> tag) before the page content is rendered? Could I somehow do the following?

  1. Retrieve the header height server-side
  2. Inject a script to the document's head that sets the variable on the <html> element, using the value from 1.
Improve this question
Related questions
0
Vue SSR server-side rendering with vite | block page rendering until data arrived
5
How to prevent hydration of Nuxt when using SSR?
0
Retrieve an oidc access token from Nuxt 3 app
Load 2 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.