Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-13 09:33:54 +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 ```html
<template> <template>
<nuxt-container> <nuxt/>
<nuxt/>
</nuxt-container>
</template> </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 ```html
<template> <template>
<nuxt-container> <div>
<div>My navigation bar here</div> <div>My blog navigation bar here</div>
<nuxt/> <nuxt/>
</nuxt-container> </div>
</template> </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 ## Demo
```bash ```bash
npm install 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)