Laravel Let’s add like function (1)

Aug 29, 2020 PHP Laravel Like Vue.js

With the Like function, you can change the color of the heart and the number of likes without changing the screen before and after updating the Like table.

To achieve this, the Like function uses JavaScript instead of the form tag as the method of communicating from the client (PC or smartphone browser) to the server (Laravel side).

This time, we use Vue.js, which is a JavaScript framework, so that we can efficiently develop a series of processes such as communication to the server when a heart is pressed and switching of the color of the heart and the display of the number of likes. I will.

1. Install Vue.js

Install Vue.js.

Edit package.json in the laravel directory as follows.

.
└── laravel
    └── package.json

// omitted
  "devDependencies": {
    "axios": "^0.19",
    "cross-env": "^5.1",
    "laravel-mix": "^4.0.7",
    "lodash": "^4.17.13",
    "resolve-url-loader": "^2.3.1",
    "sass": "^1.15.2",
    "sass-loader": "^7.1.0", //-- add a comma at the end
    //-- add from here
    "vue": "^2.6.11",
    "vue-template-compiler": "^2.6.11"
    //-- add up to here
  }
// omitted

After editing, execute the following command in the laradock directory

$ docker-compose exec workspace npm install

2. Create a Vue component with a nice feature

Next, let’s create a Vue component with a nice feature.

Create a components directory in the resources/js directory and create ArticleLike.vue there.

.
└── laravel
    └── resources
        └── js
            └── components
                └── ArticleLike.vue

<template>
  <div>
    <button
      type="button"
      class="btn m-0 p-1 shadow-none"
    >
      <i class="fas fa-heart mr-1"
      />
    </button>
    Ten
  </div>
</template>

<script>
</script>

At this stage, it is a Vue component consisting of a button with a heart icon and a number of dummy likes.