From 98baa268957e3b4385310acb5b3e9ba31ce3ed6b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <seb@chopin.io>
Date: Sat, 24 Dec 2016 17:59:13 +0100
Subject: [PATCH] Update custom-layout documentation

---
 examples/custom-layout/README.md | 54 +++++++++++++++++++++-----------
 1 file changed, 36 insertions(+), 18 deletions(-)

diff --git a/examples/custom-layout/README.md b/examples/custom-layout/README.md
index 7e8bb74520..a829a56d85 100644
--- a/examples/custom-layout/README.md
+++ b/examples/custom-layout/README.md
@@ -1,42 +1,60 @@
-# Extending the main app
+# Layouts
 
-> Nuxt.js allows you to extend the main application by adding a `layouts/app.vue` file
+> Nuxt.js allows you to extend the main layout or create custom layout by adding them in the `layouts/` directory
 
-## The default app
+## layouts/default.vue
 
-The default source code of the main app is:
+You can extend the main layout by adding a `layouts/default.vue` file.
+
+*Make sure to add the `<nuxt>` component when creating a layout to display the page component.*
+
+The default layout source code is:
 ```html
 <template>
-  <nuxt-container>
-    <nuxt/>
-  </nuxt-container>
+  <nuxt/>
 </template>
 ```
 
-## The `layouts/app.vue` file
+## layouts/error.vue
 
-### 🎬 [Example video](https://www.youtube.com/watch?v=wBhia7uBxDA)
+You can customize the error page by adding a `layouts/error.vue` file.
 
-You have to make sure to add the `<nuxt-container>` and `<nuxt>` components when extending the app.
+This layout is special since your should not include `<nuxt/>` inside its template, see this layout as a component displayed when an error occurs (404, 500, etc).
 
-It is important that the code you add stays inside `<nuxt-container>`.
+The default error page source code is available on: https://github.com/nuxt/nuxt.js/blob/master/lib/app/components/nuxt-error.vue
 
-Example:
+## layouts/*.vue
+
+See the [demonstration video](https://www.youtube.com/watch?v=YOKnSTp7d38).
+
+Every file (*first level*) in the `layouts/` directory will create a custom layout accessible with the `layout` property in the page component.
+
+*Make sure to add the `<nuxt>` component when creating a layout to display the page component.*
+
+Example of `layouts/blog.vue`:
 ```html
 <template>
-  <nuxt-container>
-    <div>My navigation bar here</div>
+  <div>
+    <div>My blog navigation bar here</div>
     <nuxt/>
-  </nuxt-container>
+  </div>
 </template>
 ```
 
+And then in `pages/posts.vue` I can tell Nuxt.js to use this custom layout:
+```html
+<script>
+export default {
+  layout: 'blog'
+}
+</script>
+```
+
 ## Demo
 
-
 ```bash
 npm install
-npm start
+npm run dev
 ```
 
-Go to [http://localhost:3000](http://localhost:3000) and navigate trough the app. Notice how the logo at the top right stays between the pages, even on the error page: [http://localhost:3000/404](http://localhost:3000/404)
+Go to [http://localhost:3000](http://localhost:3000) and navigate trough the app. To see the custom error page: [http://localhost:3000/404](http://localhost:3000/404)