透過 100 多個技巧學習 Nuxt!

defineNuxtComponent

defineNuxtComponent() 是一個輔助函式,用於使用 Options API 定義類型安全的元件。
defineNuxtComponent() 是一個輔助函式,用於使用 options API 定義類型安全的 Vue 元件,類似於 defineComponent()defineNuxtComponent() 包裝器還增加了對 asyncDatahead 元件選項的支援。
建議使用 <script setup lang="ts"> 在 Nuxt 3 中宣告 Vue 元件。
請閱讀 文件 > 開始使用 > 資料獲取 以了解更多資訊。

asyncData()

如果您選擇不在應用程式中使用 setup(),您可以在元件定義中使用 asyncData() 方法

pages/index.vue
<script lang="ts">
export default defineNuxtComponent({
  async asyncData() {
    return {
      data: {
        greetings: 'hello world!'
      }
    }
  },
})
</script>

如果您選擇不在應用程式中使用 setup(),您可以在元件定義中使用 head() 方法

pages/index.vue
<script lang="ts">
export default defineNuxtComponent({
  head(nuxtApp) {
    return {
      title: 'My site'
    }
  },
})
</script>