Nuxt.js Toast消息中添加自定义图标是否需要安装额外模块

你传入组件字符串不生效是因为默认Toast会把传入的内容作为纯文本渲染，不会解析字符串中的Vue组件语法，也不会自动渲染对应的组件实例。

不需要额外安装第三方模块，主流的Nuxt Toast（比如常用的@nuxtjs/toast）本身支持自定义内容，有两种常用实现方案：

• 仅使用静态图标/HTML内容的场景
  如果你的图标是静态img或者SVG字符串，可以开启HTML解析能力，调用时添加配置项即可：

// *注意：如果提示文本包含用户输入内容，不要使用该方案，存在XSS风险*
this.$toast.error(`<img src="你的图标地址" style="width:16px;margin-right:8px" /> 错误提示内容`, {
  dangerouslyUseHTMLString: true
})

• 使用Vue图标组件的场景
  需要通过自定义组件的方式实现，支持直接传入你自己的图标组件：
  首先确保你要用到的图标组件已经全局注册，或者在调用处提前引入，调用时按如下写法传参即可：

import IconPaperclip from '~/components/IconPaperclip.vue'

this.$toast.error({
  // 传入自定义组件，组件内部可以正常写你要的图标、文本结构
  component: IconPaperclip,
  // 可选：给自定义组件传props，比如提示文本、图标大小等
  props: {
    text: '错误提示内容',
    size: 16
  }
})

如果你需要全局统一所有Toast的图标样式，可以直接在nuxt.config.js中配置Toast的全局自定义组件，不需要每次调用单独传：

// nuxt.config.js
export default {
  modules: ['@nuxtjs/toast'],
  toast: {
    // 指定全局自定义的Toast组件，该组件需要提前全局注册
    component: 'CustomToast'
  }
}

内容的提问来源于stack exchange，提问作者blue4euro4