Async components delay in nuxt js

Question

Async component delay and loading not working.

My code:

<template>
   <div>
     <button @click="startMethod">start</button>
     <async-component v-if="start" />
   </div>
</template>

<script>
import Loading from '~/components/loading.vue'
import Error from '~/components/error'

const AsyncComponent = () => ({
  component: import('~/components/someComponent.vue'),
  loading: Loading, // not work
  error: Error, // good
  delay: 2000, // not work
  timeout: 3000 // good
});
export default {
  components: {
    AsyncComponent
  },
  data: () => ({
    start: false
  }),
  methods: {
    startMethod(){
      this.start = true
    }
  }
}
</script>

How do I delay the display of loading component? and I don’t understand why the loader is not displayed and delay is not working.

Answer 1

Because It's

Delay before showing the loading component. Default: 200ms.

Ref: https://v2.vuejs.org/v2/guide/components-dynamic-async.html#Handling-Loading-State

Try to set it 10 or 0 you will see your loading component