DockerでNuxt.js on TypeScriptを始めてみよう

# 背景

[もっと簡単にDockerでNuxt.jsを始めてみる(続Dockerでローカル環境を汚さずにNuxt.jsを始めてみる)](https://qiita.com/ProjectEuropa/items/4f141730c53754ca7dc2)の環境をもっと良くして行くために、TypeScriptを導入する。

## 環境
Docker for Mac(macOS Mojave)
Nuxt.js 2.8

## 前提条件
[もっと簡単にDockerでNuxt.jsを始めてみる(続Dockerでローカル環境を汚さずにNuxt.jsを始めてみる)](https://qiita.com/ProjectEuropa/items/4f141730c53754ca7dc2)の通りにNuxt.jsを作成済み。

## 作業

```
docker-compose run node npm install -D @nuxt/typescript
docker-compose run node npm install ts-node
docker-compose run node npm install -D vue-property-decorator
touch tsconfig.json
```
を実行。

`components/HelloWorld.vue`を作成

```vue
<template>
  <div>
    {{ message }}
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
@Component
export default class HelloWorld extends Vue {
  message: string = 'Hello world !'
}
</script>
```

`pages/index.vue`を編集

```vue
<template>
  <div class="container">
    <HelloWorld/>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import HelloWorld from '~/components/HelloWorld.vue'
@Component({
  components: {
    HelloWorld
  }
})
export default class Home extends Vue {}
</script>

<style>
.container {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.title {
  font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  display: block;
  font-weight: 300;
  font-size: 100px;
  color: #35495e;
  letter-spacing: 1px;
}

.subtitle {
  font-weight: 300;
  font-size: 42px;
  color: #526488;
  word-spacing: 5px;
  padding-bottom: 15px;
}

.links {
  padding-top: 15px;
}
</style>

```

`nuxt.config.js`を`nuxt.config.ts`に変更して、下記の通り編集

```ts
import NuxtConfiguration from '@nuxt/config'

const config: NuxtConfiguration = {
  // タイプするか `Ctrl + Space` を押すとオートコンプリートできます
  mode: 'universal',
  /*
  ** Headers of the page
  */
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },
  /*
  ** Global CSS
  */
  css: [
  ],
  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
  ],
  /*
  ** Nuxt.js dev-modules
  */
  devModules: [
  ],
  /*
  ** Nuxt.js modules
  */
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
  ],
  /*
  ** Axios module configuration
  ** See https://axios.nuxtjs.org/options
  */
  axios: {
  },
  /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
    }
  }
}

export default config

```

```
docker-compose run --service-ports node npm run dev
```

実行し、[localhost:3001](http://localhost:3001/)へアクセスし

[![Image from Gyazo](https://i.gyazo.com/ba66abde7bcca4f0797f3251c8016698.png)](https://gyazo.com/ba66abde7bcca4f0797f3251c8016698)

が出れば成功。

## 参考

[Nuxt.js TypeScript サポート](https://ja.nuxtjs.org/guide/typescript/)
[Nuxt2.6でTypescriptを使ってみる
](https://qiita.com/ryu3/items/ce1c0c05be5072f30501)