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:

https://cloudinary.com/documentation/javascript_image_manipulation

❤️ Is this article helpful?

Buy me a coffee☕ or support my work to keep this space 🖖 and ad-free.
If you can't, do send some 💖 to @d_luaz or help to share this article.

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.
Pixtory App (Alpha) - easily organize photos on your phone into a blog.
暖心芽 (WIP) 🌞❤️🌱 - reminder of hope, warmth, thoughts and feelings (or just quotes).
LuaPass - offline password manager

By Desmond Lua

A dream boy who enjoys making apps, travelling and gardening. Follow me on @d_luaz.

Tags:

Setup Algolia InstantSearch on Nuxt/Vue

Nuxt.js Component to Embed Twitter Tweet

Nuxt.js Add Markdown Pages

Nuxt.js dotenv Configuraton for Development and Production

Nuxt.js Install Vue.js Plugins (Universal SSR usage)

Simple Guide to Nuxt.js (Vue.js SSR)

Nuxt Fetch Show Loading

Nuxt Fetch Handle Error / Show Error Page

Nuxt (>= 2.12) Fetch