{"id":22444,"date":"2021-12-01T15:36:25","date_gmt":"2021-12-01T15:36:25","guid":{"rendered":"http:\/\/applying_awesome_image_effects_in_nuxt_applications_with_cloudinary"},"modified":"2022-09-23T10:11:19","modified_gmt":"2022-09-23T17:11:19","slug":"applying_awesome_image_effects_in_nuxt_applications_with_cloudinary","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/applying_awesome_image_effects_in_nuxt_applications_with_cloudinary","title":{"rendered":"Applying Awesome Image Effects in Nuxt Applications With Cloudinary"},"content":{"rendered":"

Nowadays, no way can we build modern apps for the web without considering visuals, which are one of the most efficient ways of communicating online. However, improvements in image quality over the years have exacted a price in larger files, slowing down page loads, especially in low-bandwidth regions or on mobile devices. To resolve that conundrum, turn to Cloudinary, a platform that offers the infrastructure for managing images in web apps. Additionally, Cloudinary\u2019s reliable APIs serve visuals through multiple, fast content delivery networks (CDNs).<\/p>\n

This article describes how to save, display, and transform images in a Nuxt app with Cloudinary. Of remarkable help is Cloudinary\u2019s npm package, which abstracts all the processes in Nuxt. You upload images with this.$cloudinary.upload<\/code>and view them with the custom, out-of-the-box component <cld-image\/><\/code>.<\/p>\n

Getting Started With Nuxt<\/h2>\n

First, integrate Cloudinary with Nuxt by means of a simple project, in which you\u2019ll upload an image to Cloudinary and then transform the image. For the code for a more complex app, check out the CloudyBadge project<\/a>.<\/p>\n

Follow these steps:<\/p>\n

    \n
  1. \n

    Verify if you have installed Node.js on our computer by typing this command on a terminal:<\/p>\n

    node -v<\/code><\/p>\n

    If the output shows that Node.js is not in your computer, download the latest version<\/a>.<\/p>\n<\/li>\n

  2. \n

    Scaffold a new project called nuxt-cloudinary<\/code> with this npm command:<\/p>\n

    npx create-nuxt-app nuxt-cloudinary<\/code><\/p>\n

    After a few installations, several prompts are displayed. Pick as many settings as you desire, but be sure to choose Universal (SSG\/SSR)<\/strong> for rendering.<\/p>\n

    \"Universal\"<\/p>\n<\/li>\n

  3. \n

    Go to the nuxt-cloudinary<\/code> directory with the command cd nuxt-cloudinary<\/code> and then launch your server by typing npm run dev<\/code>.<\/p>\n<\/li>\n

  4. \n

    Optional.<\/strong> Clone the project\u2019s complete code on GitHub<\/a> to your machine. Having a copy of the code handy makes it easier to follow the next steps.<\/p>\n<\/li>\n<\/ol>\n

    Getting Started With Cloudinary<\/h2>\n

    If you don\u2019t have one yet, sign up<\/a> for a free Cloudinary account, which offers you credits for transformations, storage, and bandwidth. Alternatively, upgrade to a paid account for more credits and other features.<\/p>\n

    Installation<\/h3>\n

    Do the following:<\/p>\n

      \n
    1. \n

      Install the @nuxtjs\/cloudinary<\/code> dependency to your Nuxt project. Type:<\/p>\n

      npm install @nuxtjs\/cloudinarynpm install @nuxtjs\/cloudinary<\/code><\/p>\n<\/li>\n

    2. \n

      Add @nuxtjs\/cloudinary<\/code> as a module in the modules<\/code> sections of your nuxt.config.js<\/code> file:<\/p>\n

      export default {\n  modules: [\n    '@nuxtjs\/cloudinary'\n  ]\n}\n<\/code><\/pre>\n<\/li>\n
    3. \n
      Create a .env<\/code> file to hold your three credentials:<\/p>\n
      CLOUDNAME=YOUR_CLOUD_NAME\nAPI_KEY=YOUR_API_KEY\nAPI_SECRET=YOUR_API_SECRET\n<\/code><\/pre>\n
      The credentials\u2019 values are displayed on your Cloudinary dashboard.<\/p>\n<\/li>\n
    4. \n
      Open the nuxt.config.js<\/code> file, which was generated in your project\u2019s root directory by create-nuxt<\/code>, and create a Cloudinary object that encompasses the credentials in your .env<\/code> file:<\/p>\n
      cloudinary: {\n    cloudName: process.env.CLOUDNAME,\n    apiKey: process.env.API_KEY, \n    apiSecret: process.env.API_SECRET, \n    useComponent: true \n}\n<\/code><\/pre>\n<\/li>\n<\/ol>\n
      Note:<\/strong> 
      Setting useComponent<\/code> to true<\/code> means that you can use the out-of-the-box Vue components<\/a> with the @nuxtjs\/cloudinary<\/code> library.<\/p><\/div>\n
      Your nuxt.config.js<\/code> file now reads like this:<\/p>\n
      export<\/span> default<\/span> {\n  head<\/span>: {\n    title<\/span>: 'nuxt-cloudinary'<\/span>,\n    htmlAttrs<\/span>: {\n      lang<\/span>: 'en'<\/span>\n    },\n    meta<\/span>: [\n      { charset<\/span>: 'utf-8'<\/span> },\n      { name<\/span>: 'viewport'<\/span>, content<\/span>: 'width=device-width, initial-scale=1'<\/span> },\n      { hid<\/span>: 'description'<\/span>, name<\/span>: 'description'<\/span>, content<\/span>: ''<\/span> }\n    ],\n    link<\/span>: [\n      { rel<\/span>: 'icon'<\/span>, type<\/span>: 'image\/x-icon'<\/span>, href<\/span>: '\/favicon.ico'<\/span> }\n    ]\n  },\n  components<\/span>: true<\/span>,\n  modules<\/span>: [\n    '@nuxtjs\/cloudinary'<\/span>\n  ],\n  \/\/ Build configuration: https:\/\/go.nuxtjs.dev\/config-build.<\/span>\n  build<\/span>: {\n  },\n  cloudinary<\/span>: {\n    cloudName<\/span>: process.env.CLOUDNAME,\n    apiKey<\/span>: process.env.API_KEY, \/\/Needed only if you are using server-side upload.<\/span>\n    apiSecret<\/span>: process.env.API_SECRET, \/\/Needed only if you are using server-side upload.<\/span>\n    useComponent<\/span>: true<\/span> \/\/Use Vue components.<\/span>\n  }\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
      Creation of an Upload Preset<\/h2>\n
      Upload preset is a default behavior that reduces repetition on upload requests through saved settings. You can set up multiple presets.<\/p>\n
      To create an upload preset:<\/p>\n
        \n
      1. \n
        Click the Upload<\/strong> tab near the top of your Cloudinary settings page.<\/p>\n
        Under Upload presets<\/strong>, two modes are displayed: unsigned and signed. A signed upload preset applies to secured (server-side) uploads; an unsigned one, browser (client-side) uploads.\n\"Upload<\/p>\n<\/li>\n
      2. \n
        Note the name of the unsigned upload preset, which you\u2019ll need later for client-side uploads.<\/p>\n<\/li>\n<\/ol>\n
        Image Uploads<\/h2>\n
        To upload images to Cloudinary:<\/p>\n
          \n
        1. \n
          Go to your component (pages\/index.vue<\/code>) and add the <input\/><\/code> element that uploads files.<\/p>\n
          <input<\/span>\n  id<\/span>=\"file-input\"<\/span>\n  type<\/span>=\"file\"<\/span>\n  ref<\/span>=\"fileInput\"<\/span>\n  accept<\/span>=\"image\/*\"<\/span>\n  @change<\/span>=\"onFilePicked\"<\/span>\n  required<\/span>\n\/><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
          @change<\/code> triggers the onFilePicked<\/code> function when you select an image; ref<\/code> gets data from <input\/><\/code>.<\/p>\n<\/li>\n
        2. \n
          Add data<\/code> to your components to manage their state.<\/p>\n
          data() {\n  return<\/span> {\n    formData<\/span>: {\n      imageName<\/span>: \"\"<\/span>,\n      imageUrl<\/span>: ''<\/span>\n    }\n  }\n};\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n<\/li>\n<\/ol>\n
          You store the image name and URL before uploading the image. When you attach the image, onFilePicked<\/code> sends the name and the image in Base64 format to Cloudinary through the FileReader Web API.<\/p>\n
          methods: {\n  onFilePicked(event) {\n    const<\/span> files = event.target.files;\n    const<\/span> fileReader = new<\/span> FileReader();\n    fileReader.addEventListener(\"load\"<\/span>, () => {\n      this<\/span>.formData.imageUrl = fileReader.result;\n      console<\/span>.log(this<\/span>.formData.imageUrl)\n    });\n    fileReader.readAsDataURL(files[0<\/span>]);\n    const<\/span> fileName = this<\/span>.$refs.fileInput.value;\n    this<\/span>.formData.imageName = fileName.split(\"\\\\\"<\/span>).pop().replace(\/\\.[^\/.]+$\/<\/span>, \"\"<\/span>);\n  }\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
          Create a button to trigger the function that initiates the upload:<\/p>\n
          <button @click="cloudinary">Upload<\/button><\/code><\/p>\n
          Within that function is this.$cloudinary.upload<\/code>, which is available globally through the library you installed.<\/p>\n
          methods: {\n  cloudinary() {\n    this<\/span>.$cloudinary\n      .upload(this<\/span>.formData.imageUrl, {\n        public_id<\/span>: this<\/span>.formData.imageName,\n        folder<\/span>: \"content\"<\/span>,\n        upload_preset<\/span>: \"your-preset-name\"<\/span>\n      })\n      .then(res<\/span> =><\/span> console<\/span>.log(res))\n      .catch(err<\/span> =><\/span> cosole.log(err));\n  },\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
          You\u2019re sending the image in Base64 format in this.formData.imageUrl<\/code>. The public ID (as denoted by public_id<\/code>) represents the image name. The folder takes the name of the Cloudinary folder where you save the image, and then you add the name of the upload preset you created earlier.<\/p>\n
          Here\u2019s an example of the response, which contains all the relevant information, including a link to the image hosted on Cloudinary, the image format, and the public ID:<\/p>\n
          {\n  access_mode: "public"\n  asset_id: "952a355221ce840b1f4fcd91b93a2021"\n  bytes: 12701\n  created_at: "2021-10-07T07:55:48Z"\n  etag: "1bd19b75a275ee715b1130e72ba6e985"\n  existing: false\n  format: "png"\n  height: 1080\n  placeholder: false\n  public_id: "content\/Bmvp (1)"\n  resource_type: "image"\n  secure_url: "https:\/\/res.cloudinary.com\/dfkuxnesz\/image\/upload\/v1633593348\/content\/Bmvp%20%281%29.png"\n  signature: "d74486803815e872ca92ddabbc361351ad13ea83"\n  tags: []\n  type: "upload"\n  url: "http:\/\/res.cloudinary.com\/dfkuxnesz\/image\/upload\/v1633593348\/content\/Bmvp%20%281%29.png"\n  version: 1633593348\n  version_id: "6b3e6b601197ac0ba28bc9da5a377b16"\n  width: 1080\n}\n<\/code><\/pre>\n
          Display of Cloudinary Images Through Vue Components<\/h2>\n
          Now display the uploaded image with the Vue component <cld-image\/><\/code>, which requires a few parameters, including the public ID you received after uploading the image.<\/p>\n
          <cld-image<\/span>\n  public-id<\/span>=\"your-public-image-id\"<\/span>\n  width<\/span>=\"200\"<\/span>\n  crop<\/span>=\"scale\"<\/span>\n  fetchFormat<\/span>=\"auto\"<\/span>\n  quality<\/span>=\"auto\"<\/span>\n  loading<\/span>=\"lazy\"<\/span>\n\/><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
          Be sure to replace your-public-image-id<\/code> with your image\u2019s public ID. The image then shows up in your app, as in this example in the case of two uploaded images:<\/p>\n
          \"Nuxt<\/p>\n
          Image Transformation<\/h2>\n
          Suppose you want to automatically create a circular image centered on each person\u2019s face in the above example. That would normally be tough to do in the browser, but not with Cloudinary. Simply transform the images with <cld-transformation\/><\/code>, like this:<\/p>\n
          <cld-image\n  public-id="\/content\/woman"\n  fetchFormat="auto"\n  quality="auto"\n  loading="lazy"\n>\n  <cld-transformation\n    width="200"\n    height="200"\n    gravity="face"\n    crop="fill"\n    radius="max"\n  \/>\n<\/cld-image>\n<\/code><\/pre>\n
          Here, you set the width and height to 200, resize the image around each person\u2019s face with crop<\/code>, and round off the image border by setting the radius to the maximum. The two transformed images look like this:<\/p>\n
          \"Circle<\/p>\n
          Easy, right? The nice circular headshots are now ready for display on a profile page. You could also feature them on physical assets like conference badges and ID cards.<\/p>\n
          The complete code repository<\/a> is on GitHub.<\/p>\n
          Taking Off With Cloudinary<\/h2>\n
          Cloudinary offers numerous valuable ways for managing images in apps at scale, enabling you to generate smaller yet high-quality images, correspondingly enhancing page performance. Additionally, other Vue components, including <cld-video\/><\/code><\/a> for managing videos, are available from Cloudinary.<\/p>\n
          All those features are especially helpful for creating social-media apps or photo-management systems, or for scaling side projects. An example: Build a fun photo-management app with Nuxt so that your users can upload pictures to one handy location. Afterwards, the app can edit the pictures with Cloudinary\u2019s image-transformation capabilities for a similar look and a consistent user experience.<\/p>\n
          Cloudinary is also a big boon for authentication apps, e.g., you can upload profile photos and store their URLs in a database for later use, or pull those photos with the Vue component and set their radius, center them, and round off the border for an appealing look.<\/p>\n
          Let your imagination fly! Build a fun Nuxt app or spiff up an existing one. As a start, register<\/a> for a free Cloudinary account and explore the platform\u2019s site for details on how to forge impressive image effects.<\/p>\n
          About the Author<\/h2>\n
          David Atanda<\/a> is a front-end developer and technical writer dedicated to making the web more accessible while building scalable and high-performance web applications.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":22445,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[165,315],"class_list":["post-22444","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-image-transformation","tag-vue"],"acf":[],"yoast_head":"\nHow to Apply Riveting Image Effects in Nuxt Applications With Cloudinary<\/title>\n<meta name=\"description\" content=\"A step-by-step tutorial on how to save, display, and transform images in a Nuxt application with Cloudinary.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/applying_awesome_image_effects_in_nuxt_applications_with_cloudinary\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Applying Awesome Image Effects in Nuxt Applications With Cloudinary\" \/>\n<meta property=\"og:description\" content=\"A step-by-step tutorial on how to save, display, and transform images in a Nuxt application with Cloudinary.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/applying_awesome_image_effects_in_nuxt_applications_with_cloudinary\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-12-01T15:36:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-23T17:11:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649720281\/Web_Assets\/blog\/Image-transformations-NuxtJS\/Image-transformations-NuxtJS-png?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"1540\" \/>\n\t<meta property=\"og:image:height\" content=\"847\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/applying_awesome_image_effects_in_nuxt_applications_with_cloudinary#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/applying_awesome_image_effects_in_nuxt_applications_with_cloudinary\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Applying Awesome Image Effects in Nuxt Applications With Cloudinary\",\"datePublished\":\"2021-12-01T15:36:25+00:00\",\"dateModified\":\"2022-09-23T17:11:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/applying_awesome_image_effects_in_nuxt_applications_with_cloudinary\"},\"wordCount\":9,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/applying_awesome_image_effects_in_nuxt_applications_with_cloudinary#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720281\/Web_Assets\/blog\/Image-transformations-NuxtJS\/Image-transformations-NuxtJS.png?_i=AA\",\"keywords\":[\"Image Transformation\",\"Vue\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2021\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/applying_awesome_image_effects_in_nuxt_applications_with_cloudinary\",\"url\":\"https:\/\/cloudinary.com\/blog\/applying_awesome_image_effects_in_nuxt_applications_with_cloudinary\",\"name\":\"How to Apply Riveting Image Effects in Nuxt Applications With Cloudinary\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/applying_awesome_image_effects_in_nuxt_applications_with_cloudinary#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/applying_awesome_image_effects_in_nuxt_applications_with_cloudinary#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720281\/Web_Assets\/blog\/Image-transformations-NuxtJS\/Image-transformations-NuxtJS.png?_i=AA\",\"datePublished\":\"2021-12-01T15:36:25+00:00\",\"dateModified\":\"2022-09-23T17:11:19+00:00\",\"description\":\"A step-by-step tutorial on how to save, display, and transform images in a Nuxt application with Cloudinary.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/applying_awesome_image_effects_in_nuxt_applications_with_cloudinary#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/applying_awesome_image_effects_in_nuxt_applications_with_cloudinary\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/applying_awesome_image_effects_in_nuxt_applications_with_cloudinary#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720281\/Web_Assets\/blog\/Image-transformations-NuxtJS\/Image-transformations-NuxtJS.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720281\/Web_Assets\/blog\/Image-transformations-NuxtJS\/Image-transformations-NuxtJS.png?_i=AA\",\"width\":1540,\"height\":847},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/applying_awesome_image_effects_in_nuxt_applications_with_cloudinary#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Applying Awesome Image Effects in Nuxt Applications With Cloudinary\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Apply Riveting Image Effects in Nuxt Applications With Cloudinary","description":"A step-by-step tutorial on how to save, display, and transform images in a Nuxt application with Cloudinary.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/applying_awesome_image_effects_in_nuxt_applications_with_cloudinary","og_locale":"en_US","og_type":"article","og_title":"Applying Awesome Image Effects in Nuxt Applications With Cloudinary","og_description":"A step-by-step tutorial on how to save, display, and transform images in a Nuxt application with Cloudinary.","og_url":"https:\/\/cloudinary.com\/blog\/applying_awesome_image_effects_in_nuxt_applications_with_cloudinary","og_site_name":"Cloudinary Blog","article_published_time":"2021-12-01T15:36:25+00:00","article_modified_time":"2022-09-23T17:11:19+00:00","og_image":[{"width":1540,"height":847,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649720281\/Web_Assets\/blog\/Image-transformations-NuxtJS\/Image-transformations-NuxtJS-png?_i=AA","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/applying_awesome_image_effects_in_nuxt_applications_with_cloudinary#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/applying_awesome_image_effects_in_nuxt_applications_with_cloudinary"},"author":{"name":"","@id":""},"headline":"Applying Awesome Image Effects in Nuxt Applications With Cloudinary","datePublished":"2021-12-01T15:36:25+00:00","dateModified":"2022-09-23T17:11:19+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/applying_awesome_image_effects_in_nuxt_applications_with_cloudinary"},"wordCount":9,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/applying_awesome_image_effects_in_nuxt_applications_with_cloudinary#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720281\/Web_Assets\/blog\/Image-transformations-NuxtJS\/Image-transformations-NuxtJS.png?_i=AA","keywords":["Image Transformation","Vue"],"inLanguage":"en-US","copyrightYear":"2021","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/applying_awesome_image_effects_in_nuxt_applications_with_cloudinary","url":"https:\/\/cloudinary.com\/blog\/applying_awesome_image_effects_in_nuxt_applications_with_cloudinary","name":"How to Apply Riveting Image Effects in Nuxt Applications With Cloudinary","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/applying_awesome_image_effects_in_nuxt_applications_with_cloudinary#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/applying_awesome_image_effects_in_nuxt_applications_with_cloudinary#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720281\/Web_Assets\/blog\/Image-transformations-NuxtJS\/Image-transformations-NuxtJS.png?_i=AA","datePublished":"2021-12-01T15:36:25+00:00","dateModified":"2022-09-23T17:11:19+00:00","description":"A step-by-step tutorial on how to save, display, and transform images in a Nuxt application with Cloudinary.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/applying_awesome_image_effects_in_nuxt_applications_with_cloudinary#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/applying_awesome_image_effects_in_nuxt_applications_with_cloudinary"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/applying_awesome_image_effects_in_nuxt_applications_with_cloudinary#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720281\/Web_Assets\/blog\/Image-transformations-NuxtJS\/Image-transformations-NuxtJS.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720281\/Web_Assets\/blog\/Image-transformations-NuxtJS\/Image-transformations-NuxtJS.png?_i=AA","width":1540,"height":847},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/applying_awesome_image_effects_in_nuxt_applications_with_cloudinary#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Applying Awesome Image Effects in Nuxt Applications With Cloudinary"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720281\/Web_Assets\/blog\/Image-transformations-NuxtJS\/Image-transformations-NuxtJS.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22444","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=22444"}],"version-history":[{"count":4,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22444\/revisions"}],"predecessor-version":[{"id":25173,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22444\/revisions\/25173"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/22445"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=22444"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=22444"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=22444"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}