Nuxt + TypeScript + GraphCMS でブログサイトを作る_01

記事にするほどでもないただの導入編です。でも大事な第一歩。

nuxt-typed-vuex の採用

TypeScript の経験としては、立ち上がりのスタートアップで7ヶ月間ほど副業メンバーとして使用してきました。そこでは Vue.js + TypeScript を採用していて、ジョインしたときにはすでに vue-property-decorator で開発していました。完全に好みだけど、Vue.js っぽさ、フロントエンドっぽさが損なわれている気がして肌に合わないなーという感じ。

Nuxt.js 公式で言及されている nuxt-typed-vuex だとその辺のもやもやがなさそうなので、これを使っていこうと思います。

2020/7/9 現在ではバージョン0.1.19となっています。採用した理由は、Store 内の記述が割と Vanilla Vuex (プラグイン等を使ってない Vuex) の書き方と近いため直感的に書けるということと、もしこのプラグインが将来使われなくなったとしても同じ理由で Vanilla Vuex に戻しやすそうだなというのが主な理由です。

Nuxt.js アプリケーション新規作成

$ create-nuxt-app sample_blog

TypeScript の導入

導入といっても、Nuxt.js の CLI で選択するだけなので簡単です。

create-nuxt-app v2.15.0
✨  Generating Nuxt.js project in sample_blog

? Project name sample_blog
? Project description My rad Nuxt.js project
? Author name show-hei
? Choose programming language TypeScript # ここで TypeScript を選択
? Choose the package manager Yarn
? Choose UI framework None
? Choose custom server framework None (Recommended)
? Choose the runtime for TypeScript @nuxt/typescript-runtime
? Choose Nuxt.js modules Axios, DotEnv
? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to inver
t selection)
? Choose test framework Jest
? Choose rendering mode Single Page App
? Choose development tools jsconfig.json (Recommended for VS Code)

🎉  Successfully created project sample_blog

無事に Nuxt + TypeScript のリポジトリが作成されました。

アプリケーションの立ち上げ

あとはリポジトリに移動して、立ち上げるだけです。

$ yarn dev

セットアップ

Nuxt TypeScript のガイドに沿って設定しましょう。

tsconfig.json の追加

こちらはルートディレクトリに作成します。設定内容は公式のままです。

{
  "compilerOptions": {
    "target": "ES2018",
    "module": "ESNext",
    "moduleResolution": "Node",
    "lib": [
      "ESNext",
      "ESNext.AsyncIterable",
      "DOM"
    ],
    "esModuleInterop": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ]
    },
    "types": [
      "@types/node",
      "@nuxt/types"
    ]
  },
  "exclude": [
    "node_modules"
  ]
}

vue-shim.d.ts の追加

typescript.nuxtjs.org

プロジェクトのルートディレクトリか types という名前のディレクトリに配置できます。

ということらしいので、types に入れていきましょう ルートディレクトリ (.nuxt などと同じ階層) に types というディレクトリを作ります。 あとはそこで新しいファイルを作って vue-shim.d.ts という名前を付けます。あとはファイル内に以下のコードを記述すれば OK です。

declare module "*.vue" {
  import Vue from 'vue'
  export default Vue
}

今回はここまで。

続きはこちら。

overflow-auto.hatenablog.com