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

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

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.

nuxt.js production bundle