
## Vue + nuxt.js

之前就在react做過不少next.js的開發，今天在做vue的第一步就是直接套用了nuxt，過程中只踩到一個小小的狀況，就是nuxt在終端機啟用的時候會有一個
`? Are you interested in participating? (Y/n)`的問句，導致在nuxt啟動的時候一直在啟動的狀態，自己也在終端機中按下不少Y或是n，唯獨就沒有按下enter....
這個部分真的是自己蠢導致的問題

```shell
yarn run v1.22.19
$ nuxi dev
                                                                                         11:27:10
Nuxi 3.2.3                                                                               11:27:10
Nuxt 3.2.3 with Nitro 2.2.3                                                              11:27:10
                                                                                         11:27:10
  > Local:    http://localhost:3000/
  > Network:  http://172.18.75.79:3000/

                                                                                         11:27:10
ℹ Nuxt collects completely anonymous data about usage.                                   11:27:10
  This will help us improve Nuxt developer experience over time.
  Read more on https://github.com/nuxt/telemetry

                                                                                         11:27:10
? Are you interested in participating? (Y/n)                                             11:27:10
                                                                                         11:27:10
                                                                                         11:27:10
```

## Vue src資料夾

在專案中的檔案結構，我通常喜歡把程式碼要放在src的資料夾中，當把`app.vue`放到src的資料夾中就會出現500的錯誤訊息，
主要是因為nuxt在建置時專案的目錄沒有`app.vue`與`pages/*`的頁面可以渲染，若`app.vue`跟`pages/*`的資料想要放在非專案的根目錄中，
就要在nuxt.config.ts(nuxt.config.js)加上`srcDir`的位置，他的預設值為專案的根目錄。

```typescript
// nuxt.config.ts
export default {
    srcDir:'./src'
}
```

## Vue + nuxt.js + tailwindcss

自己本身是tailwindcss的愛好者，所以在做練習時所用的css framework當然就是tailwindcss囉！這部分next.js的處理方式相差無幾
參照[Tailwindcss nuxt](https://tailwindcss.com/docs/guides/nuxtjs#3)的說明就可以完成了，
但個人偏好使用scss的方式所以多做了一些處理

```shell
yarn add -D tailwindcss postcss autoprefixer sass
npx tailwindcss init

```
初始化tailwindcss後，就要編輯`tailwindcss.config.js`的檔案，這邊分享一下自己初始設定
```javascript
// tailwindcss.config.js
module.exports = {
  content: [
      './src/**/*.{js,ts,jsx,tsx,vue}'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```
加入了`tailwindcss.config.js`後，要編輯`nuxt.config.js`檔案，使nuxt在偵錯或建置時會順變把tailwindcss的css產生處來。最後在`app.vue`的檔案中引入
```typescript
export default {
    css: ['~/assets/tailwindcss.scss'],
    postcss: {
        plugins: {
            tailwindcss: {},
            autoprefixer: {},
        },
    },
}
```
```vue
// app.vue
<style lang="scss">
@import "./assets/tailwindcss.scss";
</style>
```

## Vue Layout

vue+nuxt與react+next的layout設定比較不一樣，所以在這邊又上網看看別人是怎麼做的，vue的做法會建立一個layout的資料夾，然後建立一個layout.vue（或default.vue）
這樣的檔案，在`app.vue`使用時就會加入一個NuxtLayout，並指定layout檔案的名稱，這樣一來在`pages/*`的頁面就會自動套上了layout的設定，但如果需要每個頁面套用不同的layout要採取不同的設定

```vue
// default.vue
<template>
  <div class="bg-amber-600 py-2">
    <slot name="header" />
    <slot />
    <slot name="footer" />
  </div>
</template>

// app.vue
<template>
  <NuxtLayout name='default'>
    <NuxtLoadingIndicator />
    <NuxtPage />
  </NuxtLayout>
</template>
```

## 後記

在寫vue跟react的差異是，vue會全部的自動import而react是要自己在加入，這樣的設計是好是壞我覺得要看一些情況，在新手上路的過程中的確滿舒服的

## 參考資料

[Tailwindcss Nuxt](https://tailwindcss.com/docs/guides/nuxtjs#3)


這一篇可能會比較大雜燴一點，主要是接下來開始會以vue的開發為主，之前只有寫過一些測試性的頁面所以本身對vue不熟悉， 所以花了一天來做一些嘗試與體驗的過程與經驗

vue與nuxt的初體驗