# Nuxt3 套件使用紀錄
## aos
官方 modules 裡面有個套件是 Nuxt 版本的 aos：https://nuxt.com/modules/aos ，但目前有個 bug 作者太忙一直沒有修復，無法使用。所以我是直接安裝原本的 aos 套件
```shell
npm i aos --save
```
然後初始化：
```htmlembedded
<!-- /layouts/default.vue -->
<script setup>
import AOS from 'aos';
import 'aos/dist/aos.css';
onMounted(() => {
AOS.init();
});
</script>
```
最後就直接在 template 中正常使用了：
```htmlembedded
<h2 data-aos="fade-up">
標題標題標題標題標題標題
</h2>
```
> 後來有人又建立了一個叫做 nuxt3-aos 的套件： https://github.com/17630966776/nuxt3-aos ，可以參考看看。
## nuxt-viewport
用來在 Nuxt 中判斷 media query 。
安裝：
```shell
npm install --save-dev nuxt-viewport
```
設置 `nuxt.config.ts` ：
```typescript
export default defineNuxtConfig({
modules: [
'nuxt-viewport',
],
// 設定自己的斷點(這邊是設定成 BS 的斷點)，也可以不設定，直接用預設的斷點
viewport: {
breakpoints: {
xs: 375,
sm: 576,
md: 768,
lg: 992,
xl: 1200,
xxl: 1400,
},
cookieName: 'viewport',
defaultBreakpoints: {
desktop: 'xxl',
tablet: 'md',
mobile: 'sm',
},
fallbackBreakpoint: 'xxl',
},
})
```
在 .vue 中使用：
```javascript
const { $viewport } = useNuxtApp()
$viewport.isLessThan('lg') // 這邊會回傳是否小於 lg 斷點
```
## Bootstrap 5
用來在 Nuxt 中客製化自己的 Bootstrap 。
安裝：
```shell
npm install --save-dev sass
npm install bootstrap
```
建立 `/plugins/useBootstrap.client.js` ：
```javascript
import * as bootstrap from 'bootstrap'
export default defineNuxtPlugin(() => {
return {
provide: {
bootstrap: bootstrap,
}
}
})
```
建立 `/assets/scss/main.scss` ：
```sass=
// 首先要引入 bootstrap 5 的 functions
@import "bootstrap/scss/functions";
// 複寫官方的 variable
@import "variables.scss";
// 引入 bootstrap 5 需要的功能與元件
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/images";
@import "bootstrap/scss/containers";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/close";
@import "bootstrap/scss/modal";
@import "bootstrap/scss/helpers";
@import "bootstrap/scss/utilities/api";
// 最下面 import 自己的客製化 scss 檔案
```
設定 nuxt.config.ts ：
```typescript
export default defineNuxtConfig({
css: ['@/assets/scss/main.scss'],
})
```
通過 js 使用 modal 、 toast 等元件：
```javascript
const { $bootstrap } = useNuxtApp();
// 宣告變數
let toast;
let model;
onMounted(() => {
// 通過 js 啟用 toast
toast = new $bootstrap.Toast(document.getElementById('toast'))
// 通過 js 啟用 model
model = new $bootstrap.Modal(document.getElementById('news-modal'))
})
// 建立 js 函數，執行 toast.show() 顯示吐司（也可以只用純 HTML 顯示吐司）
const showToast = () => toast.show()
// 然後調用 dispose，以確保在組件被銷毀前進行必要的資源釋放
onUnmounted(() => model.dispose())
```
另外 Nuxt3 的官方文件中有提到 Nuxt 內建了 postcss，預設配置了 `autoprefixer` ，但實際開發卻沒看到 Prefix 出現，這邊需要做以下額外處理：
首先在 `package.json` 中添加：
```json
"browserslist": [
">0.3%",
"not ie 11",
"not dead",
"not op_mini all",
"last 3 version",
"Chrome >= 35",
"Firefox >= 38",
"Edge >= 10",
"Explorer >= 10",
"ie >= 10",
"iOS >= 8",
"Safari >= 8",
"Android 2.3",
"Android >= 4",
"Opera >= 12"
]
```
接著在 `nuxt.config.ts` 添加：
```typescript
postcss: {
plugins: {
autoprefixer: {},
},
},
```
最後執行` npm run dev` 或 build 出來後的 CSS 就會成功產出 Prefix 了。
## @nuxtjs/robots
用來在 Nuxt 中建立 `robots.txt` 檔案阻止爬蟲搜尋。
安裝：
```shell
npm install @nuxtjs/robots
```
設定及使用：
```typescript
export default defineNuxtConfig({
modules: [
'nuxt-viewport',
[
'@nuxtjs/robots',
{
rules: {
UserAgent: '*',
Disallow: '/admin/'
},
}
]
],
})
```
## vue-countup-v3
用來讓畫面上的數字從 0 跑到目標數字。
安裝：
```shell
npm install vue-countup-v3
```
設定 nuxt.config.ts ：
```typescript
export default defineNuxtConfig({
build: {
transpile: ['vue-countup-v3'],
},
})
```
使用：
```htmlembedded
<template>
<CountUp
class="d-inline"
:end-val="3000"
:options="{ duration: 0.75, enableScrollSpy: true, useGrouping: false }"
/>
</template>
<script setup>
import CountUp from 'vue-countup-v3'
</script>
```
## Tres.js
可理解為 Vue 版本的 Three.js ，但剛開發沒多久，先拿來做做小專案玩就好～
詳細使用方式請參考：https://hackmd.io/ghEdo63YQmCFJQg_Btw4-Q
Sign in with Wallet
Connect another wallet