Cloudinary CDN with Nuxt & Strapi

Update! Module @nuxt/image has a Cloudinary provider.
You can also use @nuxtjs/cloudinary.

We have NuxtJS with Apollo on Vercel, Strapi with PostgreSQL on Heroku and account in Cloudinary.

Add official Stapi package:

/* 
** project/backend/ 
*/

yarn add strapi-provider-upload-cloudinary

Add settings.js for upload extension:

/* 
** project/backend/extensions/upload/config/settings.js 
*/

if (!process.env.NODE_ENV || process.env.NODE_ENV === "development") {
    module.exports = {
      provider: "local",
      providerOptions: {}
    };
  } else if (process.env.NODE_ENV === "production") {
    module.exports = {
      provider: "cloudinary",
      providerOptions: {
        cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
        api_key: process.env.CLOUDINARY_API_KEY,
        api_secret: process.env.CLOUDINARY_API_SECRET
      }
    };
  }

Add package for Vue to Nuxt:

/* 
** project/frontend/ 
*/

yarn add cloudinary-vue

Create plugin:

/* 
** project/frontend/plugins/cloudinary.js 
*/

import Vue from 'vue'
import Cloudinary from 'cloudinary-vue'
Vue.use(Cloudinary, {
  configuration: {
    cloudName: process.env.CLOUDINARY_CLOUD_NAME,
    fetch_format: 'auto', // auto generate WebP
    secure: true // https for media
  }
})

Add plugin to config:

/* 
** project/frontend/nuxt.config.js
*/

module.exports = {
...
  plugins: ['@/plugins/cloudinary.js'],
}

Add provider_metadata to our query:

/*
** project/frontend/apollo/queries/product/product.gql
*/

query Product($slug: String) {
  products(where: { slug: $slug }) {
    id
    slug
    published
    name
    sku
    image {
      provider_metadata
    }
  }
}

Usage:

/*
** project/frontend/pages/product/_slug.vue
*/

<template>
....

<cld-image
  :publicId="product.image.provider_metadata.public_id"
  width="300"
  crop="scale"
/>

...

</template>