Nuxt + TypeScript構築手順メモ

ここのところ、Nuxt+TypeScriptをきちんとやり始めてある程度形ができてきたので、初期構築部分をメモします。気分で追記していきます。

テンプレートを作っておくと半年くらいすると使えなくなるので、手順を書いておく方が少し時間はかかりますが役に立つ気がします。

# Nuxt初期インストール
さくっとインストールします。細かい部分は、プロジェクトにあわせてですが、後で手間が省けます。

```
$ yarn create nuxt-app <project-name>
create-nuxt-app v3.6.0

? Project name: (app)
? Programming language: TypeScript
? Package manager: Yarn
? UI framework: Element
? Nuxt.js modules: Axios
? Linting tools: ESLint, Prettier
? Testing framework: Jest
? Rendering mode: Universal (SSR / SSG) 
? Deployment target: Server (Node.js hosting)
? Development tools: None
? Continuous integration: None
? Version control system: Git
```

# モジュール追加等

## nuxt-property-decorator

https://github.com/nuxt-community/nuxt-property-decorator

記事によってTypeScriptの書き方が異なりコピペすると動くので混乱していたのですが、Vue.extend、vue-class-component、vue-property-decorator 
の3系等あるのに気づきました（遅い。[ここを読んで理解できました。感謝。](https://qiita.com/potato4d/items/c9c0c8e674f20c85948a)

いろいろ試した結果、個人的にはproperty-decoratorに落ち着きました。


### インストール

```
yarn add nuxt-property-decorator
```

### 基本書式

```javascript
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component({
  asyncData() {
    return {}
  },
})
export default class SampleComponent extends Vue {}
</script>
```

### 参考

↓毎回見ています

https://qiita.com/simochee/items/e5b77af4aa36bd0f32e5

## TailwindCSS

https://tailwindcss.com

あまりガッツリした物を作らないので、基本はElemetsなどのコンポーネントを利用するのですが、細かい部分などでカスタマイズが必要な場合にCSSを書くよりhtmlの中に混ぜれるので個人的には手早くて好きになりました。

### インストール

基本は[ここ](https://tailwindcss.com/docs/guides/nuxtjs)の通りです。

```
yarn add -D @nuxtjs/tailwindcss tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init
```

### 設定

```javascript:nuxt.config.js
export default {
  buildModules: ['@nuxtjs/tailwindcss'],
  ...
}
```

```javascript:tailwind.config.js
 module.exports = {
   ....
   purge: [
     './components/**/*.{vue,js}',
     './layouts/**/*.vue',
     './pages/**/*.vue',
     './plugins/**/*.{js,ts}',
     './nuxt.config.{js,ts}',
   ],
   ...
  }
```

## dayjs

https://github.com/iamkun/dayjs

日付処理は最近はdayjsをつかっています。いろいろなところで日付操作は出てくるのでモジュールとして入れています。

### インストール

```
yarn add @nuxtjs/dayjs
```

### 設定

```
export default {
  ...
  modules: [
    '@nuxtjs/dayjs',
  ],
  ...
}
```

### 使い方

モジュールなので$dayjs()で使えます。

## nuxt-firebase

https://firebase.nuxtjs.org

firebaseを使うのは最近はこれが一番簡単な気がします。

### インストール

```
yarn add firebase
yarn add @nuxtjs/firebase
```

### 設定

```javascript:nuxt.config.js
modules: ['@nuxtjs/firebase'],

firebase: {
  config: {
    apiKey: '<apiKey>',
    authDomain: '<authDomain>',
    projectId: '<projectId>',
    storageBucket: '<storageBucket>',
    messagingSenderId: '<messagingSenderId>',
    appId: '<appId>',
    measurementId: '<measurementId>'
  },
  services: {
    auth: true // Just as example. Can be any other service.
  }
}
```

### 使い方

``$fire``か、staticのものは``$fireModule``を使います。

![スクリーンショット 2021-06-15 10.45.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14768/459969e9-7654-6cf2-4043-7c4117ce29c9.png)

https://firebase.google.com/docs/reference/js


## element

https://element.eleme.io/#/en-US

さっくり作れるので個人的に好き。でもどちらかというと文字薄めで綺麗なんだけど、見にくいという人もいますね。