|
| 1 | +# Custom loading with Nuxt.js |
| 2 | + |
| 3 | +> Nuxt.js uses it's own component to show a progress bar between the routes. You can customize it, disable it or create your own component. |
| 4 | +
|
| 5 | +## Disable Nuxt.js progress bar |
| 6 | + |
| 7 | +If you don't want to display the progress bar between the routes, just add `loading: false` in your `nuxt.config.js` file: |
| 8 | +```js |
| 9 | +// nuxt.config.js |
| 10 | +module.exports = { |
| 11 | + loading: false |
| 12 | +} |
| 13 | +``` |
| 14 | + |
| 15 | +## Customize Nuxt.js progress bar |
| 16 | + |
| 17 | +Here are the properties you can customize for Nuxt.js progress bar. |
| 18 | + |
| 19 | +| Key | Type | Default | Description | |
| 20 | +|-----|------|---------|-------------| |
| 21 | +| `color` | String | `'black'` | CSS color of the progress bar | |
| 22 | +| `failedColor` | String | `'red'` | CSS color of the progress bar when an error appended during rendering the route (if `data` or `fetch` sent back an error for example). | |
| 23 | +| `height` | String | `'2px'` | Height of the progress bar (used in the `style` property of the progress bar) | |
| 24 | +| `duration` | Number | `5000` | In ms, the maximum duration of the progress bar, Nuxt.js assumes that the route will be rendered before 5 seconds. | |
| 25 | + |
| 26 | +Example: |
| 27 | +```js |
| 28 | +// nuxt.config.js |
| 29 | +module.exports = { |
| 30 | + loading: { |
| 31 | + color: 'blue', |
| 32 | + height: '5px' |
| 33 | + } |
| 34 | +} |
| 35 | +``` |
| 36 | + |
| 37 | +## Create a custom loading component |
| 38 | + |
| 39 | +You can create your own component that Nuxt.js will call instead of its default component. To do so, you need to give a path to your component in the `loading` option. |
| 40 | + |
| 41 | +Your custom component will be called by Nuxt.js, so make sure your component exposes some of theses methods: |
| 42 | + |
| 43 | +| Method | Required | Description | |
| 44 | +|--------|-------------| |
| 45 | +| `start()` | Required | Called when a route changes, this is here where you should show your component. | |
| 46 | +| `finish()` | Required | Called when a route is loaded (and data fetched), this is here where you should hide your component. | |
| 47 | +| `fail()` | *Optional* | Called when a route could not be loaded (failed to fetch data for example). | |
| 48 | +| `increase(num)` | *Optional* | Called during loading the route component, `num` is an Integer < 100. | |
| 49 | + |
| 50 | + |
| 51 | +Example: |
| 52 | +```js |
| 53 | +// nuxt.config.js |
| 54 | +module.exports = { |
| 55 | + loading: 'components/loading.vue' |
| 56 | +} |
| 57 | +``` |
| 58 | + |
| 59 | +And then, in `components/loading.vue`: |
| 60 | +```html |
| 61 | +<template lang="html"> |
| 62 | + <div class="loading-page" v-if="loading"> |
| 63 | + <p>Loading...</p> |
| 64 | + </div> |
| 65 | +</template> |
| 66 | + |
| 67 | +<script> |
| 68 | +export default { |
| 69 | + data: () => ({ |
| 70 | + loading: false |
| 71 | + }), |
| 72 | + methods: { |
| 73 | + start () { |
| 74 | + this.loading = true |
| 75 | + }, |
| 76 | + finish () { |
| 77 | + this.loading = false |
| 78 | + } |
| 79 | + } |
| 80 | +} |
| 81 | +</script> |
| 82 | + |
| 83 | +<style scoped> |
| 84 | +.loading-page { |
| 85 | + position: fixed; |
| 86 | + top: 0; |
| 87 | + left: 0; |
| 88 | + width: 100%; |
| 89 | + height: 100%; |
| 90 | + background: rgba(255, 255, 255, 0.8); |
| 91 | + text-align: center; |
| 92 | + padding-top: 200px; |
| 93 | + font-size: 30px; |
| 94 | + font-family: sans-serif; |
| 95 | +} |
| 96 | +</style> |
| 97 | +``` |
| 98 | + |
| 99 | +## Demo |
| 100 | + |
| 101 | +```bash |
| 102 | +npm install |
| 103 | +npm start |
| 104 | +``` |
| 105 | + |
| 106 | +Go to [http://localhost:3000](http://localhost:3000) and navigate trough the app. |
0 commit comments