Nuxt Cloudinary

February 20, 2020

Install

npm install cloudinary-core --save

NOTE: I am using cloudinary for image display and manipulation. If you need to perform extra features like file upload and administration, do look into Cloudinary Node.js SDK

Edit nuxt.config.js.

export default {
  plugins: [
    '~/plugins/cloudinary'
  ]
}

Edit plugins/cloudinary.js

import Vue from 'vue'
import cloudinary from 'cloudinary-core'

const $cloudinary = new cloudinary.Cloudinary({cloud_name: 'CLOUD_NAME', secure: true})
// Vue.prototype.$cloudinary = $cloudinary

export default ({ app }, inject) => {
  inject('cloudinary', $cloudinary)
}

NOTE: Refer Nuxt Inject

Usage in component

<template>
  <div>
    <img :src="srcUr" alt=" " />
  </div>
</template>
<script>
export default {
  computed: {
    srcUrl() {
      const imageId = 'sample.jpg'
      return this.$cloudinary.url(imageId, { width: 280, height: 280, crop: 'fill', fetchFormat: 'auto'})
    }
}
</script>

References:

This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.