# BaseSiteLoader
The BaseSiteLoader is a custom loading component for Nuxt. It should only be used in the nuxt.config.js file. Use BaseLoader if you need a loader for your components.
Default Nuxt Loaders
You can use the default Nuxt loading bar if you prefer to. Nuxt Documentation (opens new window)
// nuxt.config.js
export default {
...
loading: {
color: 'blue',
failedColor: 'red',
height: '5px'
},
...
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# Dependencies
This component uses multi-language variables.
# i18n
Make sure you have loading defined in your language files under ui.loader.
// e.g. nuxt-starter/i18n/de.js
export default {
...
ui: {
loader: {
...
loading: 'lädt',
...
},
...
},
...
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# Props
None.
# Variants
None.
# Example
Good
// nuxt.config.js
export default {
...
loading: '~/components/base/common/BaseSiteLoader.vue',
...
}
// or default Nuxt loader
export default {
...
loading: {
color: 'blue',
failedColor: 'red',
height: '5px'
},
...
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Bad
<!-- Don't use this component in components,
layouts or pages. Use BaseLoader instead. -->
<BaseSiteLoader />
1
2
3
2
3