Nuxt Cloudinary


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 = $cloudinaryexport 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>


❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

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

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.