Cloudinary Blog

Introducing Cloudinary's Nuxt Module

Introducing Cloudinary's Nuxt Module

Since its initial release in October 2016 by the Chopin brothers as a server-side framework that runs on top of Vue.js, Nuxt (aka Nuxt.js) has gained prominence in both intuitiveness and performance. The framework offers numerous built-in features based on a modular architecture, bringing ease and simplicity to web development. Not surprisingly, Nuxt.js has seen remarkable growth in adoption by the developer community along with accolades galore. At this writing, Nuxt has earned over 30K stars on GitHub and 96 active modules with over a million downloads per month. And the upward trend is ongoing.

Nuxt Downloads

This post describes the benefits Nuxt affords modern web development and the procedures for uploading and optimizing media files in Nuxt with its new Cloudinary module.

What Benefit Does Nuxt Offer?

By eliminating code distribution of server and client, Nuxt offers a straightforward and intuitive project-starter template:

Copy to clipboard
yarn create nuxt-app your-project-name

Conveniently, you can configure your project settings while installing Nuxt, for example:

new nuxt

Nuxt’s built-in, folder-based routing system automates the generation of routes.

Structure of the Nuxt Project Template
Structure of the Nuxt Project Template

Also, with a few codelines, you can output your project’s codebase as regular server-side rendering, as a full static site, or as a single-page application (SPA), like this:

Copy to clipboard
/* nuxt.config.js */
export default {
 mode: 'universal', // or 'spa'
 target: 'static', // for static site generation
}

That's not all. Read on for three more amazing capabilities offered by Nuxt.

SEO Improvements

Unlike regular SPAs, Nuxt's SPA build mode combines the server side’s auto pre-generating the static content before sending it back to the browser as static markup. Such a step reduces loading time while enabling Google to crawl the site at ease.

Full Static Site (Jamstack) Rendering With Nuxt SPA

To keep up with the Jamstack trend, Nuxt introduced a while ago the nuxt generate command with smart build-caching, which is probably the most significant innovation move in the framework’s history. That command does the following:

  • Build a static version of your web project.
  • Generate all the pages during the build process and place them in their route directory.
  • Cache the previous build and, if the command detects no changes in the codebase during the new deployment, reuse that build, eliminating the need for a web server.

Headless CMS Through Nuxt’s Content Module

Nuxt’s content module (@nuxt/content) acts as a Git-based, headless CMS for managing content from Markdown, YAML, and CSV files stored in the same project directory, displaying it in your Nuxt app. Perform these two steps to adopt this module:

  1. Install the package: yarn add @nuxt/content #OR npm i @nuxt/content

  2. Add the module to nuxt.config.js:

    Copy to clipboard
    export default {
    modules: [ '@nuxt/content' ]
    }

    Now you can fetch content with the instance $content and display the content with the Vue component <nuxt-content>:

    Copy to clipboard
    <template>
    <nuxt-content :document="document" />
    </template>
    <script>
    export default {
    async asyncData({ $content }) {
        /* fetch content from the file "hello-world" located in content/posts folder */
        const document = await $content('posts/hello-world').fetch()
    
        return { document }
    }
    }
    </script>

Dynamic and Inspired Community

Nuxt boasts a very well-maintained developer community, complete with a host of useful resources:

What is the Procedure for Uploading and Optimizing Media Assets in Nuxt With Cloudinary?

The latest Nuxt integration module from Cloudinary offers you straightforward APIs to efficiently upload and optimize media files. To set up Cloudinary in Nuxt, run this command:

Copy to clipboard
yarn add @nuxtjs/cloudinary #or npm i @nuxtjs/cloudinary

Next, configure your Cloudinary module:

Copy to clipboard
/*nuxt.config.js*/
export default {
    modules: [
        "@nuxtjs/cloudinary"
    ],
    cloudinary: {
        cloudName: "your-cloud-name",
        apiKey: "your-API-key",
        apiSecret: "your-API-secret"        
    }
}

You can then use Cloudinary in your Nuxt app. For instance: * To transform an image and get its delivery URL: $cloudinary.image.url("image-public-id", { width: 300, height: 300, crop: "thumbnail" })

  • To fetch a remote image and transform it:

    Copy to clipboard
    $cloudinary.image.fetchRemote("image-url", {
    width: 300,
    height: 300,
    crop: "thumbnail"
    })
  • To transform a video and get its URL: $cloudinary.video.url("video-publid-id", { width: 300, height: 300, crop: "crop" })

  • To upload and transform media assets:

    Server-Side Upload

    Copy to clipboard
    /* server-side */
    const image = $cloudinary.upload("file-base64-url",{
    public_id: 'example',
    eager: [{
        gravity: 'auto',
        width: 300,
        height: 300,
        crop: 'crop'
    }]
    }

    Client-Side Upload With an Upload Preset

    Copy to clipboard
    /* server-side */
    const image = $cloudinary.upload("file-base64-url",{
    public_id: 'example'
    upload_preset: 'example_preset'
    }
  • To optimize and display an image with a placeholder through a component:

    Copy to clipboard
    <cld-image public-id="image-public-id" width="300" height="300" crop="thumbnail">
    <cld-placeholder type="blur" />
    </cld-image>

What’s Next With Cloudinary’s Capabilities?

Now that Cloudinary is integrated with Nuxt, you can optimize further in numerous ways, especially in combination with the Nuxt Content module, e.g.: * Retrieve and display media assets in your app during build time. * Upload and optimize local assets with content hooks before displaying the content. Also, you can seamlessly serve images and videos with ready-to-use components. Do have a try!

Want to Learn More?

Recent Blog Posts

How to Use the Cloudinary Media Editor Widget

At Cloudinary, we manage the entire pipeline of media assets for thousands of customers of varying sizes from numerous verticals.

As part of our commitment to support the entire flow of media assets, we are now introducing an intuitive media editing widget: an out­-of­-the-­box, interactive UI providing your users with a set of common image editing actions for immediate use on your website or web app. The widget is interactive and simple, built on Cloudinary's transformation capabilities, and requiring only a few lines of code to integrate. Afterwards, you can seamlessly and effortlessly add content to your site or app with no need for in-house image editing capabilities.

Read more
Shoppable Video Is Becoming Popular in E-Commerce

As pandemic restrictions necessitated, many shopping trips in 2020 took place outside the traditional brick-and-mortar store, or at least void of the physical aisle-browsing experience. Same-day curbside pickup became a safe and convenient alternative, and e-commerce transactions skyrocketed as consumers shopped online. In fact, Digital Commerce 360 estimates that, compared to 2019, e-commerce transactions grew by more than 40% last year.

Read more
Enhance Your Travel Site With Cloudinary in Anticipation of a Return to New Normal

Read more
The Benefits of Headless DAMs

Headless is not a buzzword anymore. In fact, the concept of headless architecture is gaining momentum due to the flexibility it offers for composing new experiences and for tackling the undue complexity of an ever-evolving technology stack. That’s because while the evolution of the martech landscape has enabled disruptive, digital innovations, the approach of buying point solutions for solving specific challenges can expose companies to the complicated nature of new technologies, systems, and platforms.

Read more

Building Display Ads With Transparent Video

By Afzaal Ahmad Zeeshan
Build Web Ads With Transparent Video to Attract User Engagement

Billions of views on the Internet every day drive one of the biggest industries on the planet: advertising. The sheer size of that market and the competitive nature of vying for consumer attention results in a constant need for innovation. Readers are jaded, and display ads are blind spots.

Read more