How to display a route as a modal in Vue.js

Charles-Eugene Loubao — Mon, 07 Oct 2019 17:59:24 +0000

Hello everyone!

In this tutorial we are going to learn how to display a Vue route as a modal, similar to image links on Dribble.com or Google contacts. This format is very useful when you want to show information to the user without redirecting them to another page

This tutorial assumes you are familiar with Vue.js.

First lets create a basic vue project with vue-router

vue-create $folder

For this project I also installed faker.js to create dummy data for our contact list

npm install --save faker

Then I created the following files

src/db.js (Mock database)

import faker from 'faker'

const contacts = {}

for (let index = 0; index < 10; index++) {
    const id = "user_" + index
    contacts[id] = {
        id,
        name: `${faker.name.firstName()}  ${faker.name.lastName()}`,
        jobTitle: faker.name.jobTitle(),
        email: faker.internet.email(),
        phone: faker.phone.phoneNumber(),
    }
}

export default {
    contacts
}

src/views/Contacts.vue (Contact list)

<template>
  <div class="contacts">
    <h2>Contacts</h2>
    <div class="contact-list">
      <router-link
        tag="div"
        class="item"
        :to="`/contacts/${contact.id}`"
        v-for="contact in contacts"
        :key="contact.id"
      >
        <strong>{{contact.name}}</strong>
        <br />
        <span>{{contact.jobTitle}}</span>
      </router-link>
    </div>
  </div>
</template>

<script>
import db from "@/db.js";
export default {
  computed: {
    contacts() {
      return Object.values(db.contacts);
    }
  }
};
</script>

<style lang="scss" scoped>
.contact-list {
    .item {
        &:not(:last-child) {
            margin-bottom: 8px;
        }
        padding: 16px;
        border-radius: 4px;
        border: solid 1px #e2e2e2;
    }
}
</style>

src/views/ContactInfo.vue

<template>
  <div class="contact-info">
    <router-link to="../">X</router-link>
    <h3>{{contact.name}}</h3>

    <h4>Job Title</h4>
    <span>{{contact.jobTitle}}</span>
    3
    <h4>Email</h4>
    <span>{{contact.email}}</span>

    <h4>Phone</h4>
    <span>{{contact.phone}}</span>
  </div>
</template>

<script>
import db from "@/db.js";
export default {
  props: ["contactId"],
  data() {
    return {
      contact: ""
    };
  },
  created() {
    this.contact = db.contacts[this.contactId];
  }
};
</script>

<style lang="scss" scoped>
.contact-info {
    padding: 16px;
}
</style>

I also modified the src/router.js file to add a route for /contacts that points to the Contacts.vue component. I am also redirecting the root path to /contacts

After making these changes we get this:

If we click on a user the route will display a blank screen. To fix this we need to add a route for the ContactInfo component. We need to create the route as a child of the /contacts route.

src/router.js

import ContactInfo from './views/ContactInfo.vue'
...
{
      path: '/contacts',
      component: Contacts,

      // ADDED
      children: [
        {
          path: ':contactId',
          component: ContactInfo,
          props: true
        }
      ]
    },
...

Next we need to add a router-view component to Contacts.vue

...
  <div class="contacts">
  ...
  ...
    <router-view></router-view>
  </div>
</template>

Now click a Contact and you will see this at the bottom of the screen:

This is not exactly what we want. We need to make the router-view show as a modal. We have to make a few changes

Go to Contacts.vue and replace <router-view></router-view> with this

...
    <div v-if="showModal" class="modal-route">
      <div class="modal-content">
        <router-view></router-view>
      </div>
    </div>
...

We are moving router-view inside a "Modal" wrapper which will only be display when the showModal property is set to true

Then add this to style section

.modal-route {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba($color: #000000, $alpha: 0.5);
  .modal-content {
    width: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
  }

And finally in the script section, we add watcher for the $route property and create a showModal property inside our data. showModal is set to false to prevent the modal from being displayed when we first load the page.

...
 watch: {
    $route(newVal, oldVal) {
      this.showModal = newVal.meta && newVal.meta.showModal;
    }
  },
  data() {
    return {
      showModal: false
    }
  },

Every Vue component has a $route property that contains information about the current route. (More information on the $route object Here). By watching the $route property we can be notified when the current route changed.

Next open src/router.js and add a meta property to the /contacts/:contactId route

...
component: Contacts,
children: [
  {
    path: ':contactId',
    component: ContactInfo,
    props: true
    meta: {
      showModal: true
    }
  },
...

In Vue.js the meta property is used to pass additional information to the route. meta is not to be mistaken with the props property. More info on meta here

Now click on a contact and you should see the modal

The new route is now /contacts/user_0 and the contact info is displayed in the same page.

If you refresh the page you will see that the modal is not displayed even thought the route points to /contacts/:contactId The router-view modal is only displayed when showModal is set to true. The problem is that Vue does not call a watcher by default when a component is created and since showModal is set to false when the component is rendered, the modal is not visible. To fix this we need to refactor our $route watcher like this:

src/Contacts.vue

$route: {
      immediate: true,
      handler: function(newVal, oldVal) {
        this.showModal = newVal.meta && newVal.meta.showModal;
      }
}

The handler property is the function that is executed when a changes occurs to the property we are watching. immediate:true tells Vue to check the watched property $route when the component is created. More info on watched here

Now refresh the page and the modal should be displayed properly.

I hope you enjoyed this tutorial. The full source code is available on Github ! And a demo is a working demo is available at http://friendly-brain.surge.sh

My First JQuery Only App : Tic Tac Toe Emoji!

Charles-Eugene Loubao — Fri, 05 Apr 2019 16:32:37 +0000

Hi everyone !!

My name is Charles and I am so excited because this is my first post on Dev.to! I have been looking for something to write about for millenniums and finally I have something!!

A little bit about me, I am a 23 years old programmer originally from Cote D'Ivoire, Africa who came to the United States in 2015 to pursue an Associate's Degree in Computer Information Systems. I have graduated May 2018 and have been working at Delaware Tech Community College (my school) for about 2 years now as the Computer Information Systems tutor.

Now let's talk about the good stuff: Tic Tac Toe

This project came into existence because I have been trying to build something with Jquery but was too scared to start (why ? you tell me). I've been working on my skills as a programmer for the past 5 years first learning Android but in the past year I have decided to sharpen my skills in frontend and backend development. My first experience with web development was with Vue and I fell in love with it from the beginning. I always shy away from Jquery because it looked intimidating but I knew I had to learn how to make web apps without a 'framework'. Frameworks come and go but HTML, JS and CSS won't and Jquery being the go to library for vanilla JavaScript won't either.

That's why I decided to build something simple that doesn't require too much work but will help me get better working with Jquery

This is a basic Tic Tac Toe app that I built yesterday night. We are using the laughing emoji for player 1 and the angry emoji for player 2. The first player to get a row wins

I am planning making it look better with CSS and reorganize some of the code but for now it works for me.

The project is available on Github and a live version is available here

Feel free to look at it and give me some feedback :)

Thank you and have fun playing :)

DEV Community: Charles-Eugene Loubao

How to display a route as a modal in Vue.js

My First JQuery Only App : Tic Tac Toe Emoji!