st-cloudinary
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.2 • Public • Published

    Cloudinary

    Built With Stencil Standard JS npm version npm downloads

    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

    Keywords

    none

    Install

    npm i st-cloudinary

    DownloadsWeekly Downloads

    1

    Version

    0.0.2

    License

    MIT

    Unpacked Size

    240 kB

    Total Files

    45

    Last publish

    Collaborators

    • williamdasilva