I have tried to add a loader as shown in the nuxt.js documentation in between the routes but its not work. But I'm not able to add a splash screen before the app starts.
Code snippet in my components/loading.vue
<template>
<div v-if="loading" class="loading-page">
<p>Loading...</p>
</div>
</template>
<script>
export default {
data: () => ({
loading: false
}),
methods: {
start(){
this.loading = true
},
finish(){
this.loading = false
}
}
}
</script>
In nuxt.js.config
export default {
...
loading: '~/components/loading.vue'
...
}
As far as I know, you can't use a Vue component as a loading indicator for your your Nuxt app.
You will have to create an HTML document instead. This HTML document does not have to have an
<html>,<head>or<body>. It just has to be the splash screen you want to show.Here's how I did it:
~/assets/loading.htmlnuxt.config.jsfile.Example HTML file:
Here's a very simple file to show a splash screen image, when loading a nuxt app.
NOTE:
Pay attention to
<%= options.img %>. I'm making use of options, which can be defined in thenuxt.config.jssimply by adding more keys toloadingIndicator, an example can be seen below.NOTE 2:
When accessing assets such as images in the loading indicator, you will have to put them in the
/staticfolder.Documentation: https://nuxtjs.org/docs/2.x/features/loading#custom-indicators
Official examples: https://github.com/nuxt/nuxt.js/tree/dev/packages/vue-app/template/views/loading