Cloudinary

Embed Cloudinary images easily through our standalone Cloudinary Web Component. Use this component with any of the following frontend frameworks:

• VueJS
• ReactJS
• Angular
• Natively with Web Component

🚀 Getting started

To install this component, you may install it through npm (or yarn):

npm install st-cloudinary

VueJS

To use this project with VueJS, install the npm dependency. In your main.js file, register the component:

import Vue from 'vue';
import App from './App.vue';
import { defineCustomElements as defineCloudinary } from 'st-cloudinary/dist/loader';

// Ignore the cloudinary component through the VueJS compilation
Vue.config.ignoredElements = ['st-cloudinary'];

defineCloudinary(window)

// ...

new Vue({
  render: h => h(App)
}).$mount('#app');

Then in your components, use it like any normal component:

<st-cloudinary
  cloud-name="demo"
  public-id="lady"
  width="200"
  height="200"
  crop="fill"
/>

NuxtJS

To use this component with Nuxt, you can install directly the nuxt-st-cloudinary-module to automatically inject the plugin, plus some fixes related to NuxtJS (see Known issues).

npm install nuxt-st-cloudinary-module

// nuxt.config.js
modules: [
  'nuxt-st-cloudinary-module'
]

🐛 Known issues

NuxtJS - Converting circular structure to JSON (toposort dependency)

To fix this issue, ensure all your dependencies are up to date. If it does not fix the issue, remove the chunk sorting in our Nuxt configuration. This is NOT required if you are using the nuxt-st-cloudinary-module since it automatically add this fix for you.

build: {
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
      // Run ESLint on save
      if (ctx.isDev && ctx.isClient) {
        for (let plugin of config.plugins) {
          if (plugin.constructor.name === 'HtmlWebpackPlugin') {
            plugin.options = Object.assign(plugin.options, { chunksSortMode: 'none' })
          }
        }
      }
    }
  }

🤓 Development

You are interested in the development of this component? Great! To get started, fork it and set-up your development environment.

Running the dev server

npm install
npm start

Building for production

npm run build

Running tests

npm test

📄 License

This project is under the MIT license