How to load third-party component libraries on demand in Vue3

How to load third-party component libraries on demand in Vue3

Preface

Take Element Plus as an example to configure on-demand loading of components and styles.

environment

  • vue3.0.5
  • vite2.3.3

Installing Element Plus

yarn add element-plus
# OR
npm install element-plus --save

Complete introduction

import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue';

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

It can be seen that the js and css files of Element Plus are quite large in size and time-consuming.

Load on demand

Install the vite-plugin-importer plugin

Install

yarn add vite-plugin-importer
# OR
npm install vite-plugin-importer --save

There is a plugin column on the Vite official website, where you can use recommended community plugins


Among them, vite-plugin-importer is an integration of babel-plugin-import, and babel-plugin-import can load components and component styles on demand, so vite-plugin-importer can also do so.


Configure vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import usePluginImport from 'vite-plugin-importer'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    usePluginImport({
      libraryName: 'element-plus',
      customStyleName: (name) => {
        return `element-plus/lib/theme-chalk/${name}.css`;
      },
    }),
  ],
  resolve: {
    alias: {
      'vue': 'vue/dist/vue.esm-bundler.js'
    },
  },
})

main.js

import { createApp } from 'vue'
import App from './App.vue'
import { ElButton, ElSelect } from 'element-plus';

const app = createApp(App)
app.component(ElButton.name, ElButton);
app.component(ElSelect.name, ElSelect);
app.mount('#app')

Using vite-plugin-importer to load components and styles on demand has obvious effects.

Install vite-plugin-style-import

Install

yarn add vite-plugin-style-import -D
# OR
npm i vite-plugin-style-import -D

The Element Plus official website provides the vite-plugin-style-import on-demand loading method.

Configuration

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import styleImport from 'vite-plugin-style-import';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    styleImport({
      libs: [
        {
          libraryName: 'element-plus',
          esModule: true,
          ensureStyleFile: true,
          resolveStyle: (name) => {
            return `element-plus/lib/theme-chalk/${name}.css`;
          },
          resolveComponent: (name) => {
            return `element-plus/lib/${name}`;
          },
        },
      ],
    }),
  ],
  resolve: {
    alias: {
      'vue': 'vue/dist/vue.esm-bundler.js' 
    },
  },
})

main.js

import { createApp } from 'vue'
import App from './App.vue'
import { ElButton, ElSelect } from 'element-plus';

const app = createApp(App)
app.component(ElButton.name, ElButton);
app.component(ElSelect.name, ElSelect);
app.mount('#app')

As you can see, vite-plugin-style-import only loads component styles on demand.

Summarize

  • vite-plugin-importer can load components and component styles on demand.
  • vite-plugin-style-import can only load component styles on demand.
  • Compared to loading third-party component libraries once, loading on demand is better.

This is the end of this article about how Vue3 loads third-party component libraries on demand. For more relevant Vue3 on-demand component library loading content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Vue.js's mobile component library mint-ui implements infinite scrolling to load more methods
  • Teach you to build a Vue component library that loads on demand (summary)
  • How to replace the Vue component library with on-demand loading

<<:  Introduction to the use and difference between in and exists in MySQL

>>:  Solution to forgetting the password of the pagoda panel in Linux 3.X/4.x/5.x

Recommend

Detailed steps for building Portainer visual interface with Docker

In order to solve the problem mentioned last time...

How to start the spring-boot project using the built-in linux system in win10

1. Install the built-in Linux subsystem of win10 ...

Introduction to network drivers for Linux devices

Wired network: Ethernet Wireless network: 4G, wif...

How to enable TLS and CA authentication in Docker

Table of contents 1. Generate a certificate 2. En...

Solution to the problem that mysql local login cannot use port number to log in

Recently, when I was using Linux to log in locall...

Detailed steps to store emoji expressions in MySQL

Caused by: java.sql.SQLException: Incorrect strin...

Summary of methods for querying MySQL user permissions

Introduce two methods to view MySQL user permissi...

Implementation of Docker cross-host network (overlay)

1. Docker cross-host communication Docker cross-h...

JavaScript's unreliable undefined

undefined In JavaScript, if we want to determine ...

Analysis of MySQL concurrency issues and solutions

Table of contents 1. Background 2. Slow query cau...

Web standards learning to understand the separation of structure and presentation

When discussing Web standards, one thing that alwa...

Common problems and solutions during MySQL MGR construction

Table of contents 01 Common Faults 1 02 Common Fa...

Implementation of Docker cross-host network (manual)

1. Introduction to Macvlan Before the emergence o...