How to introduce naive-ui ? #682
-
|
I tried to introduce naive-ui in my vuepress with its default theme. It worked only when hot-updated, namely My relevant codes are : markdown <ClientOnly>
<CustomComponent/>
</ClientOnly>vue component (registered in <template>
<ClientOnly>
<n-button>button</n-button>
</ClientOnly>
</template>
<script lang="ts" setup>
import {NButton} from "naive-ui";
</script>my Is this a bug or does it require any additional steps ? |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 6 replies
-
|
naive-ui may not support ssr rendering. There is one thing you should know: ClientOnly only render client on client side, so if the component calls client only variables in setup functions, (e.g.: But, when the component or the library itself are referencing those variables in code direct (probably context or outside component and functions), those variables will be accessed while parsing and loading that module. Also, the component is not allowed to access dom unless in Since I did not use native ui before, you should be better sure that it's ssr friendly, otherwise, you must take actions to make a workaround. Also make sure you are not affected by #585 |
Beta Was this translation helpful? Give feedback.
-
|
Then you may be affected by #585. |
Beta Was this translation helpful? Give feedback.
-
|
Possiable solution, try webpack and see if it works, if so use webpack before #585 is fixed. |
Beta Was this translation helpful? Give feedback.
-
|
meteorlxy is busy these days, also I don't have time digging this issue, so this issue leaves for 2 month. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you very much 👍🏻 . In order to use vite happily, I'd better wait until these issues are fixed . |
Beta Was this translation helpful? Give feedback.
-
|
It has a workaround with #585 now, just noticing you that. |
Beta Was this translation helpful? Give feedback.
naive-ui may not support ssr rendering.
There is one thing you should know: ClientOnly only render client on client side, so if the component calls client only variables in setup functions, (e.g.:
window,docuement), it will still work.But, when the component or the library itself are referencing those variables in code direct (probably context or outside component and functions), those variables will be accessed while parsing and loading that module. Also, the component is not allowed to access dom unless in
onMountedlifecycle.Since I did not use native ui before, you should be better sure that it's ssr friendly, otherwise, you must take actions to make a workaround.
Also make sure yo…