Nuxt Cloudinary

February 20, 2020


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: [

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

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


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