如何在 Nuxt.js 中创建全局自定义插件

Nuxt.js 和 Vue 一样，支持插件，可以分为三种类型：自定义插件、Vue 插件和外部包和模块。 虽然 Nuxt 文档 详细讨论了最后两个，但它们仅简要说明了如何在 Nuxt 应用程序中构建和使用自定义插件。

全局自定义插件可以在几种情况下派上用场。 例如，假设您找不到要实现的功能的开源插件，或者您对找到的功能不完全满意。 或者，也许你觉得有点创意，你有一些时间在你的手上。

在本教程中，我们将介绍两种不同的选项来构建我们自己的自定义插件，同时使用 Vue 和 JavaScript。 例如，我们的自定义插件将在您的 Nuxt 应用程序的控制台中显示我的生日，但您可以对其进行个性化设置以满足您项目的需求。 让我们开始吧！

• 构建组件

• 店铺

• 将组件订阅到商店

• 初始化插件

• 定义并注册插件

• 使用插件

构建组件

第一步是构建 Vue 组件。 在本文中，我们将使用一个基本的 toast 组件来显示简单的成功和错误消息。 我已经为本文构建了一个，稍后我们将详细介绍它：

<template>
  <div class="toast-element">
    <div :class="['toast-container', { success: state === 'success', error: state === 'error' }]">
      <div class="icon">
        <svg
          v-if="state === 'success'"
          width="8"
          height="7"
          viewBox="0 0 8 7"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path d="M6.96304 0.962891L2.88896 5.37647L1.03711 3.3703" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
        <svg
          v-else
          width=