Nuxt 3 installation steps #5210
Replies: 26 comments 57 replies
-
|
how to install icon |
Beta Was this translation helpful? Give feedback.
-
Adding ant-design-vue and icons into NUXT 3 projects
npm i ant-design-vue @ant-design/icons-vue unplugin-vue-components --save
// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt'
import Components from 'unplugin-vue-components/vite';
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
export default defineNuxtConfig({
modules: ['./modules/antdv'],
vite: {
plugins: [
Components({
// add option {resolveIcons: true} as parameter for resolving problem with icons
resolvers: [AntDesignVueResolver({resolveIcons: true})],
}),
],
// @ts-expect-error: Missing ssr key
ssr: {
noExternal: ['moment', 'compute-scroll-into-view', 'ant-design-vue','@ant-design/icons-vue'],
},
},
})
|
Beta Was this translation helpful? Give feedback.
-
|
|
Beta Was this translation helpful? Give feedback.
-
|
icon need install https://www.antdv.com/components/icon-cn[https://www.antdv.com/components/icon-cn](url) |
Beta Was this translation helpful? Give feedback.
-
|
i got this working |
Beta Was this translation helpful? Give feedback.
-
|
ive created another repo with latest nuxt3 |
Beta Was this translation helpful? Give feedback.
-
|
Is that anyone using |
Beta Was this translation helpful? Give feedback.
-
|
this happend only inside pages folder so now I move all UI to component and call it to pages |
Beta Was this translation helpful? Give feedback.
-
|
ok ive update, my repo does work, but does not work entirely. |
Beta Was this translation helpful? Give feedback.
-
|
Above solutions with default icons wont work for me, import errors. Here is solution with MDI icons which work:
|
Beta Was this translation helpful? Give feedback.
-
|
here is my solution @wobsoriano import { defineNuxtConfig } from "nuxt"
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
vite: {
plugins: [
Components({
resolvers: [
AntDesignVueResolver({
importStyle: 'less'
}),
],
}),
],
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true
}
}
}
},
build: {
transpile: ['ant-design-vue', 'compute-scroll-into-view', 'moment']
},
modules: ['@nuxtjs/tailwindcss']
}) |
Beta Was this translation helpful? Give feedback.
-
Append Same as @moliyu solution but it's for |
Beta Was this translation helpful? Give feedback.
-
|
this happend only inside pages folder so now I move all UI to component or other folder and call it to pages it seem work |
Beta Was this translation helpful? Give feedback.
-
That's really brilliant!!! Works now. So how do think this issue? is it a bug or just trick? Thank you. |
Beta Was this translation helpful? Give feedback.
-
I thinks it's a bug since unplugin-auto-import is not official for Nuxt3 it's said already build-in with nuxt3 |
Beta Was this translation helpful? Give feedback.
-
|
Only to pages folder because of Vite hot reload. This has been discovered. My solution is to fix for pages folder too |
Beta Was this translation helpful? Give feedback.
-
|
I look forward to, too |
Beta Was this translation helpful? Give feedback.
-
|
Does anyone having issue with In Nuxt 2, I can use below css to apply changes for dark mode. But in Nuxt 3, I have to add @media (prefers-color-scheme: dark) {
.logo {
color: red;
}
} |
Beta Was this translation helpful? Give feedback.
-
|
I tried to upgrade to 3.0.0-rc.8 but not working with ant beta3. |
Beta Was this translation helpful? Give feedback.
-
|
No, looks like there is a problem with dayjs import: https://github.com/nuxt/framework/issues/6941 |
Beta Was this translation helpful? Give feedback.
-
|
This is my import { defineNuxtConfig } from 'nuxt'
import Components from 'unplugin-vue-components/vite';
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
meta: {
title: "Nuxt Blank"
},
css: [
'~/assets/css/app.scss',
],
vite: {
plugins: [
Components({
resolvers: [AntDesignVueResolver()],
}),
],
ssr: {
noExternal: ['moment', 'compute-scroll-into-view', 'ant-design-vue'],
},
},
})but im still getting when using any ant design component ( a-button, a-row etc..) any solution? |
Beta Was this translation helpful? Give feedback.
-
|
@Zila-itc the link is 404 |
Beta Was this translation helpful? Give feedback.
-
|
https://github.com/amihhs/nuxt-ant-vue/blob/master/nuxt.config.ts |
Beta Was this translation helpful? Give feedback.
-
I have changed to public now |
Beta Was this translation helpful? Give feedback.
-
thanks sir but rc.8 seem not working but working in rc.9 |
Beta Was this translation helpful? Give feedback.
-
Now I have updated it to nuxt3-rc.11 |
Beta Was this translation helpful? Give feedback.
-
|
Hello guys, i dont know if this could help but i want to share with you the way i'm making my nuxt3 project work with ant design Step 1: Install Ant degin and ant design icons for vueyarn add ant-design-vue @ant-design/icons-vueStep 2: Create a new file named antd.ts under the plugins folder (must be created if !exists)Copy and paste this code inside import {defineNuxtPlugin} from "#app";
import 'ant-design-vue/dist/antd.css';
import Antd from 'ant-design-vue';
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(Antd)
})Step 3: Register your newly created pluginTo do so, open your nuxt.config.ts file and paste this code import { defineNuxtConfig } from 'nuxt';
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
plugins:['@/plugins/antd']
})Step 4: EnjoyFrom now you can enjoy Ant design by running your nuxtjs development server: yarn devPOV: The current plugin register all components. If you need to register only fews or want to do any customization please refer to Ant design docs and update your plugin in consequence. |
Beta Was this translation helpful? Give feedback.
-
|
Are your |
Beta Was this translation helpful? Give feedback.
-
|
After add deps: nuxt.config.ts: |
Beta Was this translation helpful? Give feedback.
-
|
Maybe from |
Beta Was this translation helpful? Give feedback.
-
|
Clearly, './modules/antdv' is your code, not antdv code --> Check your
path + your code
…On Thu, Oct 6, 2022 at 1:25 PM aaronloyalytics ***@***.***> wrote:
[image: image]
<https://user-images.githubusercontent.com/111955996/194229534-f40f951f-c290-4495-9b75-1840a4bf2c27.png>
i keep getting this *error* while runningNUXT3 Cannot start nuxt:
Cannot find module './modules/antdv'
—
Reply to this email directly, view it on GitHub
<#5210 (reply in thread)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AYVO5TGGNHE7A7C6LLZ47XLWBZWGTANCNFSM5MZ5HE2Q>
.
You are receiving this because you commented.Message ID:
***@***.***
.com>
|
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
|
i managed to install and run it in dev environment, but once running pnpm run build, it throws a lot of error: reproduction here https://github.com/u007/nuxt3-ant-windicss update: after fiddle around a plain install, realise i need to update to latest version via ncu, |
Beta Was this translation helpful? Give feedback.
-
I think you use the old version of Nuxt 3 after rc-9 will face the error |
Beta Was this translation helpful? Give feedback.
-
Current config with |
Beta Was this translation helpful? Give feedback.
-
for me there are 2 reason first it auto import(no need import every time) and also support import on demand (small bundle size) also super clean code
|
Beta Was this translation helpful? Give feedback.
-
|
I still get the @babel/runtime errors , despite having the isDev config in transpile :( rc-11 |
Beta Was this translation helpful? Give feedback.
-
I think you can test this repo it working fine on my Mac |
Beta Was this translation helpful? Give feedback.
-
|
I'm using below config and it's working well for all components that I'm using. import { defineNuxtConfig } from 'nuxt/config'
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
vite: {
plugins: [
Components({
/**
* {resolveIcons: true}: resolving problem with icons
* {importStyle: false}: do not import css, do it manually for dark mode
*/
resolvers: [
AntDesignVueResolver({
resolveIcons: true,
importStyle: false,
}),
],
}),
],
ssr: {
noExternal: [
'moment',
'compute-scroll-into-view',
'ant-design-vue',
'@ant-design/icons-vue',
],
},
}
}) |
Beta Was this translation helpful? Give feedback.
-
|
who stuggle to use nuxt3 antd with auto import can test this |
Beta Was this translation helpful? Give feedback.
-
|
thanks to @Zila-itc , ive whipped up a nuxt.config without the need AntDesignVueResolver |
Beta Was this translation helpful? Give feedback.
-
|
sorry pnpm run dev first to generate nuxt autoimports
…On Tue, 11 Oct 2022, 12:21 am James Tan, ***@***.***> wrote:
do a rm -rf .nuxt .output and node_modules
then use ncu -u
then plremove package-lock.json
then pnpm install --shamefully-hoist
then run pnpm run build
On Tue, 11 Oct 2022, 12:18 am Fabian Skarmeta, ***@***.***>
wrote:
> I still get the @babel/runtime errors , despite having the isDev config
> in transpile :( rc-11
>
> —
> Reply to this email directly, view it on GitHub
> <#5210 (reply in thread)>,
> or unsubscribe
> <https://github.com/notifications/unsubscribe-auth/AAC65TIGBRWVSYTN63ITC7TWCQ6VPANCNFSM5MZ5HE2Q>
> .
> You are receiving this because you were mentioned.Message ID:
> <vueComponent/ant-design-vue/repo-discussions/5210/comments/3840967@
> github.com>
>
|
Beta Was this translation helpful? Give feedback.
-
|
do a rm -rf .nuxt .output and node_modules
then use ncu -u
then plremove package-lock.json
then pnpm install --shamefully-hoist
then run pnpm run build
…On Tue, 11 Oct 2022, 12:18 am Fabian Skarmeta, ***@***.***> wrote:
I still get the @babel/runtime errors , despite having the isDev config in
transpile :( rc-11
—
Reply to this email directly, view it on GitHub
<#5210 (reply in thread)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAC65TIGBRWVSYTN63ITC7TWCQ6VPANCNFSM5MZ5HE2Q>
.
You are receiving this because you were mentioned.Message ID:
***@***.***
.com>
|
Beta Was this translation helpful? Give feedback.
-
I have tried this but still getting babel/runtime error in my machine & vercel with custom build command. Do you have any other ideas |
Beta Was this translation helpful? Give feedback.
-
|
yes, only transpile if its production aka build. i couldnt figure how to with nuxt import ant, but this works: |
Beta Was this translation helpful? Give feedback.
-
|
thank you, it seems work for me in local machine. let me try on vercel p/s: Vercel working well |
Beta Was this translation helpful? Give feedback.
-
|
` import { defineNuxtConfig } from 'nuxt/config' // https://v3.nuxtjs.org/api/configuration/nuxt.config const isDev = process.env.NODE_ENV === 'development' export default defineNuxtConfig({ |
Beta Was this translation helpful? Give feedback.
-
|
Am I the only one who can't get EDIT: nevermind |
Beta Was this translation helpful? Give feedback.
-
|
use Nuxt |
Beta Was this translation helpful? Give feedback.
-
|
Can you give an example of |
Beta Was this translation helpful? Give feedback.
-
|
how to add tailwind https://tailwindcss.com/docs/guides/nuxtjs#3 Nuxi 3.0.0 23:20:16
Nuxt 3.0.0 with Nitro 1.0.0 23:20:16
23:20:16
> Local: http://localhost:3000/
> Network: http://192.168.0.101:3000/
✔ Nitro built in 343 ms nitro 23:20:18
✘ [ERROR] No loader is configured for ".node" files: node_modules/fsevents/fsevents.node 23:20:16
node_modules/fsevents/fsevents.js:13:23:
13 │ const Native = require("./fsevents.node");
╵ ~~~~~~~~~~~~~~~~~
ERROR 23:20:18 [vite] error while updating dependencies: 23:20:18
Error: Build failed with 1 error:
node_modules/fsevents/fsevents.js:13:23: ERROR: No loader is configured for ".node" files: node_modules/fsevents/fsevents.node
at failureErrorWithLog (/Users/ber/Desktop/nuxt3基础包 2/node_modules/esbuild/lib/main.js:1566:15)
at /Users/ber/Desktop/nuxt3基础包 2/node_modules/esbuild/lib/main.js:1024:28
at runOnEndCallbacks (/Users/ber/Desktop/nuxt3基础包 2/node_modules/esbuild/lib/main.js:1438:61)
at buildResponseToResult (/Users/ber/Desktop/nuxt3基础包 2/node_modules/esbuild/lib/main.js:1022:7)
at /Users/ber/Desktop/nuxt3基础包 2/node_modules/esbuild/lib/main.js:1134:14
at responseCallbacks.<computed> (/Users/ber/Desktop/nuxt3基础包 2/node_modules/esbuild/lib/main.js:671:9)
at handleIncomingPacket (/Users/ber/Desktop/nuxt3基础包 2/node_modules/esbuild/lib/main.js:726:9)
at Socket.readFromStdout (/Users/ber/Desktop/nuxt3基础包 2/node_modules/esbuild/lib/main.js:647:7)
at Socket.emit (node:events:513:28)
at Socket.emit (node:domain:489:12)
ℹ Vite client warmed up in 1019ms |
Beta Was this translation helpful? Give feedback.
-
|
How add ant design without unplugin-vue-components? On doc in repo it is written that in the case of using nuxt , you need to use Nuxt/components instead of unplugin-vue-components. |
Beta Was this translation helpful? Give feedback.
-
|
It`s useful for me: import WebpackComponents from 'unplugin-vue-components/webpack';
import ViteComponents from 'unplugin-vue-components/vite';
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
const lifecycle = process.env.npm_lifecycle_event;
const componentResolver = AntDesignVueResolver({
importStyle: 'less',
resolveIcons: true,
});
const builder: 'webpack' | 'vite' = 'vite';
const antdPkgs = [
'ant-design-vue',
'@ant-design/icons-vue',
'@ant-design/icons-svg',
'@ant-design/colors',
'lodash',
'lodash-es',
'@babel/runtime',
'dayjs',
'scroll-into-view-if-needed',
]
export default defineNuxtConfig({
builder,
build: {
transpile:
lifecycle === 'build' || builder === 'webpack'
? antdPkgs
: [],
},
vite: {
plugins: [
ViteComponents({
resolvers: [componentResolver],
}),
],
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
},
},
},
ssr: {
noExternal: antdPkgs
}
},
webpack: {
plugins: [
WebpackComponents({
resolvers: [componentResolver],
}),
],
loaders: {
less: {
lessOptions: {
javascriptEnabled: true,
},
},
},
},
experimental: {
payloadExtraction: false
}
}); |
Beta Was this translation helpful? Give feedback.
-
|
just import 'ant-design-vue/dist/antd.css';
import Antd from 'ant-design-vue';
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(Antd)
}) |
Beta Was this translation helpful? Give feedback.
-
|
The way you apply is not import on demand. |
Beta Was this translation helpful? Give feedback.
-
|
In documentation unplugin-vue-components - for Nuxt need to use Nuxt/components instead of unplugin-vue-components. |
Beta Was this translation helpful? Give feedback.
-
|
But @nuxt/components is for nuxt2. Could you find any way to use in nuxt3? |
Beta Was this translation helpful? Give feedback.
-
|
@hugegegewu Sorry I didn't know. I'll probably wait for official support then. |
Beta Was this translation helpful? Give feedback.
-
|
I'm still working fine with unplugin-vue-components in nuxt 3.0 |
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
|
Who can help me? |
Beta Was this translation helpful? Give feedback.
-
message.info and message.error not working . Do you have a solution? |
Beta Was this translation helpful? Give feedback.
and others
-
nuxt.config.tsto thisBeta Was this translation helpful? Give feedback.
All reactions