From 9e78ca2ff5dcba5cc23629d870cba2e2367b4a86 Mon Sep 17 00:00:00 2001
From: Eduardo San Martin Morote <posva@users.noreply.github.com>
Date: Wed, 10 Jan 2018 17:40:04 +0100
Subject: [PATCH] docs: add example of nested named routes (#1931)

* docs: add example of nested named routes

Closes #1921

* docs: add link of jsfiddle in note

* review

* [skip ci] review
---
 docs/en/essentials/named-views.md | 57 +++++++++++++++++++++++++++++++
 1 file changed, 57 insertions(+)

diff --git a/docs/en/essentials/named-views.md b/docs/en/essentials/named-views.md
index e72317803..b964fdb71 100644
--- a/docs/en/essentials/named-views.md
+++ b/docs/en/essentials/named-views.md
@@ -27,3 +27,60 @@ const router = new VueRouter({
 ```
 
 A working demo of this example can be found [here](https://jsfiddle.net/posva/6du90epg/).
+
+## Nested Named Views
+
+It is possible to create complex layouts using named views with nested views. When doing so, you will also need to name nested `router-view` components used. Let's take a Settings panel example:
+
+```
+/settings/emails                                       /settings/profile
++-----------------------------------+                  +------------------------------+
+| UserSettings                      |                  | UserSettings                 |
+| +-----+-------------------------+ |                  | +-----+--------------------+ |
+| | Nav | UserEmailsSubscriptions | |  +------------>  | | Nav | UserProfile        | |
+| |     +-------------------------+ |                  | |     +--------------------+ |
+| |     |                         | |                  | |     | UserProfilePreview | |
+| +-----+-------------------------+ |                  | +-----+--------------------+ |
++-----------------------------------+                  +------------------------------+
+```
+
+- `Nav` is just a regular compnonent
+- `UserSettings` is the view comopnent
+- `UserEmailsSubscriptions`, `UserProfile`, `UserProfilePreview` are nested view components
+
+**Note**: _Let's forget about how the HTML/CSS should look like to represent such layout and focus on the components used_
+
+The `<template>` section for `UserSettings` component in the above layout would look something like this:
+
+```html
+<!-- UserSettings.vue -->
+<div>
+  <h1>User Settings</h1>
+  <NavBar/>
+  <router-view/>
+  <router-view name="helper"/>
+</div>
+```
+
+_The nested view components are omitted here but you can find the complete source code for the example above [here](https://jsfiddle.net/posva/22wgksa3/)_
+
+Then you can achieve the layout above with this route configuration:
+
+```js
+{ path: '/settings',
+  // You could also have named views at the top
+  component: UserSettings,
+  children: [{
+    path: 'emails',
+    component: UserEmailsSubscriptions
+  }, {
+    path: 'profile',
+    components: {
+      default: UserProfile,
+      helper: UserProfilePreview
+    }
+  }]
+}
+```
+
+A working demo of this example can be found [here](https://jsfiddle.net/posva/22wgksa3/).