Create-nuxt-app: Ant Design Vue ( Use modularized Antd )

[TariikHr]

Hello everyone and sorry if it's not the right place for this one ! It's my very first time on github 😂
I'm using nuxt for a while now and everything works great except for the Antd Framework ! It works as a plugin from the Nuxt CLI ... but the vue devtools keeps showing a warning about should avoid importing the whole package and using the modularized way with babel-import-plugin
Does anyone faced it or any fix for this please ?

[micheleriva]

Hi @TariikHr !
The warning is right, it is useless to import the whole package while you're probably using just a few components!
You should import just the components you're actually using, here you are the official guide about importing only certain components: https://vue.ant.design/docs/vue/getting-started/

Hope it helps!

[TariikHr]

Hello @micheleriva Thanks for your answer =)
I Really tried to import components on demand...with and without the babel-import-plugin but with nuxtjs it's not quit easy and create-nuxt-app import the whole package as a plugin.
as mentioned in the Ant Design Vue docs that we should use the modularized way i tried it in the nuxt.confi but nothing really works

Thank you for your time again

[shirohana]

Hello @TariikHr (๑ơ ω ơ)

I'm here for your mail, here's my solution:

1. Install babel-plugin-import

yarn add -D babel-plugin-import

or

npm install --save-dev babel-plugin-import

2. Disable ANTD plugin

nuxt.config.js

  /*
  ** Global CSS
  */
  css: [
-   'ant-design-vue/dist/antd.css'
  ],
  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
-   '@/plugins/antd-ui'
  ],

3. Use babel-plugin-import

nuxt.config.js

  /*
  ** Build configuration
  */
  build: {
+   babel: {
+     plugins: [
+       ['import', { libraryName: 'ant-design-vue', style: 'css' } ]
+     ]
+   }
  }

4. Import component when you need

~/pages/index.vue

 <template>
   <div>
+    <Button type="primary">Enjoy it</Button>
   </div>
 </template>

 <script>
+import { Button } from 'ant-design-vue'

 export default {
   components: {
+    Button
   }
 }

Enjoy it (๑ơ ω ơ)

[TariikHr]

Thank you so much @shirohana You've saved me =)

[TariikHr]

@shirohana Thank you for your greate help again ^^ and i have one last question please ! there is a way to get rid of the reset styles impoted via the babel-plugin-import ?

Thanks for any ideas

[mgnrfk]

Hi,

I have a problem importing the Layout component, as I use inside a , I'm getting an error : [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Any idea ?

[shirohana]

@mgnrfk Please provide your template code (´・ω・｀)

[mgnrfk]

@mgnrfk Please provide your template code (´・ω・｀)

Trying with the default Layout from the ant docs

import { Layout } from 'ant-vue-design';

<Layout>
  <Header>header</Header>
  <Layout>
    <Sider>left sidebar</Sider>
    <Content>main content</Content>
    <Sider>right sidebar</Sider>
  </Layout>
  <Footer>footer</Footer>
</Layout>

The warning is about Sider, latest ant, latest nuxt

[shirohana]

@mgnrfk Is it you make the Layout component registered?

You can do that like:

if you're using Single File Component

<script>
import { Layout } from 'ant-design-vue';

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

or register as a Global Component in your main.js or index.js

import Vue from 'vue';
import { Layout } from 'ant-design-vue';

Vue.use(Layout)

[mgnrfk]

@shirohana that's what I'm doing, using Single File Components, looks like the child components aren't imported (like Layout.Sider, Form.Item etc..)

I'm using last versions of nuxtJS and Ant (1.3.16)

[canthis]

@mgnrfk Having exact same problem. Did you manage to find a solution?

[mgnrfk]

@canthis didn't figure it out so I'm using it all, I just stripped the Icons to save some size for now.

[ronssij]

I've tried using either of the two. and I always get this one.

[JoeSchr]

I've tried using either of the two. and I always get this one.

+1 :(

[yairEO]

Anyone knows (maybe @shirohana) why, when importing ant to Nuxt like so:

plugins: [
        ['import', { libraryName:'ant-design-vue', style:'css' }]
    ]

AntD css-reset is being applied after all my app's css.. it's very annoying, because it overrides some of my stuff, like body{ font-size... }

I am running a very initial Nuxt app with not much in it.

[cwilby]

Use import { Button } from 'ant-design-vue/lib'; to fix the "Unexpected token {" error.

Source: https://stackoverflow.com/questions/53146624/import-ui-library-modularized-in-nuxtjs

[Abdulla1995]

@yairEO here is the solution. https://www.antdv.com/docs/vue/getting-started/#Import-on-Demand
Add these before of your css files.

FYI, babel-plugin-import's style option will importing some global reset styles, don't use it if you don't need those styles. You can import styles manually via import'ant-design-vue/dist/antd.css' and override the global reset styles.

[youngxhui]

I've tried using either of the two. and I always get this one.

have same problem.

[retromack]

Solved the issue in by including antd css in nuxtconfig,js and remove style option from in babel options

I've tried using either of the two. and I always get this one.

have same problem.

[Giorno-Giovana]

Solved the issue in by including antd css in nuxtconfig,js and remove style option from in babel options

I've tried using either of the two. and I always get this one.

have same problem.

Try this:

delete node.modules
delete .nuxt

nuxt.config
build: { babel: { plugins: [ ['import', { libraryName: 'ant-design-vue', libraryDirectory: 'lib', style: name =>${name}/style/index.css }] ] } },

component
`

`

[Pacheco95]

@shirohana that's what I'm doing, using Single File Components, looks like the child components aren't imported (like Layout.Sider, Form.Item etc..)

I'm using last versions of nuxtJS and Ant (1.3.16)

I'm facing the exact problem. Some parts of the layout is working but others don't. Searching in Vue docs I found this treasure:
https://v3.vuejs.org/guide/component-registration.html#local-registration

Note that locally registered components are not also available in subcomponents. For example, if you wanted ComponentA to be available in ComponentB, you'd have to use:

const ComponentA = {
  /* ... */
}

const ComponentB = {
  components: {
    'component-a': ComponentA
  }
  // ...
}

Semms like your child components must to declare their components too