前一段时间，@colbyfayock在Twitter上向我发了电话，讨论了潜在的Cloudinary + NUXT社区工作。由于我真的很喜欢从事社区项目，因此我立即同意见面并交谈我们可以做些什么来使这种伙伴关系和整合变得更好。

要清楚，以前，@mayashavin_44创建的Cloudinary和NUXT之间已经存在了非常不错的集成。这是一个非常出色的项目，在NUXT生态系统中广泛使用。但是，NUXT的新版本出现（3.0），随之而来的是一个新的接口和新体系结构，因此，许多模块 /集成与新发布的版本不兼容。从这一点开始，我想欣赏Maya在此模块中投入的所有工作。对你的荣誉ð

Colby然后与我联系，问我是否有兴趣帮助迁移该模块并成为其官方维护者。我与Nuxt Core团队进行了交谈，并认为这确实是一个好主意，因此我开始研究这个新版本。今天，这也是我想在本文中展示的内容。 Cloudinary＆Nuxt之间的这种新集成使您能够轻松传递性能和优化图像'

什么是nuxtcloudinary？

nuxtCloudinary是云数字资产管理系统和NUXT框架之间的集成模块。它通过自动化许多重复性工作来提供出色的开发人员体验，以便您作为用户可以专注于重要的东西 - >为用户提供出色的体验！

要查看正式文档，请前往https://cloudinary.nuxtjs.org：

在这里，您将看到新版本的模块的所有可用功能。请记住，这不是目的，所以新功能会不时出现 - >敬请期待！

，但是由于这个模块，您可以做魔术，例如下面的魔术：

如果您有兴趣了解有关云和图像优化的更多信息，请查看我的其他文章here

用法

模块的使用相对简单。

首先，您需要安装@nuxtjs/cloudinary软件包：

yarn add @nuxtjs/cloudinary

接下来，将此软件包添加到nuxt.config.ts文件中的modules数组：

export default defineNuxtConfig({
  modules: ['@nuxtjs/cloudinary']
})

最后，让我们添加CLOUDINARY_CLOUD_NAME环境变量：

CLOUDINARY_CLOUD_NAME=<YOUR_CLOUDINARY_CLOUD_NAME>

就是这样！您现在准备开始在NUXT中使用Cloudinary。使用Autoimported CldImage.vue组件特别容易：

<template>
  <CldImage
    src="cld-sample-5"
    width="987"
    height="987"
    alt="My Awesome Image"
  />
</template>

，您应该在浏览器中获得以下结果：

概括

做得很好！通过遵循这些简单的步骤，您将Cloudinary集成到了NUXT应用程序中。现在，您可以开始向用户传递性能和优化图像！让我们在这里或在module repository中知道您希望我们添加到模块中的新功能：）