Use modularized antd in nuxtjs

[mapsgeek]

importing ant-design-vue works fine using plugins by importing either all the library import Antd from 'ant-design-vue'; or import Button from 'ant-design-vue/lib/button'; which will import a a single component but this import is global to all pages what i have been trying to do is to import certain components in certain pages only to take advantage of lazy loading i tried <script> import Button from 'ant-design-vue/lib/button'; export default { components: { Button } } </script> in the specific page i want but it doesn't work with an error that component isn't registered

[tangjinzhou]

How are you using it in the template?

[mapsgeek]

here's what i do

<template>
  <section class="container">
      <div>
        <a-button type="primary">Primary</a-button>
        <a-button>Default</a-button>
        <a-button type="dashed">Dashed</a-button>
        <a-button type="danger">Danger</a-button>
      </div>
  </section>
</template>

<script>
import Button from 'ant-design-vue/lib/button';

export default {
  components: {
     Button
  }
}
</script>

i figured it out working by adding

export default {
  components: {
    'a-button' : Button
  }
}

but i want to confirm if i'm doing it right

[tangjinzhou]

If you use

export default {
  components: {
     Button
  }
}

you should use it like <Button type="primary">Primary</Button>

You can use default name by

export default {
  components: {
     [Button.name]: Button
  }
}

[mapsgeek]

thank you for making it clear, i also tried to use babel-plugin-import so it import style file automatically, instead of me defining each single style file like this for every component css: ['ant-design-vue/lib/button/style/css'] i created a .bablerc and put

{
    "plugins": [
        [
            "import",
            {
                "libraryName": "ant-design-vue",
                "libraryDirectory": "es",
                "style": "true"
            }
        ]
    ]
}

as in documentation but i don't know what should i add to the nuxt.config, build object

[JasonGaoG]

when i user antd in nuxt2, i got 'TypeError: 对象不支持“remove”属性或方法' error, seems it is caused in a (react.element). anyone has idea?

[hagemann]

@mapsgeek Nuxt doesn’t read the .babelrc file. Instead, you have to place the snippet into the build option inside nuxt.config.js like so:

export default {
  ...

  css: [
    { src: 'ant-design-vue/dist/antd.less', lang: 'less' },
  ],
  plugins: [
    { src: '@/plugins/antd.js' },
  ],
  build: {
    babel: {
      plugins: [ // Must exclude "style: true"
        ['import', { libraryName: 'ant-design-vue' }, 'ant-design-vue'],
      ],
    },
    loaders: {
      less: {
        javascriptEnabled: true,
        modifyVars: {
          'font-size-base': '15px', // Example overwrite
        },
      },
    },
  },

  ...

}

Ensure that you npm i less less-loader and npm i -D babel-plugin-import for the above code to work. The antd.js plugin can look like this: https://github.com/vueComponent/ant-design-vue/blob/master/site/components.js

[loganpowell]

css: [ { src: 'ant-design-vue/dist/antd.less', lang: 'less' }, ], plugins: [ { src: '@/plugins/antd.js' }, ], build: { babel: { plugins: [ // Must exclude "style: true" ['import', { libraryName: 'ant-design-vue' }, 'ant-design-vue'], ], }, loaders: { less: { javascriptEnabled: true, modifyVars: { 'font-size-base': '15px', // Example overwrite }, }, }, },

Do you mean npm i less less-loader?

[hagemann]

Do you mean npm i less less-loader?

@loganpowell Oops, I amended my reply. Thanks!

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.