Handling Dialogs with Vue Router
Tags: vue, tutorial, javascript, programming
Published: 2019-04-17 11:21:45

---
title: Handling Dialogs with Vue Router
published: true
description: How to design your Vue Router architecture to be able to handle dialogs
tags: #vue #tutorial #javascript #programming
series: Vue Router Architecture
cover_image: https://thepracticaldev.s3.amazonaws.com/i/klbdiy4sfbso24cvg4hn.png
---

In the first part of this little series on Vue Router Architecture I wrote about [handling nested routes with Vue Router](https://dev.to/berniwittmann/my-approach-on-vue-router-architecture-and-nested-routes-2kmo). It would maybe easier to follow if you have read that already, but here is a very short summary:
That tutorial introduced an `EmptyRouterView` component for handling the nested routes.

But we can also use this component for handling dialogs like this one:

![](https://thepracticaldev.s3.amazonaws.com/i/ti1j95m95u9oafo4qbx3.png)

![](https://media.giphy.com/media/1M9fmo1WAFVK0/giphy.gif)

By handling the visibility of dialogs with vue router we can easily toggle them by navigating to the corresponding urls. And in my opinion this results in a more clean codebase. So how do we do it?

### Step 1: Update our `EmptyRouterView` Component

First we need to edit our `EmptyRouterView` component:

```
<template>
  <div>
    <router-view name="dialog"></router-view>
    <router-view></router-view>
  </div>
</template>

```

The component now contains two `router-views`. The lower one (the default one) is used for displaying the background (or the normal page in case no dialog should be shown). Meanwhile the one for the dialog will contain the content of our dialog.


### Step 2: Create a component for our dialog

Now we have to create a component for our dialog:

```
template>
  <div class="dialog">
    <div class="dialog__inner">
      <h3>My Dialog</h3>
      <p>Content</p>
      <a class="btn" @click="close">Close</a>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    close () {
      this.$router.back()
    }
  }
}
</script>

<style lang="scss">
.dialog {
  # Styling for the background overlay of the dialog

  &__inner {
    # Styling for the dialog itself
  }
}
</style>

```

This is a pretty simple component, however you need some styling to make it look like a dialog (you could also use bootstraps classes for it, or something else). Maybe you noticed that I also included a back button already. We can simply use the `router.back()` method for navigating one page back to close the modal, since we toggle the visibility with the routes from Vue-Router.

### Step 3: Update the Route Config

Last but not least we have to specify the route configuration for Vue Router in our `router.js` config: 

```
routes: [{
    path: '/nested,
    component: EmptyRouterView,
    children: [{
        name: 'nested',
        path: '',
        component: MyPageView
    }, {
        name: 'nested.dialog',
        path: 'dialog',
        components: {
            default: MyPageView,
            dialog: MyDialogComponent
        }
    }]
}]
```

For our dialog route with name `nested.dialog` at the url `/nested/dialog` we specify the components `MyPageView` as the background and `MyDialogComponent` for the dialog itself. Since this route is a child of a route that has the `EmptyRouterView` component, these components directly fill the `router-views` specified in our `EmptyRouterView` Component.

This was already it. Now we can navigate to our route at `/nested/dialog` and you'll see the dialog: 

![](https://thepracticaldev.s3.amazonaws.com/i/ti1j95m95u9oafo4qbx3.png)

You can also play around with it in the repo i created:

{% github berniwittmann/vue-router-architecture %}

That's it for now. Feel free to let me know your thoughts on this 😁