mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-23 14:15:13 +00:00
43 lines
940 B
Markdown
43 lines
940 B
Markdown
|
# Extending the main app
|
||
|
|
|
||
|
|
> Nuxt.js allows you to extend the main application by adding a `pages/_app.vue` file
|
||
|
|
|
||
|
|
## The default app
|
||
|
|
|
||
|
|
The default source code of the main app is:
|
||
|
|
```html
|
||
|
|
<template>
|
||
|
|
<nuxt-container>
|
||
|
|
<nuxt/>
|
||
|
|
</nuxt-container>
|
||
|
|
</template>
|
||
|
|
```
|
||
|
|
|
||
|
|
## The `pages/_app.vue` file
|
||
|
|
|
||
|
|
### 🎬 [Example video](https://www.youtube.com/watch?v=wBhia7uBxDA)
|
||
|
|
|
||
|
|
You have to make sure to add the `<nuxt-container>` and `<nuxt>` components when extending the app.
|
||
|
|
|
||
|
|
It is important that the code you add stays inside `<nuxt-container>`.
|
||
|
|
|
||
|
|
Example:
|
||
|
|
```html
|
||
|
|
<template>
|
||
|
|
<nuxt-container>
|
||
|
|
<div>My navigation bar here</div>
|
||
|
|
<nuxt/>
|
||
|
|
</nuxt-container>
|
||
|
|
</template>
|
||
|
|
```
|
||
|
|
|
||
|
|
## Demo
|
||
|
|
|
||
|
|
|
||
|
|
```bash
|
||
|
|
npm install
|
||
|
|
npm start
|
||
|
|
```
|
||
|
|
|
||
|
|
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)
|