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

Linux system AutoFs automatic mount service installation and configuration

Table of contents Preface 1. Install the service ...

Why MySQL should avoid large transactions and how to solve them

What is a big deal? Transactions that run for a l...

Detailed explanation of the process of modifying Nginx files in centos7 docker

1. Install nginx in docker: It is very simple to ...

Implementing search box function with search icon based on html css

Preface Let me share with you how to make a searc...

MySQL 8.0.20 compressed version installation tutorial with pictures and text

1. MySQL download address; http://ftp.ntu.edu.tw/...

Basic JSON Operation Guide in MySQL 5.7

Preface Because of project needs, the storage fie...

Web Design Tutorial (5): Web Visual Design

<br />Previous article: Web Design Tutorial ...

MySQL 5.7.19 (tar.gz) installation graphic tutorial under Linux

The first tutorial for installing MySQL-5.7.19 ve...

A very detailed summary of communication between Vue components

Table of contents Preface 1. Props, $emit one-way...

How to Develop a Progressive Web App (PWA)

Table of contents Overview Require URL of the app...

How to use pdf.js to preview pdf files in Vue

When we preview PDF on the page, some files canno...

A few experiences in self-cultivation of artists

As the company's influence grows and its prod...