Nuxtメモ
kurumin
プログラミングのーと
Nuxt3の記述ルール
kurumin
Contents
<script setup> での理想的な構成順
<script setup>
// 1. 外部ライブラリの import
// 2. 内部（プロジェクト内）モジュールの import
// 3. useHead などの副作用系の呼び出し（SEO設定など）
// 4. const などの変数定義（ref, reactive）
// 5. 非同期データ取得（await/try-catch）
// 6. computed 定義
// 7. 関数（methods）定義（イベントハンドラなど）
</script>詳細解説
importの順番
// 外部ライブラリ（公式/サードパーティ）
import { ref, computed } from 'vue'
import { useHead } from '@vueuse/head'
// プロジェクト内（@/ や ~ などで始まるもの）
import { useFetchData } from '~/composables/useFetchData'
- 外部と内部をグループ化して分けることで視認性UP
- アルファベット順までは好みによる（並べ替え用のESLintルールもある）
SEOなどの副作用系（useHeadなど）
useHead はページ読み込み時に効く副作用的な処理なので、importの直後に置くのが自然。
状態の定義（ref / reactive）
データを管理する状態（currentPage、blogListなど）は、できるだけまとまって定義。
const itemsPerPage = 4
const currentPage = ref(1)
const blogList = ref([])
const fetchError = ref(null)非同期データ取得（await）
await や try-catch を使ってデータを取得。これは状態の定義の直後に置くのが自然。
computed の定義
state をもとに派生した値は一か所にまとめると読みやすくなる。
const totalCount = computed(...)
const totalPages = computed(...)
const paginatedItems = computed(...)
const firstItem = computed(...)
const remainingItems = computed(...)イベントハンドラやロジック関数
後半にイベントやロジック系の関数（例：handlePageChange）を配置。
const handlePageChange = (page) => {
...
}ABOUT ME
