DEV Community: Abhishek

Setting up a dev environment for Laravel - the easy way

Abhishek — Thu, 02 Apr 2020 15:47:46 +0000

Working with the Laravel ecosystem is great. But before starting to build an application using Laravel, there always a complicated setup for your development machine that needs to be done first.

So, in this post, I am writing a step by step guide to setup your dev machine that will make your day awesome. In this guide, I am using ubuntu as my operating system. I am using a lightweight version of Ubuntu called Linux mint.

Read more about the installation of Linux Mint at How to Install Linux Mint

Now let's begin our setup. It consists of the following steps:

Installing Zsh
Install php, php-dependencies, composer
Install valet, valet external libraries
Install laravel installer
Install mysql, gui tool
Install nodejs, vue-cli

Installing Zsh

The Z shell (zsh) is a Unix shell. Zsh can be thought of as an extended Bourne shell with a large number of improvements, including some features of bash, ksh, and tcsh.

Read more about ZSH at An Introduction to the Z Shell.

Open a terminal window, Copy & paste the following into the terminal.

sudo apt update
sudo apt upgrade
sudo apt install zsh

Now let's setup Oh My Zsh.

Oh My Zsh is a delightful, open-source, community-driven framework for managing your Zsh configuration. It comes bundled with thousands of helpful functions, helpers, plugins, themes, and a few things that make you shout...

Install oh-my-zsh by entering

sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

After the installation has been completed you need to make zsh as the default shell.

Follow this guide for settings up plugins and themes for Zsh.

Install php, php-dependencies, composer

Now, we need to install PHP to work with the Laravel framework. We will be using PHP version 7.3 so that it doesn't break the external packages we use with Laravel (since most of the external packages have not been updated to PHP-7.4 while writing this post and the latest Laravel 7.x requires PHP >= 7.2.5).

You could read more about PHP 7.4 here.

Install php by typing:

sudo apt install php7.3-cli

If you are getting an error while installing PHP like:

Reading package lists... Done
Building dependency tree       
Reading state information... Done
E: Unable to locate package php7.3-cli
E: Couldn't find any package by glob 'php7.3-cli'
E: Couldn't find any package by regex 'php7.3-cli'

then make sure to add the ppa:ondrej/php repository by

sudo apt-get install software-properties-common
sudo add-apt-repository ppa:ondrej/php
sudo apt-get update
sudo apt-get upgrade
sudo apt-get install -y php7.3

Now, check PHP version

php -v

which will give the output,

PHP 7.3.16-1+ubuntu18.04.1+deb.sury.org+1 (cli) (built: Mar 20 2020 13:51:46) ( NTS )
Copyright (c) 1997-2018 The PHP Group
Zend Engine v3.3.16, Copyright (c) 1998-2018 Zend Technologies
    with Zend OPcache v7.3.16-1+ubuntu18.04.1+deb.sury.org+1, Copyright (c) 1999-2018, by Zend Technologies

Install PHP external dependencies, that is required by Laravel framework

Laravel Server Requirements mention that BCMath, Ctype, Fileinfo, JSON, Mbstring, OpenSSL, PDO, Tokenizer and XML extensions are required. Most of the extensions are installed and enabled by default.

sudo apt install openssl php7.3-common php7.3-bcmath php7.3-curl php7.3-json php7.3-mbstring php7.3-mysql php7.3-xml php7.3-zip php7.3-sqlite3

We will be using the SQLite package for our PHP unit testing.

Install composer

A Dependency Manager for PHP.

You could learn more about the composer here.

php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('sha384', 'composer-setup.php') === 'e0012edf3e80b6978849f5eff0d4b4e4c79ff1609dd1e613307e16318854d24ae64f26d17af3ef0bf7cfb710ca74755a') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"
sudo mv composer.phar /usr/local/bin/composer

To check if composer installed correctly, please enter

composer

which results in

  / ____/___  ____ ___  ____  ____  ________  _____
 / /   / __ \/ __ `__ \/ __ \/ __ \/ ___/ _ \/ ___/
/ /___/ /_/ / / / / / / /_/ / /_/ (__  )  __/ /
\____/\____/_/ /_/ /_/ .___/\____/____/\___/_/
                    /_/
Composer version 1.10.1 2020-03-13 20:34:27
...

Now, add the composer global tools to your PATH:

open zshrc file:

nano ~/.zshrc

add these lines to the last of your zshrc file

PATH=$HOME/.config/composer/vendor/bin:~/.composer/vendor/bin:$PATH
export PATH

Now read and execute the file by:

source ~/.zshrc

Install valet

Valet is a Laravel development environment for Mac minimalists. No Vagrant, no /etc/hosts file. You can even share your sites publicly using local tunnels. Yeah, we like it too.

Since, we are using ubuntu as our operating system, to make valet work with the system we will be using a package called valet linux.

Valet Linux is a Laravel development environment for Linux minimalists. No Vagrant, no /etc/hosts file. You can even share your sites publicly using local tunnels. Yeah, we like it too.

Before installation, you should review your system specific requirements and make sure that no other programs such as Apache or Nginx are binding to your local machine’s port 80.

Add valet external dependencies

sudo apt-get install network-manager libnss3-tools jq xsel

Install Valet via composer:

composer global require cpriego/valet-linux

Run the valet install command.

valet install

Once Valet is installed, you’re ready to start serving sites.

mkdir ~/Sites
cd ~/Sites
valet park

The valet park command will register your current working directory (~/Sites) as a path that Valet should search for sites.

Install the Laravel Installer

composer global require laravel/installer

Create a new Laravel site within the Sites directory:

laravel new blog

Open http://blog.test in your browser. You should see a default Laravel welcome page.

Next, we need to install Mysql as our database management system.

Install Mysql

sudo apt update
sudo apt install mysql-server

configure a MySQL root user to work with.

open up the MySQL prompt from your terminal:

mysql -u root

modify the root user with all privileges.

DROP USER 'root'@'localhost';
CREATE USER 'root'@'localhost' IDENTIFIED BY '';
GRANT ALL PRIVILEGES ON *.* TO 'root'@'localhost' WITH GRANT OPTION;
FLUSH PRIVILEGES;

the above command will create a root user without a password.

As we are in local development mode, trying to neglect the password field. In the production server, always create a different user with the required privileges and a strong password.

Using database management tools
there are many great guy tools available for managing databases. I am listing the ones which I personally prefer the most.

SequelPro only available for Mac.
TablePlus
Workbench
PhpMyAdmin

Install vue-cli

Before we start installing vue-cli, it requires nodejs and npm as its dependency. Follow this guide for installing nodejs and npm in your system.

Vue-cli provides a full system for rapid Vue.js development. Follow this guide for installing vue-cli to your system.

Great!! Build something amazing. 🤘

Creating a Button component using Vue and Tailwindcss

Abhishek — Sat, 14 Mar 2020 17:32:34 +0000

Today we are going to build a custom button component using Vue and Tailwindcss. Here you can look into my codepen.

As you have seen, I have kept different options for the colors, size, and roundness of the button. By default this button ships with a loading spinner. You could use the loading feature when you are waiting for the promise to return from axios.

It follows three steps -

Creating the component
Using the component
Using the props

Creating the Button Component

Create a file called LoadingButton.vue in /src/Shared/LoadingButton.vue and add

//LoadingButton.vue
<template>
    <component
        :is="tag"
        :type="type"
        v-on="$listeners"
        :disabled="disableButton"
        :class="[btnClass, colorVariants]"
        :variant="variant"
        :variant-type="variantType"
        :size="size"
        :href="to"
    >
        <slot />
    </component>
</template>

<script>
export default {
    name: "LoadingButton",
    props: {
        tag: {
            type: String,
            default: "button"
        },
        disabled: {
            type: Boolean,
            default: false
        },
        variant: {
            type: String,
            default: "primary"
        },
        variantType: {
            type: String,
            default: "normal"
        },
        size: {
            type: String,
            default: "normal"
        },
        rounded: {
            type: String,
            default: "medium"
        },
        type: {
            type: String,
            default: ""
        },
        to: {
            type: String
        }
    },
    data() {
        return {
            loading: false,
            disableButton: this.disabled
        };
    },

    methods: {
        startLoading() {
            this.loading = true;
            this.disableButton = true;
        },
        stopLoading() {
            this.loading = false;
            this.disableButton = false;
        }
    },

    computed: {
        btnClass() {
            return {
                "base-spinner": this.loading == true,
                "cursor-not-allowed": this.disableButton == true,
                "base-button inline-flex align-middle align-items-center justify-center font-medium focus:outline-none border-2": true,

                "rounded-lg": this.rounded === "medium",
                "rounded-full": this.rounded === "large",

                "px-6 py-3": this.size == "normal",
                "px-4 py-2": this.size == "small"
            };
        },

        colorVariants() {
            switch (this.variant) {
                case "primary":
                    switch (this.variantType) {
                        case "normal":
                            switch (this.disableButton) {
                                case true:
                                    return "border-blue-300 bg-blue-300 text-white";
                                    break;
                                default:
                                    break;
                            }
                            return "border-blue-600 bg-blue-600 hover:bg-blue-700 hover:border-blue-700 text-white";
                            break;
                        case "outline":
                            return "border-gray-200 text-blue-500 hover:text-blue-700";
                            break;
                        default:
                            break;
                    }
                    break;
                case "danger":
                    switch (this.variantType) {
                        case "normal":
                            switch (this.disableButton) {
                                case true:
                                    return "border-red-300 bg-red-300 text-white";
                                    break;
                                default:
                                    break;
                            }
                            return "border-red-600 bg-red-600 hover:bg-red-700 hover:border-red-700 text-white";
                            break;
                        case "outline":
                            return "border-gray-200 text-red-500 hover:text-red-600";
                            break;
                        default:
                            break;
                    }
                    break;

                case "warning":
                    switch (this.variantType) {
                        case "normal":
                            return "border-orange-600 bg-orange-600 hover:bg-orange-700 hover:border-orange-700 text-white";
                            break;
                        default:
                            break;
                    }
                    break;

                case "success":
                    switch (this.variantType) {
                        case "normal":
                            switch (this.disableButton) {
                                case true:
                                    return "border-green-300 bg-green-300 text-white";
                                    break;
                                default:
                                    break;
                            }
                            return "border-green-600 bg-green-600 hover:bg-green-700 hover:border-green-700 text-white";
                            break;
                        case "outline":
                            return "border-2 border-gray-200 text-green-500 hover:text-green-700";
                            break;
                        default:
                            break;
                    }
                    break;

                case "white":
                    switch (this.variantType) {
                        case "normal":
                            return "border-white bg-white text-blue-600 hover:text-blue-800";
                            break;
                        default:
                            break;
                    }
                    break;

                case "secondary":
                    switch (this.variantType) {
                        case "outline":
                            return "border-gray-300 text-gray-500 hover:text-blue-500";
                            break;
                        default:
                            break;
                    }
                    break;

                default:
                    break;
            }
        }
    }
};
</script>

Using the component

Now, we will use the loading-button component in our App.vue.

// App.vue
<template>
  <div id="app">
    <loading-button @click="submit" ref="submitButton">Save Changes</loading-button>
  </div>
</template>

<script>
import LoadingButton from "@/Shared/LoadingButton";

export default {
  name: "app",

  components: {
    LoadingButton
  },

  methods: {
      submit() {
          //calling the startLoading method of the button, which enables the button to loading state
          this.$refs.submitButton.startLoading();
      }
  }
};
</script>

Using the props

default option

Name	Type	Description	Accepted
variant	String	Color scheme of the button	`primary`, danger, success, warning, secondary
variant-type	String	Normal button or ghost button	`normal`, outline
rounded	String	border radius of the button	`medium`, large
size	String	padding of the button	`normal`, small

Methods Available

default option

Name	Description
startLoading	start loading state of the button
stopLoading	stop loading state of the button

N.B.

Only primary, danger and success variant accepts a disabled prop.
secondary variant is only available for outline button.

Creating an Input component using Vue and Tailwindcss

Abhishek — Sun, 08 Mar 2020 17:52:23 +0000

In this article we will be building an input component using Vue and Tailwindcss.

It consists of 3 sections -

The Input Component
Using the Component
Props

Getting Started

Have a look at the component how it will look like. I have added different options for adding label, icons, error messages etc. to the component.

The Input Component

Create a file called TextInput.vue in /src/Shared/TextInput.vue and add

// TextInput.vue
<template>
    <div>
        <label
            v-if="label"
            class="form-label block mb-1 font-semibold text-gray-700"
            :for="id"
            >{{ label }}</label
        >
        <div class="relative">
            <input
                :id="id"
                ref="input"
                v-bind="$attrs"
                class="px-2 py-2 h-12 leading-normal block w-full text-gray-800 bg-white font-sans rounded-lg text-left appearance-none outline-none"
                :class="[
                    {
                        'border-red-400': errors.length,
                        'pl-12': withIcon === true
                    },
                    classes
                ]"
                :type="type"
                :value="value"
                @input="$emit('input', $event.target.value)"
                @keydown="$emit('keydown', $event)"
                @blur="$emit('blur', $event)"
                @keyup="$emit('keyup', $event)"
            />
            <div v-if="errors.length" class="text-red-600 mt-1 text-sm">
                {{ errors[0] }}
            </div>

            <svg
                class="absolute text-red-600 fill-current"
                style="top: 12px; right: 12px"
                v-if="errors.length"
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
            >
                <path
                    d="M11.953,2C6.465,2,2,6.486,2,12s4.486,10,10,10s10-4.486,10-10S17.493,2,11.953,2z M13,17h-2v-2h2V17z M13,13h-2V7h2V13z"
                />
            </svg>

            <div
                class="absolute left-0 top-0 bottom-0 w-10 block ml-2"
                v-if="withIcon"
            >
                <slot name="icon"></slot>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'TextInput',

    inheritAttrs: false,

    props: {
        id: {
            type: String,
            default() {
                return `text-input-${this._uid}`;
            }
        },
        type: {
            type: String,
            default: "text"
        },
        value: String,
        label: String,
        errors: {
            type: Array,
            default: () => []
        },
        withIcon: {
            type: Boolean,
            default: false
        },
        bordered: {
            type: Boolean,
            default: true
        }
    },

    methods: {
        focus() {
            this.$refs.input.focus();
        },
        select() {
            this.$refs.input.select();
        },
        setSelectionRange(start, end) {
            this.$refs.input.setSelectionRange(start, end);
        }
    },

    computed: {
        classes() {
            return {
                "border-2 focus:border-blue-600 focus:border-blue-600":
                    this.bordered === true,
                "border bg-gray-200 focus:bg-white": this.bordered === false
            };
        }
    }
};
</script>

Using the component

Create a file called ExampleComponent.vue in /src/components/ExampleComponent.vue and add

<!-- ExampleComponent.vue -->
<template>
  <div class="max-w-lg mx-auto my-12">
    <!--        examples with lables -->
    <div
      class="border-l-4 border-blue-500 p-3 rounded mb-6 shadow bg-gray-100 font-semibold text-gray-600 tracking-wide text-lg"
    >
      Input components with labels
    </div>
    <text-input label="Email" class="mb-4"></text-input>
    <text-input label="Password" type="password" class="mb-4"></text-input>
    <!--        examples with label ended -->
    <!--        examples with icons -->
    <div
      class="border-l-4 border-blue-500 p-3 rounded my-10 mb-6 shadow bg-gray-100 font-semibold text-gray-600 tracking-wide text-lg"
    >
      Input components with Icons
    </div>

    <text-input class="mb-4" with-icon placeholder="Enter your email...">
      <template #icon>
        <svg
          class="mt-2 w-8 h-8 stroke-current text-gray-100"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          stroke="currentColor"
        >
          <path
            d="M3 8L10.8906 13.2604C11.5624 13.7083 12.4376 13.7083 13.1094 13.2604L21 8M5 19H19C20.1046 19 21 18.1046 21 17V7C21 5.89543 20.1046 5 19 5H5C3.89543 5 3 5.89543 3 7V17C3 18.1046 3.89543 19 5 19Z"
            stroke="#4A5568"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
      </template>
    </text-input>
    <text-input
      class="mb-4"
      type="password"
      with-icon
      placeholder="Enter your password..."
    >
      <template #icon>
        <svg
          class="mt-2 w-8 h-8 stroke-current text-gray-100"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          stroke="currentColor"
        >
          <path
            d="M12 15V17M6 21H18C19.1046 21 20 20.1046 20 19V13C20 11.8954 19.1046 11 18 11H6C4.89543 11 4 11.8954 4 13V19C4 20.1046 4.89543 21 6 21ZM16 11V7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7V11H16Z"
            stroke="#4A5568"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
      </template>
    </text-input>
    <!--        examples with icons ended -->

    <!--        examples with error messages -->
    <div
      class="border-l-4 border-red-500 p-3 rounded mb-6 mt-10 shadow bg-gray-100 font-semibold text-gray-600 tracking-wide text-lg"
    >
      Input components with Error Messages
    </div>
    <text-input
      label="Email"
      class="mb-4"
      :errors="errors['errorEmail']"
      @keydown="delete errors['errorEmail']"
    >
    </text-input>
    <text-input
      label="Password"
      type="password"
      class="mb-4"
      :errors="errors['errorPassword']"
      @keydown="delete errors['errorPassword']"
    ></text-input>
    <!--        examples with error messages ended -->
  </div>
</template>

<script>
import TextInput from "@/Shared/TextInput";

export default {
  components: {
    TextInput
  },
  data() {
    return {
      errorEmail: "",
      errors: {
        errorEmail: ["The email field is required."],
        errorPassword: ["The password confirmation does not match."]
      }
    };
  }
};
</script>

Props

default option

Name	Type	Description	Accepted
type	String	Input types	`text`, default html5 input types
label	String	Label of the input
withIcon	Boolean	if set, icon is shown	true, `false`
errors	Array	Error that need to be shown with the input
bordered	Boolean	input has border or not	`true`, false

Happy Coding :)

Setting up Vuex (state management) with Vue CLI 3

Abhishek — Sat, 07 Mar 2020 11:04:33 +0000

This article explains how to set up Vuex in a Vue CLI 3 project. It is really helpful while you are managing user's state when authenticating a Vue application.

Steps to follow -

Install Vuex
Add Vuex to your application
Creating store object and usage
Extracting store into individual file
Using Vuex modules

Install Vuex

First step is to install Vuex via npm or yarn

# Using npm
npm install vuex --save

# Using Yarn
yarn add vuex

Add Vuex to your application

When used with a module system, you must explicitly install Vuex via Vue.use()

//main.js
import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

Creating store object to use in Vue App

After installing Vuex, let's create a store. It is pretty straightforward - just provide an initial state object, and some mutations:

//main.js
// Make sure to call Vue.use(Vuex) first if using a module system
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});
// Make sure to inject the store in the vue instance
new Vue({
  store,
  render: h => h(App)
}).$mount("#app");

Due to using a single state tree, all state of our application is contained inside one big object. However, as our application grows in scale, the store can get really bloated.

Vuex allows us to divide our store into modules. Each module can contain its own state, mutations, actions, getters, and even nested modules. For any reference, please checkout this guide

Extracting store into individual file

Now create a index.js file in src/store/index.js and add

//index.js
import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    errors: {}
  },

  getters: {
    errors(state) {
      return state.errors;
    }
  },

  mutations: {
    SET_ERRORS(state, data) {
      state.errors = data;
    }
  },

  actions: {
    setErrors({ commit }, errors) {
      commit("SET_ERRORS", errors);
    }
  }
});

Using vuex modules

Our updated index.js file will look like

//index.js
import Vue from "vue";
import Vuex from "vuex";

// importing a vuex module
// imporing the auth module which handles the user authentication
import auth from "./auth";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    errors: {}
  },

  getters: {
    errors(state) {
      return state.errors;
    }
  },

  mutations: {
    SET_ERRORS(state, data) {
      state.errors = data;
    }
  },

  actions: {
    setErrors({ commit }, errors) {
      commit("SET_ERRORS", errors);
    }
  },
  modules: {
    //registering the auth module that is imported
    auth
  }
});

This blog post example uses graphql client for autenticating the users. If you are using axios as a http client, then your vuex actions might look different than this. The auth.js file will look like

//auth.js
import {
  LOGIN_USER_MUTATION,
  GET_CURRENT_USER,
  LOGOUT
} from "../graphql/queries/userQueries";
import { Apollo } from "../graphql/apollo";

export default {
  namespaced: true,
  state: {
    token: null,
    user: null
  },
  getters: {
    authenticated(state) {
      return !!state.token && !!state.user;
    },
    user(state) {
      return state.user;
    }
  },
  mutations: {
    SET_TOKEN(state, token) {
      state.token = token;
    },
    SET_USER(state, data) {
      state.user = data;
    }
  },
  actions: {
    async login({ dispatch }, credentials) {
      let response = await Apollo.mutate({
        mutation: LOGIN_USER_MUTATION,
        variables: {
          username: credentials.email,
          password: credentials.password
        }
      });

      return dispatch("attempt", response.data.login.access_token);
    },
    async attempt({ commit, state }, token) {
      if (token) {
        localStorage.setItem("token", token);
        commit("SET_TOKEN", token);
      }
      if (!state.token) {
        return;
      }
      try {
        let response = await Apollo.query({
          query: GET_CURRENT_USER
        });
        commit("SET_USER", response.data.me);
        Apollo.resetStore();
      } catch (e) {
        localStorage.removeItem("token");
        commit("SET_TOKEN", null);
        commit("SET_USER", null);
        Apollo.resetStore();
      }
    },

    logout({ commit }) {
      return Apollo.mutate({
        mutation: LOGOUT
      }).then(() => {
        // console.log(store);
        localStorage.removeItem("token");
        commit("SET_TOKEN", null);
        commit("SET_USER", null);
        Apollo.resetStore();
      });
    }
  }
};

Import the file in your Vue app(main.js)

Now our updated main.js file will look like

//main.js
import Vue from "vue";
//import the store module
import store from "@/store";

// Make sure to inject the store in the vue instance
new Vue({
  store,
  render: h => h(App)
}).$mount("#app");

That’s it! Now restart your Vue CLI project and it should all work fine. Checkout Official Vuex docs for more information.

Setting up a Vue CLI project with Vue Apollo

Abhishek — Sat, 07 Mar 2020 05:11:32 +0000

Today we’ll learn how to integrate apollo-client 2 with Vue.js using vue-apollo.

Installation

apollo-client has numbers of dependencies that need to be setup in your current Vue CLI project.

npm install --save vue-apollo graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag

Usage

Set up an ApolloClient in our main.js.

import { ApolloClient } from 'apollo-client'
import { createHttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'

// HTTP connection to the API
const httpLink = createHttpLink({
  // You should use an absolute URL here
  uri: 'http://localhost:3020/graphql',
})

// Cache implementation
const cache = new InMemoryCache()

// Create the apollo client
const apolloClient = new ApolloClient({
  link: httpLink,
  cache,
})

Install the VueApollo plugin into Vue

import Vue from 'vue'
import VueApollo from 'vue-apollo'

Vue.use(VueApollo)

The ApolloProvider holds the Apollo client instances that can then be used by all the child components.

const apolloProvider = new VueApollo({
  defaultClient: apolloClient,
})

The final step

Extracting the apollo component to a single file, create a file called apollo.js in src/graphql/apollo.js and add

//apollo.js 
// This is everything we need to work with Apollo 2.0.
import Vue from "vue";
import { ApolloClient } from "apollo-client";
import { HttpLink } from "apollo-link-http";
import { InMemoryCache } from "apollo-cache-inmemory";
import VueApollo from "vue-apollo";
// Register the VueApollo plugin with Vue.
Vue.use(VueApollo);

// Create a new HttpLink to connect to your GraphQL API.
// According to the Apollo docs, this should be an absolute URI.
const httpLink = new HttpLink({
    uri: `http://localhost:3020/graphql`
});

// I'm creating another variable here just because it makes it easier to add more links in the future.
const link = httpLink;

// Create the apollo client
const apolloClient = new ApolloClient({
    // Tells Apollo to use the link chain with the http link we set up.
    link,
    // Handles caching of results and mutations.
    cache: new InMemoryCache(),
    // Useful if you have the Apollo DevTools installed in your browser.
    connectToDevTools: true
});

const apolloProvider = new VueApollo({
    // Apollo 2.0 allows multiple clients to be enabled at once.
    // Here we select the default (and only) client.
    defaultClient: apolloClient
});

export default apolloProvider;

Add it to your app with the apolloProvider option, Now our main.js will look like:

//main.js
import Vue from "vue";
import App from "./App.vue";
import apolloProvider from "./graphql/apollo";

new Vue({
  el: '#app',
  // inject apolloProvider here like vue-router or vuex
  apolloProvider,
  render: h => h(App),
})

You are now ready to use Apollo in your components!
For more details, see the documentation on apollo-vue and Apollo.