{"id":30410,"date":"2023-07-13T07:00:00","date_gmt":"2023-07-13T14:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=30410"},"modified":"2025-04-16T12:47:53","modified_gmt":"2025-04-16T19:47:53","slug":"community-library-support-svelte-nuxt-integrations","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/community-library-support-svelte-nuxt-integrations","title":{"rendered":"Cloudinary Expands Community Library Support With Svelte and Nuxt Integrations"},"content":{"rendered":"\n

The Cloudinary Developer Experience team is thrilled to announce that Cloudinary is expanding its community library support by launching two new integrations for the Nuxt and Svelte ecosystems.<\/p>\n\n\n\n

One of the DevX team\u2019s goals is to provide you, the developer, with the framework and meta-framework support you expect. The other is to ensure that Cloudinary is empowering developers and providing seamless integrations with popular frameworks.<\/p>\n\n\n\n

Streamlining Image Management in Svelte and Nuxt<\/h2>\n\n\n\n

Svelte Cloudinary and Nuxt Cloudinary follow the successful release of the Next.js community library, enabling developers to easily leverage the power of Cloudinary’s API and SDKs.<\/p>\n\n\n\n

Svelte, known for its unique approach to updating the DOM by compiling components directly rather than using a virtual DOM, offers enhanced performance and fully reactive code. This differs from the virtual DOM approach used by frameworks like React and Vue.<\/p>\n\n\n\n

By integrating Cloudinary into their Nuxt and Svelte\/SvelteKit projects, developers can take advantage of powerful features like image transformations, automatic optimization, responsive delivery, and more.<\/p>\n\n\n\n

SvelteKit, extending Svelte’s foundational functionalities, is recognized for its speed, particularly in content-rich projects, presenting an edge over frameworks like Next.js. On the other hand, Nuxt.js, ideal for developing universal applications using Vue.js, automatically configures routing, simplifying the development of various types of applications including static, single-page, mobile, and desktop applications.<\/p>\n\n\n\n

\"Dog<\/figure>\n\n\n\n

These libraries provide a seamless way to enhance user experiences, improve performance, and optimize media delivery, all while simplifying the development process.<\/p>\n\n\n

Note:<\/strong>

Svelte Cloudinary and Nuxt Cloudinary are both community integrations supported by the Cloudinary Developer Experience team and the broader community through open source.<\/p>\n<\/div>\n\n\n

Getting Started With CldImage<\/h2>\n\n\n\n

Both libraries come with a core CldImage component that allows users to drop in Cloudinary assets<\/a> with automatic optimization and responsive sizing. It also allows for easy transformations like dynamic cropping and resizing, text and image overlays, background removal, and more.<\/p>\n\n\n\n

However, developers should be aware of the unique challenges in debugging with Svelte due to its lack of built-in abstractions, and the potential limitations in component modularity and reliability. In contrast, Nuxt’s integration with Vue simplifies processes like importing, reducing the need for constant manual imports.<\/p>\n\n\n\n

Integrating With Svelte<\/h3>\n\n\n\n

First install the Svelte Cloudinary library with:<\/p>\n\n\n

npm install svelte-cloudinary<\/code><\/span><\/pre>\n\n\n
It can also be installed with pnpm<\/code> (the preferred package manager of the ecosystem) and works for both Svelte and SvelteKit projects.<\/p>\n\n\n\n
Then add a new environment variable in your .env.local<\/code> file with your Cloudinary Cloud Name:<\/p>\n\n\n
VITE_PUBLIC_CLOUDINARY_CLOUD_NAME=\"<Your<\/span> Cloud<\/span> Name<\/span>><\/span>\"<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Integrating With Nuxt<\/h3>\n\n\n\n
First, install the Nuxt Cloudinary library with:<\/p>\n\n\n
npm<\/span> install<\/span> @nuxtjs<\/span>\/cloudinary<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Next, add the module to your Nuxt config:<\/p>\n\n\n
export<\/span> default<\/span> defineNuxtConfig<\/span>({\n  modules<\/span>: ['@nuxtjs\/cloudinary'<\/span>]\n})<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Then add a new environment variable in your .env.local<\/code> file with your Cloudinary cloud name:<\/p>\n\n\n
CLOUDINARY_CLOUD_NAME=\"<Your<\/span> Cloud<\/span> Name<\/span>><\/span>\"<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Using the CldImage Component<\/h3>\n\n\n\n
The CldImage component has four basic required props: src<\/code>, width<\/code>, height<\/code>, and alt<\/code>. This is the same in both Svelte Cloudinary and Nuxt Cloudinary.<\/p>\n\n\n\n
Use the component by passing in the props as follows:<\/p>\n\n\n
<CldImage<\/span>\n  src<\/span>=\"<Public ID>\"<\/span>\n  width<\/span>=\"600\"<\/span>\n  height<\/span>=\"600\"<\/span>\n  alt<\/span>=\"<Description>\"<\/span>\n\/><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
To learn about the other transformations you can add, find the CldImage<\/code> component docs:<\/p>\n\n\n\n
CldImage with Svelte Cloudinary<\/a><\/p>\n\n\n\n
CldImage with Nuxt Cloudinary<\/a><\/p>\n\n\n\n
Coming Soon: More Features and Integrations<\/h2>\n\n\n\n
In addition to the CldImage component, you can expect to easily build social media cards using the CldOgImage component which same API as CldImage.<\/p>\n\n\n\n
\"Social<\/figure>\n\n\n\n
We’ll be adding more features to both libraries, starting with bringing parity between the Nuxt, Svelte, and Next.js integrations including the CldUploadWidget<\/code> and CldVideoPlayer<\/code> for easy uploading and video support.<\/p>\n\n\n\n
You can track the progress, report issues, or get help by heading over to the respective OSS projects on GitHub:<\/p>\n\n\n\n