Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-11 08:33:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update custom-layout documentation

Browse Source
This commit is contained in:
Sébastien Chopin 2016-12-24 17:59:13 +01:00
parent fcae73a79b
commit 98baa26895
1 changed files with 36 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
examples/custom-layout/README.md
View File

@ -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)