If you are stuck to use events on vue3-apexcharts, this article is useful to you.

<template>
<apexchart
v-if="options && series"
type="line"
height="350"
:options="options"
:series="series"
@click="click"…


1. Install a supervisor

In Amazon repository, there is no supervisor. So we should use epelrepository to install that.

sudo yum --enablerepo=epel install supervisor

2. Start supervisor

sudo service supervisord start

If you get this sentence Redirecting to /bin/systemctl start supervisord.service, install was succeed.

3. Modify the supervisor config file

To add worker to supervisor, we should modify the supervisor config file.

sudo vi /etc/supervisord.conf

And add these contents.

[program:worker]
command=php /project-home/artisan queue:work
process_name=%(program_name)s_%(process_num)02d
numprocs=2
autostart=true
autorestart=true
user=root
redirect_stderr=true
stdout_logfile=/project-home/storage/logs/worker.log

Please do not forget to add worker.log file into your log path.

touch /project-home/storage/logs/worker.log

4. Read supervisor config file

To read your new config file to supervisor, execute this command.

sudo supervisorctl reread

If you wrote config correctly…


This tutorial is for who want to build an app that provides server_to_server interaction with Zoom APIs to manage your account.

Build an Zoom Application

  1. Access Zoom marketplace
  2. Sign in
  3. Click Develop button on header and select Build App menu.
  4. Choose the JWT and create application with the app name what you want.
  5. Input required information and click Continue until your app will be activated. Don't forget to remember your credentials. It's used for API calling.


Sometimes we need to check $route was changed. At that time this cookbook helps you.

The logo of Nuxt.js

Problem

My application has Header component that has some list items.

In my Header, I'm tracking the status of list displaying using isActive property.

This is my part of the source code.

It’s work, but there is one problem. Although route is changed, menu is displayed until I’ll click button.

What I want?

When route is changed, isActive property will be changed to false.

Solution

In Nuxt.js(and vue.js), there is watch property for observing value's change.

I’ll modify my previous source code to observe the change of the route.

Through this 5 lines simple code, you will be able to observe route change.

Conclusions


The Logo of the Nuxt.js and PM2

If you are using Nuxt.js as frontend framework…


Understanding lifecycle of component is important to implement.

Logo of the Svelte

This post is one of Svelte Tutorial series.

  1. Up and running with Svelte
  2. How to handle Events in Svelte
  3. How binding data into Svelte Component
  4. [This Post] Lifecycle of the Svelte Component

LifeCycle Functions

The svelte has some lifecycle functions.


Because binding data into components is important!

Logo of the Svelte

This post is one of Svelte Tutorial series.

  1. Up and running with Svelte
  2. How to handle Events in Svelte
  3. [This Post] How binding data into Svelte Component
  4. Lifecycle of the Svelte Component

TL; DR

Text inputs

Numeric inputs

Checkbox input

Group inputs(Checkbox, Radio)

If you have multiple inputs relating to the same value, you should use bind:group.

Radio

Checkbox

Textarea inputs

Select bindings

Svelte allow to bind object as a <option> value and Svelte recommand binding object as a value.

Select multiple

Contenteditable bindings

Elements with a contenteditable="true" attribute support textContent and innerHTML bindings.

textContent

innerHTML


A simple guide to handling events

Logo of the Svelte

This post is one of Svelte Tutorial series.

  1. Up and running with Svelte
  2. [This Post] How to handle Events in Svelte
  3. How binding data into Svelte Component
  4. Lifecycle of the Svelte Component

Default Event Handler

You can listen any event on an element with the on: directive.

Inline Event Handler

You can omit quotes of the handler, but for highlighting syntax, it’s recommend to add quotes in front of / at the end of the handler.

In some frameworks, inline event handlers are anti-pattern because of their performance reason. But in Svelte, inline event handler is not anti-pattern, becasue it runs in build time!

Event modifires

Jangwook Kim

Korean, live in Japan. The programmer. I love to learn something new things. I’m publishing my toy projects using GitHub. Visit https://www.jangwook.net.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store