From b9cd2f6e70ae27bb5fb13df046a5cc54b955abed Mon Sep 17 00:00:00 2001
From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Fri, 8 Dec 2017 14:51:50 +0100
Subject: [PATCH 1/4] docs: add example of nested named routes

Closes #1921
---
 docs/en/essentials/named-views.md | 55 +++++++++++++++++++++++++++++++
 1 file changed, 55 insertions(+)

diff --git a/docs/en/essentials/named-views.md b/docs/en/essentials/named-views.md
index e72317803..d8e458c72 100644
--- a/docs/en/essentials/named-views.md
+++ b/docs/en/essentials/named-views.md
@@ -27,3 +27,58 @@ const router = new VueRouter({
 ```
 
 A working demo of this example can be found [here](https://jsfiddle.net/posva/6du90epg/).
+
+## Nested Named Views
+
+While being quite complex, it is possible to combine named views with nested view. 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_
+
+```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 full example at the end in the jsfiddle_
+
+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/).

From dfb456f3cd4c1cc6ee8761b404e914dfdb753b36 Mon Sep 17 00:00:00 2001
From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Fri, 8 Dec 2017 16:10:02 +0100
Subject: [PATCH 2/4] docs: add link of jsfiddle in note

---
 docs/en/essentials/named-views.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/en/essentials/named-views.md b/docs/en/essentials/named-views.md
index d8e458c72..246bf05de 100644
--- a/docs/en/essentials/named-views.md
+++ b/docs/en/essentials/named-views.md
@@ -60,7 +60,7 @@ While being quite complex, it is possible to combine named views with nested vie
 </div>
 ```
 
-_The nested view components are omitted here but you can find the full example at the end in the jsfiddle_
+_The nested view components are omitted here but you can find the full example [here](https://jsfiddle.net/posva/22wgksa3/)_
 
 Then you can achieve the layout above with this route configuration:
 

From 481401b86a19f8834a3cbd6662a707a4bfcfb811 Mon Sep 17 00:00:00 2001
From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Mon, 11 Dec 2017 11:25:32 +0100
Subject: [PATCH 3/4] review

---
 docs/en/essentials/named-views.md | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/docs/en/essentials/named-views.md b/docs/en/essentials/named-views.md
index 246bf05de..9f9dd83b6 100644
--- a/docs/en/essentials/named-views.md
+++ b/docs/en/essentials/named-views.md
@@ -30,7 +30,7 @@ A working demo of this example can be found [here](https://jsfiddle.net/posva/6d
 
 ## Nested Named Views
 
-While being quite complex, it is possible to combine named views with nested view. When doing so, you will also need to name nested `router-view` components used. Let's take a Settings panel example:
+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
@@ -50,6 +50,8 @@ While being quite complex, it is possible to combine named views with nested vie
 
 **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 above layout would be something like this:
+
 ```html
 <!-- UserSettings.vue -->
 <div>
@@ -60,7 +62,7 @@ While being quite complex, it is possible to combine named views with nested vie
 </div>
 ```
 
-_The nested view components are omitted here but you can find the full example [here](https://jsfiddle.net/posva/22wgksa3/)_
+_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:
 

From 63cd66f50af2bad2d0df0163401ac905e4516327 Mon Sep 17 00:00:00 2001
From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Mon, 11 Dec 2017 11:30:18 +0100
Subject: [PATCH 4/4] [skip ci] review

---
 docs/en/essentials/named-views.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/en/essentials/named-views.md b/docs/en/essentials/named-views.md
index 9f9dd83b6..b964fdb71 100644
--- a/docs/en/essentials/named-views.md
+++ b/docs/en/essentials/named-views.md
@@ -50,7 +50,7 @@ It is possible to create complex layouts using named views with nested views. Wh
 
 **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 above layout would be something like this:
+The `<template>` section for `UserSettings` component in the above layout would look something like this:
 
 ```html
 <!-- UserSettings.vue -->