Nuxt 3 專案建立筆記：CLI、目錄結構、路由與 Layout

npx clear-npx-cache

npx nuxi@latest init <project-name>

✔ Which package manager would you like to use?
  › npm / pnpm / yarn / bun

✔ Initialize git repository?
  › Yes / No

nuxt-app/
├── .nuxt/
├── node_modules/
├── public/
├── server/
├── app.vue
├── nuxt.config.ts
├── package.json
├── tsconfig.json
└── README.md

npm run dev

npm install -D vue-tsc

export default defineNuxtConfig({
  typescript: {
    typeCheck: true
  }
})

npm install -D eslint @nuxtjs/eslint-config-typescript eslint-plugin-vue

module.exports = {
  env: {
    browser: true,
    es2023: true
  },
  extends: ['@nuxtjs/eslint-config-typescript'],
  parserOptions: {
    ecmaVersion: 2023,
    sourceType: 'module'
  },
  rules: {
    'no-undef': 'off'
  }
}

nuxt-app/
├── .nuxt/
├── .output/
├── assets/
├── components/
├── composables/
├── content/
├── layouts/
├── middleware/
├── node_modules/
├── pages/
├── plugins/
├── public/
└── server/
    ├── api/
    ├── routes/
    └── middleware/
├── .gitignore
├── .nuxtignore
├── app.config.ts
├── app.vue
├── nuxt.config.ts
├── package.json
└── tsconfig.json

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

npm run build

const _routes = [
  {
    name: "about",
    path: "/about",
    component: () => import('./_nuxt/about-xxxxxxxx.mjs')
  },
  ...
]

<NuxtLink to="/about">前往 About</NuxtLink>
<NuxtLink to="/contact">前往 Contact</NuxtLink>

./pages/
└── users/
    └── [id].vue

<template>
  <div class="bg-white py-24">
    <div class="flex flex-col items-center">
      <h1 class="text-3xl text-gray-600">這裡是 Users 動態路由頁面</h1>
      <p class="my-8 text-3xl text-gray-600">
        匹配到的 Id:
        <span class="text-5xl font-semibold text-blue-600">{{ id }}</span>
      </p>
    </div>
  </div>
</template>

<script setup>
const route = useRoute()
const { id } = route.params
</script>

./pages/
└── catch-all/
    └── [...slug].vue

<template>
  <div class="bg-white py-24">
    <div class="flex flex-col items-center">
      <h1 class="text-4xl text-gray-800">這是 catch-all/... 下的頁面</h1>
      <p class="mt-8 text-3xl text-gray-600">匹配到的 Params:</p>
      <p class="my-4 text-5xl font-semibold text-violet-500">{{ $route.params.slug }}</p>
      <span class="text-xl text-gray-400">每個陣列元素對應一個層級</span>
    </div>
  </div>
</template>

<template>
  <div class="bg-white py-24">
    <div class="flex flex-col items-center">
      <h1 class="text-8xl font-semibold text-red-500">404</h1>
      <p class="my-8 text-3xl text-gray-800">Not Found</p>
    </div>
  </div>
</template>

<script setup>
setResponseStatus(404)
</script>

./pages/
└── posts/
    ├── [postId]/
    │   ├── comments/
    │   │   └── [commentId].vue
    │   └── index.vue
    ├── index.vue
    └── top-[number].vue

./pages/
├── docs/
│   ├── doc-1.vue
│   └── doc-2.vue
└── docs.vue

<template>
  <div class="bg-sky-100 py-2">
    <p class="px-6 py-4 text-2xl text-gray-700">這是預設的布局，全部頁面都會使用到</p>
    <slot name="header" />
    <slot />
    <slot name="footer" />
  </div>
</template>

<template>
  <div>
    <p class="pb-4 text-2xl text-slate-600">這裡是最外層 app.vue</p>
    <NuxtLayout name="default">
      <template #header>
        <p class="px-6 pt-4 text-xl text-green-500">這段會放置在 header 插槽</p>
      </template>
      <template #default>
        <NuxtPage />
      </template>
      <template #footer>
        <p class="px-6 pt-4 text-xl text-blue-500">這段會放置在 footer 插槽</p>
      </template>
    </NuxtLayout>
  </div>
</template>

<template>
  <div class="bg-rose-100 py-2">
    <p class="px-6 py-4 text-2xl text-gray-700">
      使用 <span class="font-bold text-rose-500">Custom</span> 布局
    </p>
    <slot />
  </div>
</template>

<script setup>
definePageMeta({
  layout: 'custom'
})
</script>

./components/
├── AppHeader.vue          → <AppHeader />
└── base/
    └── Button.vue         → <BaseButton />

npm install pinia @pinia/nuxt --save-dev

export default defineNuxtConfig({
  modules: [
    '@pinia/nuxt'
  ]
})

{
  "overrides": {
    "vue": "latest"
  }
}

npm install node-sass sass-loader sass -D

export default defineNuxtConfig({
  css: ['~/assets/scss/app.scss']
})

npm install -D @nuxtjs/tailwindcss

export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss']
})

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './components/**/*.{vue,js,ts}',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './composables/**/*.{js,ts}',
    './plugins/**/*.{js,ts}',
    './app.{js,ts,vue}'
  ],
  theme: {
    extend: {}
  },
  plugins: []
}

npm install -D prettier-plugin-tailwindcss

npx create-nuxt-app my-nuxt-project

? Project name: my-nuxt-project
? Programming language: (Use arrow keys)
❯ JavaScript
  TypeScript

? Package manager:
❯ Yarn
  Npm

? UI framework:
❯ None
  Ant Design Vue
  BalmUI
  Bootstrap Vue
  Buefy
  Chakra UI
  Element
  Framevuerk
  Oruga
  Tachyons
  Tailwind CSS
  Windi CSS
  Vant
  View UI
  Vuetify.js

? Template engine:
❯ HTML
  Pug

? Nuxt.js modules: (Press <space> to select)
❯ ◯ Axios - Promise based HTTP client
  ◯ Progressive Web App (PWA)
  ◯ Content - Git-based headless CMS

? Linting tools: (Press <space> to select)
❯ ◯ ESLint
  ◯ Prettier
  ◯ Lint staged files
  ◯ StyleLint
  ◯ Commitlint

? Testing framework:
❯ None
  Jest
  AVA
  WebdriverIO
  Nightwatch

? Rendering mode:
❯ Universal (SSR / SSG)
  Single Page App

? Deployment target:
❯ Server (Node.js hosting)
  Static (Static/Jamstack hosting)

? Development tools: (Press <space> to select)
❯ ◯ jsconfig.json
  ◯ Semantic Pull Requests
  ◯ Dependabot

npm install pinia

npm install node-sass sass-loader --save-dev

build: {
  loaders: {
    scss: { implementation: require('sass') }
  }
}

import { Configuration } from '@nuxt/types'

const config: Configuration = {
  build: {
    loaders: {
      scss: { implementation: require('sass') }
    }
  }
}

export default config