# Install

npx nuxi init [專案名稱]

# 環境設定
### settings.json

{
"editor.defaultFormatter": "esbenp.prettier-vscode",
 "[javascript]": {
     "editor.formatOnSave": true,
     "editor.defaultFormatter": "esbenp.prettier-vscode"
 },
 "[vue]": {
     "editor.formatOnSave": true,
     "editor.defaultFormatter": "esbenp.prettier-vscode"
 },
 "[css]": {
     "editor.formatOnSave": true,
     "editor.defaultFormatter": "esbenp.prettier-vscode"
 },
 "[scss]": {
     "editor.formatOnSave": true,
     "editor.defaultFormatter": "esbenp.prettier-vscode"
 },
 "[html]": {
     "editor.formatOnSave": true,
     "editor.defaultFormatter": "esbenp.prettier-vscode"
 },
 "prettier.disableLanguages": []
}

---

### Commands add
* pages

npx nuxi add page about // app.vue 改 <NuxtPage />

* layouts

npx nuxi add layout default // app.vue 可刪除

* components

npx nuxi add component Home

> 放在 components 資料夾下可自動 import ，如果資料夾裡面有其他組件，要使用的話就要加上前面資料夾的名稱跟檔名

"components": {
  "dirs": [
    {
        "path": "~/components/global",
        "global": true
    }
  ]
}

> 如果只想要特定的組件 auto import
* composables

npx nuxi add composable addCount

---

### Pinia

npm install pinia @pinia/nuxt

nuxt.config

"imports": {
    "dirs": ['stores']
},
"modules": [
    [
        '@pinia/nuxt',
        {
            'autoImports': ['defineStore', 'acceptHMRUpdate'],
        },
    ]
],

創建 stores 資料夾，新增 Home.js

import { defineStore } from "pinia";
export const useHomeStore = defineStore("home", () => {
 const count = ref(0);
 const add = () => {
   count.value++;
 };
 return { count, add };
});

使用 store

const store = useHomeStore();

# SEO

useSeoMeta({
 title: "這是title",
 description: "這是description",
 ogDescription: "og的description",
 ogTitle: "og的title",
 ogImage: "og的imageurl",
 twitterCard: "",
 twitterSite: "",
 twitterCreator: "",
});

# fetch

### useFetch

const { data } = await useFetch("/api/hello", {
 method: "GET",    // HTTP 請求的方法，GET(default)、POST 、 DELETE、PUT。
 query: {},        // 將參數透過？的方式帶到 URL 上
 params: {},       // 將參數帶到 URL 上
 body: {},         // Request body
 headers: {},      // Request headers
 baseURL: "/",     // 基本的 API URL 路徑
});

### 多個 api

const [{ data: data1 },{ data: data2 },{ data: data3 },{ data: data4 }] = await Promise.all([
   useFetch(`url1`),
   useFetch(`url2`),
   useFetch(`url3`),
   useFetch(`url4`),
]);

# env

.env

NUXT_TOKEN=1234567890
NUXT_PUBLIC_API_URL=https://.....

nuxt.config

export default defineNuxtConfig({
 "runtimeConfig": {
   "token": '',
   "public": {
     "apiUrl": '',
   }
 },
})

> 名稱要用 NUXT 開頭，底線區分自動覆蓋 runTimeConfig 的設定

const config = useRuntimeConfig();
const { data } = await useFetch(`${config.public.apiUrl}/api/test`, {
  headers: {
    Authorization: `Bearer ${config.token}`,
  },
});