DEV Community: Jakz ⚡

How to fix "Avoid mutating a prop directly" in Vue

Jakz ⚡ — Thu, 12 Sep 2019 07:54:04 +0000

Have you ever face this error -

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value.

The reason why Vue doesn’t recommend to modify the prop data because if the parent component has a different value, the data in the child component will be re-render.

How to solve it?

I’m gonna create a simple Vue component consist of input with v-model attached to it and another Card component that accepts the v-model data as a props and displays it.

This is how the interface will looks alike.

App.vue



<template>
  <div id="app" class="max-w-sm mx-auto py-16">
    <div class="flex flex-col mb-6">
      <div class="mb-2">
        <label for="inline-full-name">Enter your number</label>
      </div>
      <div class="w-full">
        <input
          v-model="number"
          id="inline-full-name"
          class="input"
          type="number"
        />
      </div>
    </div>
    <Card :number="number" />
  </div>
</template>

<script>
import Card from "@/components/Card";

export default {
  name: "app",
  components: {
    Card
  },
  data() {
    return {
      number: 20
    };
  }
};
</script>

<style lang="postcss">
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

label {
  @apply blocktext-gray-500font-boldmb-1pr-4text-left;
}
.input {
  @apply bg-gray-200appearance-noneborder-2border-gray-200roundedw-fullpy-2px-4text-gray-700leading-tight;
}
.input:focus {
  @apply outline-nonebg-whiteborder-purple-500;
}
</style>

Card.vue



<template>
  <div
    class="bg-red-100 flex justify-between items-center border border-red-400 text-red-700 px-4 py-3 rounded relative"
    role="alert"
  >
    <strong class="font-bold">Your number is {{ number }}</strong>
    <svg
      class="fill-current h-6 w-6 text-red-500"
      @click.prevent="addNumber"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="002424"
      width="24"
      height="24"
    >
      <path
        class="heroicon-ui"
        d="M1711a1100102h-4v4a11001-20v-4H7a110010-2h4V7a1100120v4h4z"
      />
    </svg>
  </div>
</template>

<script>
export default {
  props: {
    number: {
      required: true
    }
  },
  methods: {
    addNumber() {
      this.number++;
    }
  }
};
</script>

This is how the interface works.

Every-time user type in the input, it will reflect directly in the card below. It’s because we're passing v-model: number as prop in the Card component.

Any value that user’s typing will reflect immediately.

My next question is what’s going to happen if we’re going to manipulate the data in the child component, which is the Card component.

I’ll add one button in the Card component that triggers a methodthat increase the value.

Card.vue



<script>
export default {
  props: {
    number: {
      required: true
    }
  },
  methods: {
    addNumber() {
      this.number++;
    }
  }
};
</script>

Surprisingly, this is what’s happening.

When we want to increase the value in the child component, Vue gives us an error message that this is not recommended way.

Why is it not recommend?

If the data v-model in the parent is changed, the data in the child component will re-render.

For example, I add any number in the input, and I increase the number using the plus button. What happens if I add a new value in the input?

The value that we increased just now is getting a new value from the input.

Get it?

How do we solve it?

Since we cannot modify the props data directly, so we need to replicate the props data into a variable.

In the addNumber methods, assign the props into a new variable, and do the calculation.



let myNumber = this.number;
myNumber++;

The next question is, how do we send the new number value to the parent? 🤔

Thank god, there is a custom event to solve it. We need to add the custom event in the addNumber methods.



this.$emit("update-number", myNumber);

It’s mean that we’re sending a myNumber data through update-number event name. Since we’re sending a custom data, the parent component needs to listen to the update-number event.

In the App.vue, add the listener to the Card component.



<Card:number="number" @update-number="update"/>

If there’s an emit event called update-number triggered in the child component, update function will be called.

In the App.vue file, add the update function in the methods section.



methods:{
    update(number){
        this.number=number;
    }
}

Remember, when we’re sending the custom event, we’re sending myNumber as a parameter. So, in the update function need to have one parameter to get the data.



this.$emit("update-number", myNumber);

After that, the new value we get from the custom event will be assigned to the number data. Since, the child component data will be re-render if every time the props data changed, we can see the instant update in the Card component.

Source Code

App.vue



<template>
  <div id="app" class="max-w-sm mx-auto py-16">
    <div class="flex flex-col mb-6">
      <div class="mb-2">
        <label for="inline-full-name">Enter your number</label>
      </div>
      <div class="w-full">
        <input
          v-model="number"
          id="inline-full-name"
          class="input"
          type="number"
        />
      </div>
    </div>
    <Card :number="number" @update-number="update" />
  </div>
</template>

<script>
import Card from "@/components/Card";
export default {
  name: "app",
  components: {
    Card
  },
  data() {
    return {
      number: 20
    };
  },
  methods: {
    update(number) {
      this.number = number;
    }
  }
};
</script>

<style lang="postcss">
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

label {
  @apply block text-gray-500 font-bold mb-1 pr-4 text-left;
}
.input {
  @apply bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight;
}
.input:focus {
  @apply outline-none bg-white border-purple-500;
}
</style>

Card.vue



<template>
  <div
    class="bg-red-100 flex justify-between items-center border border-red-400 text-red-700 px-4 py-3 rounded relative"
    role="alert"
  >
    <strong class="font-bold">Your number is {{ number }}</strong>
    <svg
      class="fill-current h-6 w-6 text-red-500 cursor-pointer"
      @click.prevent="addNumber"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      width="24"
      height="24"
    >
      <path
        class="heroicon-ui"
        d="M17 11a1 1 0 0 1 0 2h-4v4a1 1 0 0 1-2 0v-4H7a1 1 0 0 1 0-2h4V7a1 1 0 0 1 2 0v4h4z"
      />
    </svg>
  </div>
</template>

<script>
export default {
  props: {
    number: {
      required: true
    }
  },
  methods: {
    addNumber() {
      let myNumber = this.number;
      myNumber++;
      this.$emit("update-number", myNumber);
    }
  }
};
</script>

Originally published at https://jakzaizzat.com

How to build a Reusable Vuejs modal component

Jakz ⚡ — Tue, 09 Jul 2019 08:16:57 +0000

Modal is one of the essential components in the user interface. It's good to display or receive a response from the user without moving to other pages. I'm going to build a Modal component and reusable in every page.

Modal that we're going to build is a simple modal with static content inside it.

Create a VueJS component

Create a new file in your Vue apps and define them as Vue components. Set the component name in the script section.

Modal.vue

    <script>
        export default {
            name: 'Modal'
        };
    </script>

I'll be using TailwindCSS to style the components.

Let me know if you need any tutorial/guide on building UI with TailwindCSS.

Modal.vue

    <template>
      <div class="modal">
        <div class="container">
          <div class="modal__title">Direction</div>
          <p>Get a direction with your favourite apps</p>
          <a href="#" class="btn gmaps">
            <img src="https://img.icons8.com/color/420/google-maps.png"> Google Maps
          </a>
          <a href="#" class="btn waze">
            <img src="https://img.icons8.com/color/420/waze.png"> Waze
          </a>
          <button class="mt-3 border-b border-teal font-semibold">Close</button>
        </div>
      </div>
    </template>

    <script>
        export default {
            name: 'Modal'
        };
    </script>


    <style lang="css" scoped>
        .modal {
          background-color: rgba(0, 0, 0, 0.7);
      }
    </style>

Call the component in your page

For example, I want to call this component on my index page. First of all, import the Vue component first and set into the components object.

Make sure you're calling the correct path.

App.vue

    <script>
    import ModalDirection from "@/components/common/Modal";
    export default {
      components: {
        ModalDirection
      }
    };
    </script>

You've successfully imported a component into the page. You can use the component by using this tag.

<modal-direction></modal-direction>

<ModalDirection></ModalDirection>

App.vue

<template>
  <div>
    <modal-direction></modal-direction>
  </div>
</template>

<script>
import ModalDirection from "@/components/common/Modal";
export default {
  components: {
    ModalDirection
  }
};
</script>

Add a function to the Modal

One of the features of modal is it's able to be visible or not. It'll be visible when other element triggers a function. How to control the function between component 🤔?

We need to add the new data binding in the App.vue, and we called it modalOpen and set it to false. We don't want the modal visible when the user enters the page.

App.vue

    <script>
    import ModalDirection from "@/components/common/Modal";
    export default {
      components: {
        ModalDirection
      },
      data() {
        return {
          modalOpen: false
        };
      }
    };
    </script>

Let's create a button to toggle the value of modalOpen.

App.vue

<template>
  <div>
    <button class="btn" @click="openModal">Open Modal</button>
    <modal-direction></modal-direction>
  </div>
</template>

<script>
import ModalDirection from "@/components/common/Modal";
export default {
  components: {
    ModalDirection
  },
    data() {
        return {
            modalOpen: false
        }
    },
    methods: {
        openModal() {
            this.modalOpen = !this.modalOpen;
        }    
    }
};
</script>

Then, assigned the v-model - modalOpen to the ModalDirection component.

 <modal-direction v-model="modalOpen"></modal-direction>

Receive a data from parent - in component

Now, the data has been passed into the component. Let’s edit our component to make sure it well received. We’ll write a prop to accept the data from the directModal - model that we just wrote just now.

Modal.vue

    <template>
      <div class="modal">
        <div class="container">
          <div class="modal__title">Direction</div>
          <p>Get a direction with your favourite apps</p>
          <a href="#" class="btn gmaps">
            <img src="https://img.icons8.com/color/420/google-maps.png"> Google Maps
          </a>
          <a href="#" class="btn waze">
            <img src="https://img.icons8.com/color/420/waze.png"> Waze
          </a>
          <button class="mt-3 border-b border-teal font-semibold">Close</button>
        </div>
      </div>
    </template>

    <script>
        export default {
            name: 'Modal',
            props: {
                value: {
                    required; true
                }
            }
        };
    </script>


    <style lang="css" scoped>
        .modal {
          background-color: rgba(0, 0, 0, 0.7);
      }
    </style>

Cool. Now we’re able to access the data from the parent 🎉. You can access the data from the v-model by using this code.

Template tags

    {{ value }}

Script Tags

    {{ this.value }}

Control the modal visibility

We should show the modal if the component receives true from the parent. Right now, the modal is full visibility. We should control the visibility of the modal from the value.

Luckily, we have the v-show to simplify all of this. Just add the v-show tag in the modal tag.

Modal.vue

    <template>
      <div class="modal" v-show="value">
        <div class="container">
          <div class="modal__title">Direction</div>
          <p>Get a direction with your favourite apps</p>
          <a href="#" class="btn gmaps">
            <img src="https://img.icons8.com/color/420/google-maps.png"> Google Maps
          </a>
          <a href="#" class="btn waze">
            <img src="https://img.icons8.com/color/420/waze.png"> Waze
          </a>
          <button class="mt-3 border-b border-teal font-semibold">Close</button>
        </div>
      </div>
    </template>

Modal only visible if the value is set to true.

Send the signal to the parent

Cool, now the modal appears when we clicked the button. Unluckily, there is one last problem. How do we close the modal?

Right now, the parent is controlling the modal from the value - v-model. For now, let’s add method to the button close to pass the data to the parent using custom event.

Modal.vue

    <template>
      <div class="modal" v-show="value">
        <div class="container">
          <div class="modal__title">Direction</div>
          <p>Get a direction with your favourite apps</p>
          <a href="#" class="btn gmaps">
            <img src="https://img.icons8.com/color/420/google-maps.png"> Google Maps
          </a>
          <a href="#" class="btn waze">
            <img src="https://img.icons8.com/color/420/waze.png"> Waze
          </a>
          <button @click.prevent="close"
 class="mt-3 border-b border-teal font-semibold">Close</button>
        </div>
      </div>
    </template>

    <script>
        export default {
            name: 'Modal',
            props: {
                value: {
                    required: true
                }
            }
              methods: {
                close() {
                  this.$emit("input", !this.value);
                }            
            }
        };
    </script>


    <style lang="css" scoped>
        .modal {
          background-color: rgba(0, 0, 0, 0.7);
      }
    </style>

💡 Quick tips: Use .prevent to disabled default action of the event will not be triggered. It can be used for button, form, anchor link, and many more.

Since, we’re passing the data through v-model in the component, by the default the event will be called as an input as the event.

[image:149F520D-B9CC-46C7-8AB7-507F1C172B76-7088-0000631BC02B8581/modal.gif]

Congratulations 🎉

Now, the modal is working. You can turn it on and off by using a component. The best part is reusable. You may use it in a different page without writing the code again.

Source Code

Modal.vue

    <template>
      <div class="modal" v-show="value">
        <div class="container">
          <div class="modal__title">Direction</div>
          <p>Get a direction with your favourite apps</p>
          <a href="#" class="btn gmaps">
            <img src="https://img.icons8.com/color/420/google-maps.png"> Google Maps
          </a>
          <a href="#" class="btn waze">
            <img src="https://img.icons8.com/color/420/waze.png"> Waze
          </a>
          <button @click.prevent="close"
 class="mt-3 border-b border-teal font-semibold">Close</button>
        </div>
      </div>
    </template>

    <script>
        export default {
            name: 'Modal',
            props: {
                value: {
                    required: true
                }
            }
              methods: {
                close() {
                  this.$emit("input", !this.value);
                }            
            }
        };
    </script>


    <style lang="css" scoped>
        .modal {
          background-color: rgba(0, 0, 0, 0.7);
      }
    </style>

App.vue

<template>
  <div>
    <button class="btn" @click="openModal">Open Modal</button>
    <modal-direction></modal-direction>
  </div>
</template>

<script>
import ModalDirection from "@/components/common/Modal";
export default {
  components: {
    ModalDirection
  },
    data() {
        return {
            modalOpen: false
        }
    },
    methods: {
        openModal() {
            this.modalOpen = !this.modalOpen;
        }    
    }
};
</script>

Originally published at https://jakzaizzat.com

How to pass variable to inline background image in Vue

Jakz ⚡ — Wed, 15 May 2019 12:30:34 +0000

Passing a style binding into Vue is easy. You can pass like this

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

Example from Vue official website

You can use directly from the variable like this

<div class="progress">
   <div class="progress__fill" :style="{width: progress}"></div>
</div>

<script>
export default {
    props : ['percent'],
    data() {
        return {
            progress: this.percent + '%'
        }
    }
}
</script>

If you’re same like me, which is I liked to use image as a background image into the div.

I think this kind of method will make the div has a consistent size when the browser is changing and can handle different type of image size.

Normal HTML would look like this

<div class="box" style="background-image: url('<https://vuejs.org/images/logo.png>')"></div>

But how would you pass the data if the background image is dependent on the data binding; It’s a little bit messy because we need to deal with special characters in one string.

There are 2 ways to handle it.

1. If you have a static data

<template>
    <div class=" bg-no-repeat bg-cover  bg-white hero relative" :style="{ backgroundImage: `url(${backgroundUrl})` }"></div>
</template>

<script>
import backgroundUrl from '~/assets/img/bg-wp.png'
export default {
  data() {
    return {
      backgroundUrl
    }
  }
}
</script>

Import the file and pass it into Vue data binding.

2. Dynamic data

<template>
    <div class="min-h-screen bg-grey bg-cover flex items-end block md:fixed w-full md:w-1/2 shadow-md" :style="{ backgroundImage: `url(${member.coverImage})` }">
        <p>{{ member.name }}</p>
    </div>
</template>

<script>
export default {
  data() {
    return {
      member: {
                name: "Jakz",
                coverImage: "<https://vuejs.org/images/logo.png>"
            }
    }
  }
}
</script>

You can directly pass the variable into the inline-style

Original submitted from my blog

How to store image in Cloudinary Nodejs REST

Jakz ⚡ — Wed, 15 May 2019 08:48:29 +0000

Last week, I’m building my side project using this VEMN stack – (Vue, Express, Mongo, Node). My backend needs to use REST to interact with the Front-end. I need to store the images assets which are uploading by the end user. I do some survey to find what is the best way to store an image for the web application. I found there is two good company provide these services which are Cloudinary and Imgix.

Imgix has a reasonable pricing compare to Cloudinary but Cloudinary has a free package. Since my side project is still in MVP and I want to validate this idea, I decided to go with Cloudinary.

This is what you need

Install this package

I make it easier, just run this command.

npm install --save cloudinary cloudinaryStorage multer

After everything is done, you should inject this middleware to your routes.

Configuration

Import the package first and then write a cloudinary config. You can get the cloud name, API key and API secret key on your dashboard.

const cloudinary = require('cloudinary');
const cloudinaryStorage = require('multer-storage-cloudinary');
const multer = require('multer');
const config = require('../../config/config');

cloudinary.config({
  cloud_name: config.cloudinary.name,
  api_key: config.cloudinary.api_key,
  api_secret: config.cloudinary.api_secret
});

Define storage for your own project. You can define your folder name, format, and transformation to the images.

const storage = cloudinaryStorage({
  cloudinary,
  folder: 'jomwedding',
  allowedFormats: ['jpg', 'png'],
  transformation: [{ width: 500, height: 500, crop: 'limit' }]
});
const parser = multer({ storage });

Middleware

When everything’s done, inject your middleware to your routes.

router.route('/image')
  .post(parser.single('image'), userCtrl.uploadImage);

Make sure you’re using the multipart form to send the image

Example of my REST

The image will be store to the cloudinary before can be accessed in your controller. To access your stored image can be found in req.file.

function uploadImage(req, res, next) {
  console.log(req.file);
  const image = {};
  image.url = req.file.url;
  image.id = req.file.public_id;
}

Let me know if you have any question or problem.

Original submitted from my blog

Smart ways to maintain your WordPress website

Jakz ⚡ — Wed, 15 May 2019 07:01:55 +0000

As a WordPress user, you must always focus on few tips and tricks to maintain your website. There is no doubt that the WordPress is one of the best platforms out there to create a stunning website. To maintain your WordPress site properly, you must always focus on few smart ways so you can avoid all the problems later on.

Make sure that you are focusing on few basics including the speed and security of your website. To come up with an excellent solution, there are few practices that you will have to focus on. You must always focus on finding new and creative ways to maintain your WordPress website.

If you are not focusing on the details that matter the most, then you won’t be able to achieve the desired outcome. Make sure that you are only using the right plugins and selecting the best quality web host for your website. We will be discussing few smart ways to maintain your WordPress website. Let’s have a look at how you can easily maintain your website.

Keep the software versions updated

The first thing that you will have to focus on is to keep the software versions updated. Make sure that you are updating your WordPress updated so you can avoid all the problems later on. It is always necessary for update the software versions of all the tools that you are using. To improve the security, your WordPress theme and plugins should be up to date. Make sure that you are focusing on these things so you can avoid all the problems later on. By keeping all the software versions updated, you will be able to avoid potential security threats.

Get rid of unused plugins

If you have multiple plugins installed on your WordPress site, then you should consider getting rid of the ones that you are not using. There is no point of keeping the unused plugins installed on your website. All the unused plugins can become a gateway for the potential hackers to get into your website. Make sure that you are only using reliable plugins so you can avoid all the security threats. By getting rid of unused plugins, you will be able to make things easier and better for yourself.

Backup your website

One of the most important things that you will have to focus on is to keep a backup of your website. Make sure that you are creating regular backups of your website so you can maintain your WordPress website properly. Moreover, if there is a hacking attempt on your website and you recover from it, then you will be able to use the backups for updating your website. It is always necessary for you to take regular backups of your website so you can avoid all the problems later on. You can always use reliable backup plugins for your website.

Focus on the security

Make sure that you are paying close attention to the overall security of your website. If you are using essential WordPress security plugins for your website, then you will be able to improve things. It is one of the most important things that you will have to focus on so you can avoid all the problems later on. By improving the security of your WordPress website using the smart plugins, you will be able to keep the hackers away. Make sure that you are focusing on the security of your WordPress site by using a quality WordPress security plugin. You can use plugins like Jetpack for WordPress to maintain your website.

Optimize your website

To maintain your website properly, you will have to optimize your website on regular basis. Make sure that you are optimizing homepage and complete content of your website. It will allow you to make things easier and better for yourself. You can also use different plugins that will help you improve the speed of your website. Moreover, you can use CDN services as well so you can avoid all the loading problems. You can use some optimizing plugins as well that will allow you to get the desired outcome.

Optimize the database

Another important factor that most of the people ignore is optimizing the database. You can always use plugins like WP-DB Manager and WP-Optimize to optimize the WordPress database to maintain your website properly. Moreover, it will help you in optimizing the speed of your WordPress website. By keeping your database optimized, you will be able to get the desired outcome.

Conclusion

To maintain your WordPress site, you should always focus on smart and easy ways. There are various easy ways to maintain your WordPress website so you can avoid all the problems later on. You can improve the speed and security of your WordPress website by using few small techniques mentioned above.

Original published at my blog

How to create a dialog interface in CSS

Jakz ⚡ — Thu, 09 May 2019 09:33:10 +0000

We want to create a dialog interface with multiple list item. First of all, let's build the list item first and wrap it with a div with a class dialog.

HTML

<div class="dialog">
    <ul>
        <li>
          <a href="#">Dashboard</a>
        </li>
        <li>
            <a href="#">Sign out</a>
        </li>
    </ul>
</div>

Let's style the element with the CSS. Change the background colour and text colour.

CSS

    .dialog {
        background-color: #1c3d5a;
        border-radius: .25rem;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
        margin-left: .5rem;
        margin-right: .5rem;
        width: 300px;
        margin: 0 auto;
    }

We should add some style into the list item. So, we want to change the colour into white and remove the bullet.


.dialog ul {
        list-style: none;
    padding: 0;
    width: 100%;
}

.dialog li {
        padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 1rem;
}


.topNav-dropdown li a {
    color: #fff;
}

Seems good. Now, we need to add a little triangle at the bottom to make it looks it comes out from the bottom. Let's add another div with the class arrow inside the .dialog element and add some CSS to style the new element.

<div class="dialog">
    <ul>
        <li>
          <a href="#">Dashboard</a>
        </li>
        <li>
            <a href="#">Sign out</a>
        </li>
    </ul>
    <div class="arrow"></div>
</div>

.arrow {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #1c3d5a;
    position: relative;
    top: .6rem;
}

Hmm. Now we can see the little triangle at the bottom. We need to centre the position. Since, it's wrapped in one div (.dialog), let's align with the power of the flexbox. Add new rules in the .dialog class.

    .dialog {
        background-color: #1c3d5a;
        border-radius: .25rem;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
        margin-left: .5rem;
        margin-right: .5rem;
        width: 300px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

Seems good. Let's add some animation to make it pop up. Create a new animation property in the CSS and assign it into .dialog class.

@keyframes popout {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
@-webkit-keyframes popout {
  from {
    -webkit-transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
  }
}

    .dialog {
        background-color: #1c3d5a;
        border-radius: .25rem;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
        margin-left: .5rem;
        margin-right: .5rem;
        width: 300px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      animation: popout 0.7s ease;
    }

Hopefully, you enjoyed this little tutorial. If you want to grab a code, feel free to grab it on my CodePen.

Original submitted from my blog

Return Status Code with Laravel Resource

Jakz ⚡ — Thu, 09 May 2019 09:27:04 +0000

Laravel Resource is one of the best features in Laravel. It makes it easy to modify the output of the result. If you're using an API, you need to have a status code to let the front-end know what the status of the request is.

Example of Status Code
202 - Created
401 - Unauthorized
404 - Not Found

You may find a list of HTTP status code over here.

For example, you have a User Model, and the controller wants to return user information of specific id. You want to let the front-end know that you found the data based on the status code.

Api.php

Route::get('user/{user}', 'UserController@show');

UserController.php

public function show(User $user) {
    return (new UserResource($user))
        ->response()
        ->setStatusCode(202);
}

How about if there is no ID in the database?

It could be like this. We should check it first whether the ID is available in our database and if not, it should return a status code of not found. If yes, we may proceed with the previous system.

UserController.php

public function show(User $user) {

    // If user not found
    if(!$user){
    return response(array(
        'message' => 'Not Found',
     ), 410);
    } else {
        // If user is found
        return (new UserResource($user))
            ->response()
            ->setStatusCode(202);
    }
}

It is writing with if else block is troublesome during debugging. It's a best practice to check for the negative result first and then returns the correct output at last. If the if else get deeper it will get worse for the developer.

Refactor

public function show(User $user) {

    // If user not found
    if(!$user){
    return response(array(
        'message' => 'Not Found',
     ), 410);
    }

    // If user is found
    return (new UserResource($user))
        ->response()
        ->setStatusCode(202);
}

Hope it may help you understand how to send the status code through laravel resource or without it.

Original submitted from my blog