typescriptvuejs3nuxt3.jsant-design-vue

NUXT 3 Module Error on adding ant-design-vue


I am trying to add Ant Design Vue as module into Nuxt3 project.

    import { fileURLToPath } from "node:url"
    import { defineNuxtModule } from "@nuxt/kit"
    export default defineNuxtModule({
      setup (_, nuxt) {
        nuxt.options.css.push("ant-design-vue/dist/antd.css")
      },
      hooks: {
        "components:dirs" (dirs) {
          dirs.push({
            path: fileURLToPath( new URL('../node_modules/ant-design-vue/lib', import.meta.url) ),
            pattern: '*/index.js',
            prefix: 'a',
          })
        }
      }
    })

But it gives an error:

[nuxt] [request error] Only URLs with a scheme in: file, data are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'c:'

I tried to use via path.resolve(__dirname, '...'), but unsuccessful

Node: v16.15.0 Nuxt: 3.0.0-rc.3 ant-design-vue: 3.2.5


Solution

  • After 2 day research finally I got the working solution.

    Adding ant-design-vue and icons into NUXT 3 projects

    1. Install deps
    npm i ant-design-vue @ant-design/icons-vue unplugin-vue-components --save
    
    1. Add it into the nuxt.config file
    // nuxt.config.ts
    import { defineNuxtConfig } from 'nuxt'
    import Components from 'unplugin-vue-components/vite';
    import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
    
    export default defineNuxtConfig({
     
      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'],
        },  
      },
    })
    
    
    1. Enjoy magic of auto-importing