flsion
commented
2 years ago Hi, we will add support for SSR in subsequent versions
Closed sewalsh closed 2 years ago
flsion
commented
2 years ago Hi, we will add support for SSR in subsequent versions
cdwmhcc
commented
2 years ago 有什么进度吗？
flsion
commented
2 years ago Will be completed before the end of Dec
calebeaires
commented
2 years ago I made it work with that:
nuxt.config.js
import { defineNuxtConfig } from "nuxt3";
export default defineNuxtConfig({
build: {
transpile: ["compute-scroll-into-view"],
},
});
Install arco-design on plugin folder /plugins/arco-design.ts
import { defineNuxtPlugin } from "#app";
import ArcoVue from "@arco-design/web-vue";
import "@arco-design/web-vue/dist/arco.css";
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(ArcoVue);
});
testing a component
<template><a-empty /></template>
sewalsh
commented
2 years ago @calebeaires Alternatively you can use unplugin-vue-components instead of using a plugin and it'll automatically import the components you use.
package.json:
"devDependencies": {
"@arco-design/web-vue": "^2.13.0",
"less": "4.1.2",
"less-loader": "10.2.0",
"unplugin-icons": "^0.13.0",
"unplugin-vue-components": "^0.17.11"
}nuxt.config.ts:
import {defineNuxtConfig} from 'nuxt3'
import Components from 'unplugin-vue-components/vite'
import IconsResolver from 'unplugin-icons/resolver'
import {ArcoResolver} from "unplugin-vue-components/resolvers";
// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
css: [
'@arco-design/web-vue/lib/message/style/index.less',
],
build: {
transpile: ['compute-scroll-into-view'],
},
vite: {
// example of overwriting arco-design .less vars
css: {
preprocessorOptions: {
less: {
modifyVars: {
'arcoblue-6': 'black',
'@menu-horizontal-padding-vertical': '0px',
'@menu-horizontal-padding-horizontal': '0px',
'@tooltip-border-radius': '5px',
'@tooltip-mini-padding-vertical': '1px',
'@tooltip-mini-padding-horizontal': '5px',
'@menu-vertical-padding-vertical': '0px',
'@menu-vertical-padding-horizontal': '0px',
'@menu-collapse-padding-vertical': '0px',
'@menu-collapse-padding-horizontal': '0px',
'@menu-item-indent-spacing': '0px',
'@menu-font-weight-item-selected': '700',
'@btn-font-weight': '500',
'@btn-border-radius': '5px'
},
javascriptEnabled: true,
},
},
},
plugins: [
Components({
dts: true, // enabled by default if `typescript` is installed
resolvers: [IconsResolver({
// to avoid naming conflicts
// a prefix can be specified for icons
prefix: 'i'
}),
ArcoResolver({
importStyle: 'less',
resolveIcons: true
}
)],
}),
],
},
})I have found that a component such as Message that isn't explicitly included in a template must be manually imported in your script and you must also include its less file in nuxt.config.ts
You do have to wrap your components with <ClientOnly> and there are problems if you use the Arco Icons on production builds.
Nuxt CLI v3.0.0-27356801.e9128f3 21:00:45
ℹ Node.js version: 17.3.0 21:00:45
ℹ Preset: server 21:00:45
ℹ Working dir: .output 21:00:45
ℹ Starting preview command: node ./server/index.mjs 21:00:45
21:00:45
Listening on http://localhost:3000
Directory import '/Users/xxxx/Dev/UI/.output/server/node_modules/@arco-design/web-vue/es/icon' is not supported resolving ES modules imported from /Users/xxxx/Dev/UI/.output/server/chunks/app/server.mjs
Did you mean to import @arco-design/web-vue/es/icon/index.js?
at new NodeError (node:internal/errors:371:5)
at finalizeResolution (node:internal/modules/esm/resolve:390:17)
at moduleResolve (node:internal/modules/esm/resolve:915:10)
at defaultResolve (node:internal/modules/esm/resolve:1005:11)
at ESMLoader.resolve (node:internal/modules/esm/loader:530:30)
at ESMLoader.getModuleJob (node:internal/modules/esm/loader:251:18)
at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:79:40)
at link (node:internal/modules/esm/module_job:78:36)Thanks @sewalsh!
I did use your solution, it works and it is good, but when using Grid (a-row) or any other component that calls window, an error shows up: window is not defined.
Hope you team help us get Arco Design into Nuxt 3 very soon 😉 Congrats.
waset
commented
2 years ago Thanks @sewalsh @calebeaires, but an error is reported when bulid.
maopixin
commented
2 years ago Although it can be used，But some components do not fit well，Some components with transition components report crazy errors during hot update。
I know it's early but are there plans for making this compatible with Nuxt 3?