Nuxt Cloudinary

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

References:

https://cloudinary.com/documentation/javascript_image_manipulation