此篇為簡化過程摘要

Page Component @/pages

<template>
	{{ title }} <!-- 2 -->
</template>

<script>
export default {
    /* Both */
    data() {
        return { title: 1 };
    },

    /* Server, Nuxt Hooks */
    asyncData ({ params }, callback) {
        callback(null, { title: 2 })
    },
    fetch() {},
    layout: 'front',

    /* Client, Vue Hooks */
    mounted() {
        console.info(this.title); /* 1 */
    },
}
</script>

其他頁面元件 API，可以參考文件或前一篇細部設定

跟 General Component 差在哪？

包含 /components/*.vue、/layouts/*.vue
一般 Vue File 寫法，無擴充屬性

<script>
export default {
    /* Both */
    data() {
        return { title: 1 };
    },

    /* Server, Nuxt Hooks 從缺 */
    /*
    asyncData ({ params }, callback) {
        callback(null, { title: 2 })
    },
    fetch() {},
    layout: 'front',
    */

    /* Client, Vue Hooks */
    mounted() {
        console.info(this.title, this);
    },
}
</script>

Page Component 該怎麼拆？

1. 觀察頁面組成，多個頁面重複使用，挪到 /layouts
2. 各區塊切為單一元件，挪進 /components
3. 觀察資料與頁面的關係，定義 props

甜點電商拆的順序則是

1. 拆/layouts/front.vue
2. 拆/components，Header、Footer
3. 觀察需要透過 API 餵的資料，寫在 asyncData、fetch，透過 props傳給 component