How to load Element UI dynamically with Nuxt JS

Yuyu
Yuyu
Nov 8 · 3 min read

In this tutorial, I’m going to show how I load Element UI components individually and dynamically to make my website, OpenGraph, smaller and faster.

OpenGraph.xyz

What is Element UI?

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.

Element UI’s Github Statistic

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 -D

Next, 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.

It’s hard 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.

Yuyu

Written by

Yuyu

I am a Front-End developer. I like to share about productivity, goal setting and blogging tips on https://www.typeeighty.com.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade