Can auto import the Toast of vant?

[chenpeng991105]

Now I use the Toast by this way:

<script lang="ts" setup>
import { Toast } from 'vant'
import 'vant/lib/index.css'
<script>

Can auto import the Toast of vant?

[adarshmadrecha]

Yes, you can in your .vue files (SFC). Add Vant in vite config as mentioned in readme.

// vite.config.js
plugins: [
Components({
      resolvers: [
        (name) => {
          // where `name` is always CapitalCase
          if (name.startsWith('Van'))
            return { importName: name.slice(3), path: 'vant' }
        },
      ]
    }),
]

FYI, I am still facing issue with Auto Loading of css files for each component. If I figure out, will share it here.

[codesyofo]

#162

[Cleam]

Vant 中有个别组件是以函数的形式提供的，包括 Toast，Dialog，Notify 和 ImagePreview 组件。在使用函数组件时，unplugin-vue-components 无法自动引入对应的样式，因此需要手动引入样式。

// Toast
import { Toast } from 'vant';
import 'vant/es/toast/style';

// Dialog
import { Dialog } from 'vant';
import 'vant/es/dialog/style';

// Notify
import { Notify } from 'vant';
import 'vant/es/notify/style';

// ImagePreview
import { ImagePreview } from 'vant';
import 'vant/es/image-preview/style';

点击查看vant官网说明

[lixiaofa]

Now I use the Toast by this way: showToast({ message: '已添加！' }); Do I still need this? import { showToast } from 'vant'

[MrFlyHouse]

@Cleam

您好，官网提到

你可以在项目的入口文件或公共模块中引入以上组件的样式，这样在业务代码中使用组件时，便不再需要重复引入样式了

但是我在Demo中的main.ts写了官网实例中的那些import语句，依然不能直接在自己其他的子组件中使用那些函数组件，请问该如何配置呢？