カルネージハートとは関係ないNuxt TypeScript Vuetifyを一旦動かすまで

カルネージハート Advent Calendar 2019 5日目の記事です。

今回はカルネージハートとは全く関係ないNuxt TypeScript Vuetifyを一旦動かすまでの話です。

# はじめに

- macOS Mojave
- Node.js 12.13.1
- Nuxt.js 2.10を構築する予定です

でNuxt TypeScript Vuetifyを構築していきます。

## スターターテンプレートを使う

[nuxt-community/typescript-template](https://github.com/nuxt-community/typescript-template)を使います

## 事前準備
@vue/cli @vue/cli-initをインストールする

```console
$ npm i -g npx @vue/cli @vue/cli-init
```

## Nuxt-TypeScriptスターターテンプレートを使ってプロジェクト作成

```console
$ vue init nuxt-community/typescript-template nust_ts
$ cd nust_ts
$ npm install 
```

## nuxt/vuetifyをインストール

```console
$ npm install @nuxtjs/vuetify
```

## nuxt.config.tsを編集

```ts
export default {
・
・
・
  loading: { color: "#3B8070" },
  build: {},
  router: {
    base: "/app/",
  },
  buildModules: ["@nuxt/typescript-build"],
  modules: ["@nuxtjs/axios", "@nuxtjs/vuetify"], // "@nuxtjs/vuetify"を追加
  axios: {}
};

```

## tsconfig.jsonを編集


```json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "lib": [
      "esnext",
      "esnext.asynciterable",
      "dom"
    ],
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "strict": true,
    "allowSyntheticDefaultImports": true,
    "noEmit": true,
    "baseUrl": ".",
    "resolveJsonModule": true,
    "paths": {
      "~/*": ["./*"]
    },
    "types": [
      "@nuxt/types",
      "@nuxtjs/axios",
      "@nuxtjs/vuetify" //追加
    ]
  }
}

```

## LayoutをTypeScriptで記述する

[demos/baseline.vue](https://github.com/vuetifyjs/vuetify/blob/master/packages/docs/src/layouts/layouts/demos/baseline.vue)をTypeScriptで記述します。

`nuxt_ts/layouts/default.vue`を編集します・

```vue
<template>
  <v-app id="inspire">
    <v-navigation-drawer
      v-model="drawer"
      app
    >
      <v-list dense>
        <v-list-item link>
          <v-list-item-action>
            <v-icon>mdi-home</v-icon>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title>Home</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
        <v-list-item link>
          <v-list-item-action>
            <v-icon>mdi-contact-mail</v-icon>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title>Contact</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>

    <v-app-bar
      app
      color="indigo"
      dark
    >
      <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
      <v-toolbar-title>Application</v-toolbar-title>
    </v-app-bar>

    <v-content>
      <v-container
        class="fill-height"
        fluid
      >
        <v-row
          align="center"
          justify="center"
        >
          <v-col class="text-center">
            <v-tooltip left>
              <template v-slot:activator="{ on }">
                <v-btn
                  :href="source"
                  icon
                  large
                  target="_blank"
                  v-on="on"
                >
                  <v-icon large>mdi-code-tags</v-icon>
                </v-btn>
              </template>
              <span>Source</span>
            </v-tooltip>

            <v-tooltip right>
              <template v-slot:activator="{ on }">
                <v-btn
                  icon
                  large
                  href="https://codepen.io/johnjleider/pen/zgxeLQ"
                  target="_blank"
                  v-on="on"
                >
                  <v-icon large>mdi-codepen</v-icon>
                </v-btn>
              </template>
              <span>Codepen</span>
            </v-tooltip>
          </v-col>
        </v-row>
      </v-container>
    </v-content>
    <v-footer
      color="indigo"
      app
    >
      <span class="white--text">&copy; 2019</span>
    </v-footer>
  </v-app>
</template>

<script lang="ts">
import {
  Component,
  Vue,
} from "nuxt-property-decorator";

@Component
export default class Layout extends Vue {
  drawer: boolean = true;
}
</script>
```

## 動作確認

```console
$ npm run dev
```

[http://localhost:3000](http://localhost:3000)にアクセスすると

[![Screenshot from Gyazo](https://gyazo.com/a1bbf15276dd156cf6aada32befffef5/raw)](https://gyazo.com/a1bbf15276dd156cf6aada32befffef5)

画面が表示される。

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

@Component
export default class Layout extends Vue {
  drawer: boolean = true;
}
</script>
```
を記述していれば、Drawerも動きます。

## 最後に

事実上の最新作EXAが2010年に発売以降続編の情報が皆無ですが、一部の熱狂的ファンは大会を開催してゲームを続けています。ゲームを盛り上げることで続編も出るかもしれません。カルネジスト、ネジらーの皆様のご協力をお願いします！

カルネージハートファンのプログラミング知識を共有しましょう！

冥界の馬迎撃でお茶を濁します。

![ezgif-2-6c28bddc48ed.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133718/14400c60-c30a-0cee-b1e5-eb39fa5b54ff.gif)