When Vite + Vue3 +Vant4 builds the project, the Toast component is introduced as needed, and the solution to the compilation error occurs when showToast is referenced.

When Vite + Vue3 +Vant4 builds the project, the Toast component is introduced as needed, and the solution to the compilation error occurs when showToast is referenced.

1. Problem location

When building a project in Vite + Vue3 +Vant4, you need to use the Toast component to display prompt information and use function calls according to the official documentation.

/**函数调用
*为了便于使用 Toast，Vant 提供了一系列辅助函数，通过辅助函数可以快速唤起全局的 Toast 组件。
*比如使用 showToast 函数，调用后会直接在页面中渲染对应的轻提示。
*/

import { showToast } from 'vant';

showToast('提示内容');

After using it, an error is reported directly, saying that the corresponding style file cannot be found (as shown below):

Look for the node-moudles file in the project, and it is indeed not found. There is only a toast file (as shown below):

Searching for the solution on Baidu, it was said that the following style files need to be introduced separately:

However, it still reports an error after quoting, and it doesn't work.

Continue to check the official documents and find that there are solutions to the frequently asked questions at the bottom of the official documents:

Vant no longer supports the plug-in starting from version 4.0 babel-plugin-import. Please refer to the migration guide to remove the plug-in.

According to the official documentation, the babel-plugin-import plug-in was removed. As a result, the plug-in was not used in the project at all. So far, the problem has not been solved.

---

---

Later, after careful observation, it was discovered that the vite-plugin-style-import plug-in was used when vant4 was introduced on demand in the project file vite.config.js.

The name parameter at this time is actually the name within the curly brackets introduced into the vant component. Compare the error screenshot

Since show-toast/style/index cannot be found, you might as well modify the path directly to toast/style/index

resolveStyle: (name) => {
    
    
          if (name == 'show-toast') {
    
    
            return `../es/toast/style/index`; //修改vant show-toast引入路径
          } else {
    
    
            return `../es/${
      
      name}/style/index`; //修改vant引入路径
          }
        },

After the modification, no error is reported anymore, and both local and global registration are normal:

2. The following is the complete solution code:

Partially introduce Toast

1.vite.config.js

import {
    
    
  defineConfig
} from 'vite';
import vue from '@vitejs/plugin-vue';
import {
    
    
  resolve
} from 'path'; //引入路径
import styleImport, {
    
    
  VantResolve
} from 'vite-plugin-style-import'; //按需引入插件

// https://vitejs.dev/config/
export default defineConfig({
    
    
  plugins: [
    vue(),
    styleImport({
    
    
      resolves: [VantResolve()], //引入vant
      libs: [{
    
    
        libraryName: "vant",
        esModule: true,
        resolveStyle: (name) => {
    
    
           if (name == 'show-toast') {
    
    
             return `../es/toast/style/index`; //修改vant引入路径
           } else {
    
    
             return `../es/${
      
      name}/style/index`; //修改vant引入路径
           }
         },
      }],
    }),
  ],
})

2. On the page where the component is used

<template>
  <div class="container" style="padding-top: 30px">
    <div style="display: flex; justify-content: center">
      <van-button type="primary" @click="showLocalToast"
        >显示局部toast消息</van-button
      >
    </div>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance, onMounted } from "vue";
import { showToast } from "vant";//引入showToast

const showLocalToast = () => {
  showToast("我是局部toast消息");
};
</script>

Globally introduce Toast

1.vite.config.js

import {
    
    
  defineConfig
} from 'vite';
import vue from '@vitejs/plugin-vue';
import {
    
    
  resolve
} from 'path'; //引入路径
import styleImport, {
    
    
  VantResolve
} from 'vite-plugin-style-import'; //按需引入插件

// https://vitejs.dev/config/
export default defineConfig({
    
    
  plugins: [
    vue(),
    styleImport({
    
    
      resolves: [VantResolve()], //引入vant
      libs: [{
    
    
        libraryName: "vant",
        esModule: true,
        resolveStyle: (name) => {
    
    
           if (name == 'show-toast') {
    
    
             return `../es/toast/style/index`; //修改vant引入路径
           } else {
    
    
             return `../es/${
      
      name}/style/index`; //修改vant引入路径
           }
         },
      }],
    }),
  ],
})

2.Introduce it globally in main.js

import {
    
    
    createApp
} from 'vue'
import App from './App.vue'

// 按需引入vant组件
import {
    
    
    showToast,
} from 'vant';
const app = createApp(App);
app.config.globalProperties.$toast = showToast; //全局使用showToast组件

app.mount('#app')

3. On the page where the component is used

<template>
  <div class="container" style="padding-top: 30px">
   <div style="display: flex; justify-content: center; margin-top: 50px">
      <van-button type="success" @click="showGlobalToast"
        >显示全局toast消息</van-button
      >
    </div>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance, onMounted } from "vue";
const instance = getCurrentInstance(); //获取当前实例对象
const _this = instance.appContext.config.globalProperties; //vue3获取当前this
const showGlobalToast = () => {
  _this.$toast("我是全局注册消息");
};
</script>