How to use only needed Element UI components for Nuxt.js project

First, Install
yarn add --dev core-js @babel/runtime-corejs3 @nuxt/babel-preset-app babel-plugin-component
Add babel config in nuxt.config.js
build: {
babel: {
presets({ isServer }) {
return [
[
'@nuxt/babel-preset-app',
{
corejs: { version: 3 }
}
]
]
},
plugins: [
[
'component',
{
libraryName: 'element-ui',
styleLibraryName: 'theme-chalk'
}
]
]
},
extend(config, ctx) {}
}
and finally, add required components in a js file like below and add it in nuxt.config.js
import Vue from 'vue'
import {
Input,
InputNumber,
Popover,
} from 'element-ui'
Vue.use(Popover)
Vue.use(InputNumber)
Vue.use(Input)
plugins: ['@/plugins/element-ui']
That's it. now you can see the bundle size got reduced.
