CODEWITHSUNDEEP
vue.jsnuxt.jsantd
Ibrahim Mohammed
Ibrahim Mohammed

Reputation: 312

Import UI library modularized in nuxtjs

I'm learning nuxtjs and i use ant-design-vue as my ui library, i'm able to import the library as a plugin and it works fine 

import Vue from 'vue'
import Antd from 'ant-design-vue';

export default () => {
  Vue.use(Antd)
}

but this import the components globally, but what i wanted to do is to import individual components into specific pages not globally since nuxt will auto lazy load this, ps: i can import individual components using the plugin and it works but it's still global import. for example if i have an admin dashboard that uses a datepicker which i don't use it anywhere else on the app, i tried to do in the pages/dashboard/index.vue

  <template>
        <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>
    </template>

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

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

the import statement works fine when it's in the plugin but not in the page individually, i get error Unknown custom element: <a-button> - did you register the component correctly?

Upvotes: 1

Views: 1859

Answers (2)

silvan
silvan

Reputation: 1113

From multiple component declaration this worked for me (Nuxt 2.1.3 in layout/default.vue)

<script>
import { Menu, Icon } from 'ant-design-vue'
export default {
  name: 'DefaultLayout',
  components: {
    'a-menu': Menu,
    'a-menu-item': Menu.Item,
    'a-menu-item-group': Menu.ItemGroup,
    'a-sub-menu': Menu.SubMenu,
    'a-icon': Icon
  },
  data: () => ({
    activeItem: 0,
    search: '',
    current: ['mail']
  })
}
</script>

Upvotes: 0

Ibrahim Mohammed
Ibrahim Mohammed

Reputation: 312

it worked when i did this

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

export default {
  components: {
    'a-button':Button
  }
}
</script>

Upvotes: 4

Related Questions