asyncData in component of Nuxtjs isn't working

Question

I have an issue with the nuxt.js project. I used async the component but when it rending, async wasn't working. This is my code.

I have view document in https://nuxtjs.org/api/ but I don't know what is exactly my issue

Test.vue (component)

    <template>
        <div>
            {{ project }}
        </div>
    </template>

    <script>

    export default {
        data() {
            return {
                project : 'aaaa'
            }
        },
        asyncData() {
            return {
                project : 'bbbb'
            }
        }
    }

    </script>

This is index.vue (page)

    <template>
        <test></test>
    </template>
    <script>

    import Test from '~/components/Test.vue'
    export default {
        components : {
            Test
        }
    }

    </script>

My expected result is

    bbbb

But when running on http://localhost:3000 this is actual result

    aaaa

I try to search google many times but don't have expected solution for me. Someone help me, please.

Thanks for helping.

Answer 1

The components/ folder must contains only "pure" Vue.js components

So you can't use asyncData inside.

Read this FAQ: https://nuxtjs.org/faq/async-data-components#async-data-in-components-

---

components/Test.vue (component)

<template>
    <div>
        {{ project }}
    </div>
</template>

<script>
export default {
    props: ['project'] // to receive data from page/index.vue
}
</script>

pages/index.vue (page)

<template>
    <test :project="project"></test>
</template>

<script>
import Test from '~/components/Test.vue'
export default {
    components : {
        Test
    },
    asyncData() {
        return {
            project : 'bbbb'
        }
    }
}
</script>