Nuxt3 配置筆記

介紹

學習Nuxt3順手把它使用上的重點給記錄下來

Router設定

1.創建 folder/pages

2.修改 app.vue

<template>
    <div>
        <NuxtPage></NuxtPage>
    </div>
</template>

3.如果需要透過Router使用 <NuxtLink to="/"></NuxtLink>

4.如果要設定動態Router使用方括號, ex: /user-[group]/[id], 讀取方框號值使用 {{$route.params.key}}

5.嵌套路由 需創建同名folder與file 創建 folder/parent與 parent.vue , /parent底下可以有預設頁面index.vue 也可以有其他child.vue,而外層的parent.vue需要使用<NuxtChild></NuxtChild>當子組件出口, Router就能使用 /parent/child指到該路由

Layouts設定

1.創建 folder/layouts

2.在/layouts底下創建default.vue

3.新增default.vue內容

<template>
  <div>
    Some default layout shared across all pages
    <slot />
  </div>
</template>

4.修改app.vue

<template>
  <div>
    <NuxtLayout>
      <NuxtPage></NuxtPage>
    </NuxtLayout>
  </div>
</template>

補充

也可以使用以下方式載入對應的layout
<NuxtLayout name="layout Name">
或者是透過Script

<script>
// This will work in both `<script setup>` and `<script>`
definePageMeta({
  layout: "layout Name",
});
</script>

參考：https://v3.nuxtjs.org/guide/directory-structure/layouts

Components 設定

1.創建 folder/Components

2.創建component file component.vue 在template中可以直接呼叫, 但要注意大小寫名稱依照創建的file為主

補充
如果是在透過路徑下的方式呼叫component會是依照 folder name組合來呼叫, ex：/components/base/btn/button.vue, 那呼叫的名稱就會是BaseBtnButton以此類推