
What is Element UI?

Element UI is, hands down, the most popular Vue JS component library. At the point of writing, it’s been used over 100,000 times.

Loading Element UI in Nuxt JS
To use a Vue plugins in Nuxt, we need to set up the plugin before launching the app.
First, create the file “plugins/element-ui.js”:
import Vue from 'vue';
import ElementUI from 'element-ui';
Vue.use(ElementUI)Second, add the file path inside the plugins key on your “nuxt.config.js”:
export default {
plugins: ['@/plugins/element-ui']
}Now, you should be able to use all Element UI components in your project.
But wait:
Can I import only individual components that I need from Element UI?
To do that, first install babel-plugin-component:
npm install babel-plugin-component -DNext, add the following code snippet to your .babelrc:
{
"presets": [["es2015", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}Now, you can edit “plugins/element-ui.js” and do this instead:
import Vue from 'vue';
import { Button, Card } from 'element-ui'; Vue.component(Button.name, Button); // This will register Button component globally
Vue.component(Card.name, Card); // This will register Card component globally
Lazy Loading Element UI Components
Lazy loading is the technique of loading something at a later phase when it’s going to be used. While code splitting is about separating a piece of code in a separate file, known as chunk, so that the initial bundle of your application gets reduced, increasing the initial load. — VueSchool
With the lazy loading technique, you could import various components from Element UI without slowing down your initial load.
To lazy load component in Vue, you’ll need to dynamically import it.
Now, change your “plugins/element-ui.js” as follows:
import Vue from 'vue'export default () => {
Vue.component('ElButton', () => import('element-ui/lib/button'))
Vue.component('ElSlider', () => import('element-ui/lib/slider'))
Vue.component('ElContainer', () => import('element-ui/lib/container'))
}
By default, Webpack uses number on the generated chunks making it harder to debug.

To make these chunks easier to work with. You could use Webpack’s magic comment feature to change the generated chunk name.
import Vue from 'vue'export default () => {
Vue.component('ElButton', () => import(/* webpackChunkName: 'element-ui-button' */ 'element-ui/lib/button'))
Vue.component('ElForm', () => import(/* webpackChunkName: 'element-ui-form' */ 'element-ui/lib/form'))
Vue.component('ElFormItem', () => import(/* webpackChunkName: 'element-ui-form-item' */ 'element-ui/lib/form-item'))
Vue.component('ElInput', () => import(/* webpackChunkName: 'element-ui-input' */ 'element-ui/lib/input'))
Vue.component('ElContainer', () => import(/* webpackChunkName: 'element-ui-container' */ 'element-ui/lib/container'))
Vue.component('ElDivider', () => import(/* webpackChunkName: 'element-ui-divider' */ 'element-ui/lib/divider'))
Vue.component('ElDialog', () => import(/* webpackChunkName: 'element-ui-dialog' */ 'element-ui/lib/dialog'))
Vue.component('ElMain', () => import(/* webpackChunkName: 'element-ui-main' */ 'element-ui/lib/main'))
Vue.component('ElRow', () => import(/* webpackChunkName: 'element-ui-row' */ 'element-ui/lib/row'))
Vue.component('ElCol', () => import(/* webpackChunkName: 'element-ui-col' */ 'element-ui/lib/col'))
}
Now Webpack would apply the name accordingly.

Conclusion
Element UI is a great component library that could speed up your development. Combined with dynamic import, you could speed up your website performance.
Click here to check out my website for more tutorials.
