Nuxtjs Support #636
Comments
Nuxt support is put in official docs now |
|
据我所知，Nuxtjs目前是基于vue2的，而vue3驱动的Nuxt3还在开发中，所以，同样基于vue3的naive-ui很难支持当下的Nuxtjs。 As I know, Nuxtjs is based on vue2, and the Nuxt3 powered with vue3 still in heavy development. So, navie-ui that is also based on vue3 is hard to surpport Nuxtjs now. |
我不熟 NUXT，不过估计主要的难点在于 css-in-js 导致的 SSR 问题，其他没啥道理不 work。 |
|
https://v3.nuxtjs.org/ is in beta now |
|
If someone has tried it, please tell us what errors you met. Actually I've never used nuxt and don't know what's required to make it work. |
I did the default installation steps for nuxt (https://v3.nuxtjs.org/getting-started/installation) and for naive-ui (https://www.naiveui.com/en-US/os- theme/docs/installation) and I'm getting the error "Server Side Rendering Error: Error: Unexpected token 'export'", follow StackBlitz link to help debug https://stackblitz.com/edit/github-ovqtjv?devtoolsheight= 33&file=app.vue. thanks |
|
That's quite wired since we do provide a cjs build version in |
|
I'm interested in getting involved in the job, but I'm new if I can get advice on where to start. |
Just try to make a button rendered in nuxt. The most possible barrier could be |
|
i use nuxtjs v3.0 integrate naive-ui, it looks work. nuxt.config.ts import {defineNuxtConfig} from 'nuxt3'
export default defineNuxtConfig({
alias: {},
modules: [],
build: {
transpile: ['naive-ui', 'seemly', 'css-render', 'emotion', 'vooks', 'evtd', 'date-fns'],
},
extensions: [],
app: {
basePath: '/',
assetsPath: '/assets',
cdnURL: null
},
srcDir: 'src',
ssr: true,
privateRuntimeConfig: {},
publicRuntimeConfig: {}
})plugins import naive from "naive-ui";
export default defineNuxtPlugin((nuxt) => {
nuxt.app.use(naive)
}) |
|
There's some errors in ssr so it may fallback to CSR. |
|
@07akioni it means naive-ui or nuxtjs issue? |
Need to do something to make SSR in nuxt work. |
|
To use import { defineNuxtConfig } from 'nuxt3'
export default defineNuxtConfig({
vite: false
})Dev and build works with this. |
|
@wobsoriano it's not a good suggestion. |
"temporarily"
This is also my workaround for nuxt3-supabase https://github.com/wobsoriano/nuxt3-supabase#getting-started |
this is right. nuxt3 replace global with globalThis , but also replace it in path what be uesed import argument. this is nuxt3's matter. |
like this , will can not treeshake |
Yep, until nuxt3 fixes it, gonna have to use that workaround |
确实，主要问题就是这个。nuxt3 的文档缺了很多还，不过很多接口与 nuxt2 类似。主要问题就是需要找个时机讲收集到的样式注入模板，我现在倾向于在渲染后响应客户端之前，对要用来响应的 html 进行注入。或者看下有没有机会渲染前在模板上做手脚。 还有一个目前影响不是很大的问题，就是在 GlobalStyle 模块中，document 的调用没有验证环境，服务端渲染阶段可能会抛出异常。虽然有异常，但是不影响整体运行，我就没去看源码，盲猜是个异步执行，加个验证我觉的会好一点。 [Vue warn]: Unhandled error during execution of setup function
at <GlobalStyle>
Server Side Rendering Error: ReferenceError: document is not defined
at setup (D:\projects\private\mcswift.me\node_modules\naive-ui\lib\global-style\src\GlobalStyle.js:12:26)
at callWithErrorHandling (D:\projects\private\mcswift.me\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:6599:22)
at setupStatefulComponent (D:\projects\private\mcswift.me\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:6225:29)
at setupComponent (D:\projects\private\mcswift.me\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:6181:11)
at renderComponentVNode (D:\projects\private\mcswift.me\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:198:17)
at renderVNode (D:\projects\private\mcswift.me\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:304:22)
at renderVNodeChildren (D:\projects\private\mcswift.me\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:319:9)
at renderVNode (D:\projects\private\mcswift.me\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:296:13)
at renderVNodeChildren (D:\projects\private\mcswift.me\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:319:9)
at renderElementVNode (D:\projects\private\mcswift.me\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:370:17) |
|
I've make it work for nuxt 3 now.
import { defineNuxtConfig } from 'nuxt3'
export default defineNuxtConfig({
vite: false
})
import { setup } from "@css-render/vue3-ssr";
import { defineNuxtPlugin } from "#app";
// I'm not sure whether the plugin is called twice in each refreshing
// Maybe it's expected. If you have more information about it, please comment in the issue
export default defineNuxtPlugin((nuxtApp) => {
const { collect } = setup(nuxtApp.app);
nuxtApp.ssrContext!.renderMeta = () => {
return {
headTags: collect(),
};
};
});Then it should work.
|
|
pls note after latest changes (3.0.0-27244261.c49f9ca) |
|
build works, but when starting the bundled app it does not seem to work, errors & warnings server-side, frontend is not styled: |
I'm not sure what happens. However I think those shouldn't happen. Maybe the token isn't injected to the app. |
|
@07akioni 这个怎么破？ |
哪个？这个 issue 里面提供了一个能 work 的方式，虽然看起来不是很完美 |
Also there is a good news that I've thought of a way to get rid of inline css var style (with some perf regression which is not that important), but it would take a not short time to implement it. It would be provided as a new prop in config provider. |
|
出错的位置在这里。貌似跟Hydration有关。 |
有没有可能给 Vue 提个 bug？这种问题估摸着我们很难处理 |
|
Could you provide a demo? According to your configuration, I have not succeeded |
Could you provide a demo? According to your configuration, I have not succeeded |
Though I am not using nuxt I faced a similar issue in my set up and my PR on |
I'll change all $slots usage in naive later. |
|
参考自antdv和element，在nuxt.config.ts引入 import { defineNuxtConfig } from 'nuxt3'
import Components from 'unplugin-vue-components/vite';
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers';
// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
vite: {
plugins: [
Components({
resolvers: [NaiveUiResolver()], // naive-ui组件全自动按需引入
}),
],
// @ts-expect-error: Missing ssr key
ssr: {
noExternal: ['moment', 'compute-scroll-into-view', 'naive-ui'],
},
}
})已搭配css-render，最终样式和组件功能都正常，样式在生成文件的head里。 |
这写写法存在问题，ssr 没样式，大家还是尽量参考置顶的写法 |
|
|
Nuxt 3 is now in RC1. |
@07akioni 我用 vite 默认创建的 vue 模板就会遇到这个问题（ bug 在 @css-render\vue3-ssr\src\index.ts 第 18 行： if (ssrContext === null) {
console.error('[css-render/vue3-ssr]: no ssr context found.')
return
}这里应该判断是否为 undefined，参考 我没有找到 vue3-ssr 的官方源码仓库，而这个库是 naive-ui 直接引入的 |
|
nuxt3 useMessage 第二次图标丢失问题 依然存在 |
With nuxt@3.0.0-rc.1 this doesn't seem to work anymore due to a unplugin-vue-components error: I saw the commit that fixes SSR icons not loading the second time... but now I can't run naive anymore, did anyone manage to find a fix or way to make it work? 🙏 |
My setup was previously working, but now I receive the same error as above on Nuxt import {
create,
NAlert,
...
NUploadDragger,
} from 'naive-ui'
import { setup } from '@css-render/vue3-ssr'
export default defineNuxtPlugin((nuxtApp) => {
if (process.server) {
const { collect } = setup(nuxtApp.vueApp)
nuxtApp.ssrContext!.renderMeta = () => {
return {
headTags: collect(),
}
}
}
nuxtApp.vueApp.use(
create({
components: [
NAlert,
...
NUploadDragger,
],
})
)
}) |
|
Yes there's a bit confusion as to how Naive UI is installed on Nuxt 3. I'm hoping an official guide will be added to the docs. I myself am experiencing errors when using useMessage from a composable. |
|
Yep officials docs |
I have fixed naive-ui with nuxt@3.0.0-rc.1. see nuxt3-naive-ui-starter |
在使用 nuxt@3.0.0-rc3 中配置了会提示这个 在 |
|
在最新的 import { defineNuxtConfig } from "nuxt";
import Components from "unplugin-vue-components/vite";
import { NaiveUiResolver } from "unplugin-vue-components/resolvers";
// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
vite: {
plugins: [
Components({
resolvers: [NaiveUiResolver()],
}),
],
},
ssr: false,
});
import {setup} from "@css-render/vue3-ssr";
export default defineNuxtPlugin((nuxtApp) => {
if (process.server) {
const {collect} = setup(nuxtApp.vueApp);
nuxtApp.ssrContext!.renderMeta = () => {
return {
headTags: collect(),
};
};
}
}); |
|
I've tried to install NaiveUI@2.30.0 with Nuxt@3.0.0-rc3 following the documentation, but whenever I open the browser, after few seconds it freezes out. I can't click, select text or scroll. All I can do is to close it. |
Try this, demo repo is updated
|
The dependency (Node js supports mix usage so there's no server side error) |
I was getting this error in production SSR, and had to add |
Nuxt is not stable now, it may introduce in new rc version. Hope it can be stable soon. |
Now it is, but sadly neither the documentation nor demo website works. :( |
|
在nuxt3中n-grid的x-gap，y-gap和cols属性用到ResponsiveDescription类型后，页面刷新会出现不生效的情况，页面宽度变化或者切换页面后恢复正常。代码如下
测试发现，页面刷新后style中gap属性消失。
|
and others
This function solves the problem (这个功能解决的问题)
Nuxtjs Support
Expected API (期望的 API)
Nuxtjs Support
The text was updated successfully, but these errors were encountered: