When an app gets bigger, we’ll need to split the code into child components for reusability purposes.

Let’s see how to import a Child Component to a Parent Component with 3 simple steps.

Let’s say you have a folder structure like this:

/pages (parent)
/components (child)

STEP 01: First, Import the Child Component into the Parent Component inside script tag but above export default function declaration.


import AddContactForm from '@/components/AddContactForm';

STEP 02: Then, Register the Child Component inside the Parent Component by adding it to components object.


components: {

STEP 03: Finally…

Learn how to set an image of any size as the background of an HTML element full screen in CSS!

Create A Container Div Element

Create a div or any block-level HTML element with the class name called .bg-container where I’m going to add a background image into.

<div class="bg-container">

Make The Container Div Full Screen

Then, make the div full screen so that the background image fits the full screen of the browser window.

Note: You can change the size of the container div if you do not want the…

Static Data

STEP 01: In the parent component, add a custom attribute when registering a child component.

<ChildComponent title="Raja Tamil"/>

STEP 02: Passing the title attribute to the props array as a single item will turn it to a property that can be used inside the child component instance.

export default {
props: ['title']

Child component


Dynamic Data

STEP 01: In the parent component, create a variable called name inside the data() model.

data() {
return {
name : "Raja Tamil"

STEP 02: Bind the name property with a value myName to the child component when rendering it on the…

Send data from the Child Component to Parent Component using the $emit() method.

STEP 01: Invoke the $emit() method in the child component where you want to send a piece…

In this example, you’re going to learn how to draw a polygon on the Google Maps canvas.

Declare the Map Object

<div id="map"></div>
#map {
height: 100%;
body {
height: 100%;
margin: 0;
padding: 0;
<script src="https://maps.googleapis.com/maps/api/js?key=[YOUR_API_KEY]">
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: new google.maps.LatLng(51.173791, 9.327271),
mapTypeId: google.maps.MapTypeId.ROADMAP

By default, the map has “for development purpose only” watermark on it. You can remove it by adding an API Key in the library URL. You can find how to create it here.

Define the LatLng Coordinates for the Polygon’s Path

var polygoneCoords = [
{lat: 51.177329, lng…

Directions Service

The Directions Service is a client-side JavaScript library that lets us get directions data between two locations based on travel mode such as driving, walking, etc.

The Directions Service talks to Google Maps API behind the scene that takes direction requests such as origin, destination, travel mode and returns the efficient directions path data including multi-part directions.

Enable Directions API library

First, make sure that the Directions API library is enabled on the Google Cloud Console.

Include Maps JavaScript Library

Also, make sure to include the google maps client-side library in the project.

<script src="https://maps.googleapis.com/maps/api/js?key=[YOUR_API_KEY]">

Make A Request To Directions Service

Create an instance of the DirectionsService Object.

const directionsService = new google.maps.DirectionsService();

Raja Tamil

Instructor/Owner of SoftAuthor! http://softauthor.com/

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