Nuxt3 自訂佈局(設定空佈局)

在 Nuxt3 中，可以建立 pages 資料夾，在裡面建立各種 .vue 檔案建立頁面。

	
my-project/
|-- pages/
|   |-- page1.vue
|   |-- page2.vue
|   `-- page3.vue
`-- app.vue
	

在 app.vue 中使用 <NuxtPage/> 標籤，在 pages 檔案裡面的內容就會出現在標籤之中：

    
<template>
  <NuxtPage/>
</template>
    

就可以很方便的將要複用的佈局放在 app.vue 中，例如 <header>, <footer> 等。

多個佈局

但是如果有些頁面不想要和 app.vue 共用該怎麼做？例如 登入頁面(login.vue) 需要一個空白的 layout

我們可以把 app.vue 檔案移動到 layouts 資料夾中，並重新命名為 default.vue

	
my-project/
|-- pages/
|   |-- page1.vue
|   |-- page2.vue
|   `-- page3.vue
`-- layouts/
    `-- default.vue
	

在 layouts 建立一個 empty.vue 檔案，裡面只有 <NuxtPage/> 標籤(這樣就是空白佈局)：

    
<template>
  <NuxtPage/>
</template>
    

然後在登入頁面最上面加入 definePageMeta ，將 layout 設定為 layouts 資料夾內的檔案名稱 empty 即可：

    
<script setup lang="ts">
definePageMeta({
  layout: 'empty', // layouts/empty.vue
})
</script>
    

檔案結構如下：

	
my-project/
|-- pages/
|   |-- page1.vue
|   |-- page2.vue
|   |-- page3.vue
|   `-- login.vue
`-- layouts/
    |-- empty.vue
    `-- default.vue
	

這樣就成功把 login.vue 頁面的 layout 設定為空白(empty.vue)了

參考資料：
Nuxt3 - layouts
Nuxt3 - definePageMeta