element-plus/element-plus-nuxt-starter

Can not use css

alanhzw opened this issue · 11 comments

the button's color is #ffffff

image

Hello Default Primary Success Info Warning Danger 中文

所有类型的button都是白色的

Same issue here.

element-plus still can not work well with nuxt3. And nuxt3 still being updated and have not yet been released stavle version.

Please just wait.

@YunYouJun, it is true, but may you give us a clue of what is missing so we can try to make some progress?

@calebeaires Sorry, I don't know why too.

Make it work using client only wrapper

<template>
  <main>
    <ClientOnly>
      <NuxtPage />
    </ClientOnly>
  </main>
</template>

I think the way Element-plus set ccs variables in the button html is not compatible with the "rendering server time"!

Make it work using client only wrapper

<template>
  <main>
    <ClientOnly>
      <NuxtPage />
    </ClientOnly>
  </main>
</template>

I think the way Element-plus set ccs variables in the button html is not compatible with the "rendering server time"!

Thanks for the feedback, I will investigate this

The reason for this problem is that the dynamically calculated style is not loaded in nuxt
abnormal (ssr)
image
normal (not ssr)
image

Specific code
image

+1 Same here since the first release of element-plus. Inline styles are not inject with SSR.
Client only is not a realiable solution.

Also to make it compatible with nuxt should be an option to render the button as a nuxt-link component.

Also to make it compatible with nuxt should be an option to render the button as a nuxt-link component.

This issue has been resolved, upgrade element-plus to the latest version