{"id":27890,"date":"2022-05-05T08:25:08","date_gmt":"2022-05-05T08:25:08","guid":{"rendered":"http:\/\/blur-faces-in-images-in-nuxt.js"},"modified":"2022-05-05T08:25:08","modified_gmt":"2022-05-05T08:25:08","slug":"blur-faces-in-images-in-nuxt-js","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/blur-faces-in-images-in-nuxt-js\/","title":{"rendered":"Blur Faces in Images in NuxtJS"},"content":{"rendered":"

Privacy is considered paramount when delivering optimal web experiences.<\/p>\n

This post discusses how to blur human faces in images in Nuxt.js.<\/p>\n

Sandbox<\/h2>\n

We completed this project in a Codesandbox<\/a>. Fork and run it to quickly get started.<\/p>\n<\/div>\n \n

\n <\/iframe>\n <\/div>\n\n

GitHub Repository<\/h2>\n

https:\/\/github.com\/Olanetsoft\/Blur-Faces-in-Images-in-Nuxt<\/a><\/p>\n

Prerequisite<\/h1>\n

The knowledge of JavaScript and Vue.js is needed to follow along in this tutorial. The knowledge of Nuxt.js is not required but preferred.<\/p>\n

Getting Started with Nuxt.js<\/h1>\n

Nuxt.js<\/a> is the bedrock of our Vue.js project, providing structure and flexibility while allowing us to scale with confidence.<\/p>\n

It is extensible, with a robust module ecosystem and hooks engine that makes it simple to integrate our REST or GraphQL endpoints, favorite CMS, CSS frameworks, and other third-party applications.<\/p>\n

Project Setup and Installation<\/h1>\n

To create a new project, we will use the command below to scaffold a new project:<\/p>\n

    npx create-nuxt-app <project-name<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
A series of prompts will appear as a result of the command. Here are the defaults we recommend:<\/p>\n
\"Blur<\/p>\n
Next, we need to navigate the project directory and start the development server using the command below.<\/p>\n
    cd <project<\/span> name<\/span>><\/span> && yarn dev\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Nuxt.js will start a hot-reloading development environment accessible by default at http:\/\/localhost:3000<\/code><\/p>\n
    npm<\/span> install<\/span> @nuxtjs<\/span>\/cloudinary\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
Configuring Cloudinary in Nuxt.js<\/h1>\n
First, we need to modify the nuxt.config.js<\/code> file by adding @nuxtjs\/cloudinary<\/code> as a module in the modules section:<\/p>\n
    modules: [\n        '@nuxtjs\/cloudinary'<\/span>, \/\/add this<\/span>\n      ],\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Next, we need to configure Cloudinary by adding a cloudinary<\/code> section below the modules<\/code> section as shown below:<\/p>\n
    modules: [\n        '@nuxtjs\/cloudinary'<\/span>,\n      ],\n    \n    \/\/ add this<\/span>\n    cloudinary<\/span>: {\n        cloudName<\/span>: '<your-cloud-name>'<\/span>,\n        useComponent<\/span>: true<\/span>,\n    },\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
The useComponent<\/code> flag set to true<\/code> lets us use the built-in Cloudinary components. Our cloud name<\/code> is obtained from our Cloudinary dashboard.<\/p>\n
Building the image component<\/h1>\n
With our project fully set up and configured, we can start building the image.<\/p>\n
We\u2019ll create a new file called BlurImage``s``.vue<\/code> in the components<\/code> folder and update it with the code snippet below.<\/p>\n
    <template<\/span>><\/span>\n      <div<\/span>\n        class<\/span>=\"relative flex items-top justify-center min-h-screen bg-gray-100 sm:items-center sm:pt-0\"<\/span>\n      ><\/span>\n        <div<\/span> class<\/span>=\"max-w-4xl mx-auto sm:px-6 lg:px-8\"<\/span>><\/span>\n          <h1<\/span>\n            class<\/span>=\"text-center mt-10 text-3xl leading-9 font-extrabold text-gray-900\"<\/span>\n          ><\/span>\n            Blur Faces in Images in Nuxt\n          <\/h1<\/span>><\/span>\n          <div<\/span> class<\/span>=\"mt-8 bg-white overflow-hidden shadow sm:rounded-lg p-6\"<\/span>><\/span>\n          <\/div<\/span>><\/span>\n          <div<\/span> class<\/span>=\"mt-8 bg-white overflow-hidden shadow sm:rounded-lg p-6\"<\/span>><\/span>\n          <\/div<\/span>><\/span>\n          <div<\/span> class<\/span>=\"mt-8 bg-white overflow-hidden shadow sm:rounded-lg p-6\"<\/span>><\/span>\n          <\/div<\/span>><\/span>\n        <\/div<\/span>><\/span>\n      <\/div<\/span>><\/span>\n    <\/template<\/span>><\/span>\n    <script<\/span>><\/span>\n    export<\/span> default<\/span> {\n      name<\/span>: \"BlurImages\"<\/span>,\n    };\n    <\/span><\/script<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Next, we will import the BlurImage``s<\/code> component into the pages\/index.vue<\/code> file with the code snippet below.<\/p>\n
    <template<\/span>><\/span>\n      <BlurImages<\/span>\/><\/span>\n    <\/template<\/span>><\/span>\n    <script<\/span>><\/span>\n    \n    export<\/span> default<\/span> {\n      name<\/span>: 'IndexPage'<\/span>\n    }\n    <\/span><\/script<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Let\u2019s open our browser, and we should see something similar to the image below.<\/p>\n
\"Blur<\/p>\n
Then we will update the components\/BlurImage``s``.vue<\/code> component by rendering images using the Cloudinary image component.<\/p>\n
    <template<\/span>><\/span>\n      <div<\/span>\n        class<\/span>=\"relative flex items-top justify-center min-h-screen bg-gray-100 sm:items-center sm:pt-0\"<\/span>\n      ><\/span>\n        <div<\/span> class<\/span>=\"max-w-4xl mx-auto sm:px-6 lg:px-8\"<\/span>><\/span>\n          <h1<\/span>\n            class<\/span>=\"text-center mt-10 text-3xl leading-9 font-extrabold text-gray-900\"<\/span>\n          ><\/span>\n            Blur Faces in Images in Nuxt\n          <\/h1<\/span>><\/span>\n          <div<\/span> class<\/span>=\"mt-8 bg-white overflow-hidden shadow sm:rounded-lg p-6\"<\/span>><\/span>\n            <cld-image<\/span> public-id<\/span>=\"\/samples\/people\/group-picture-3.jpg\"<\/span>><\/span>\n              <cld-transformation<\/span> effect<\/span>=\"pixelate_faces\"<\/span> \/><\/span>\n            <\/cld-image<\/span>><\/span>\n          <\/div<\/span>><\/span>\n          <div<\/span> class<\/span>=\"mt-8 bg-white overflow-hidden shadow sm:rounded-lg p-6\"<\/span>><\/span>\n            <cld-image<\/span> public-id<\/span>=\"\/samples\/people\/group-picture.jpg\"<\/span>><\/span>\n              <cld-transformation<\/span> effect<\/span>=\"pixelate_faces:9\"<\/span> \/><\/span>\n            <\/cld-image<\/span>><\/span>\n          <\/div<\/span>><\/span>\n          <div<\/span> class<\/span>=\"mt-8 bg-white overflow-hidden shadow sm:rounded-lg p-6\"<\/span>><\/span>\n            <cld-image<\/span> public-id<\/span>=\"\/samples\/people\/group-picture-2.jpg\"<\/span>><\/span>\n              <cld-transformation<\/span> effect<\/span>=\"pixelate_faces:5\"<\/span> \/><\/span>\n            <\/cld-image<\/span>><\/span>\n          <\/div<\/span>><\/span>\n        <\/div<\/span>><\/span>\n      <\/div<\/span>><\/span>\n    <\/template<\/span>><\/span>\n    <script<\/span>><\/span>\n    export<\/span> default<\/span> {\n      name<\/span>: \"BlurImages\"<\/span>,\n    };\n    <\/span><\/script<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
In the code snippet above, we:<\/p>\n
We proceed to install the @nuxtjs\/cloudinary<\/a> dependency with:<\/p>\n