【Nuxt.js/TypeScript】Nuxt.js/TypeScriptでimport エイリアスを有効化する

Nuxt.jsでTypeScriptを使用した際、Webpackでよくやるimportエイリアスを適用したかったのでやってみました。

TypeScriptコンパイル時のエイリアスルールを設定

先ずはコンパイル時に怒られないよう tsconfig.ts にエイリアスを設定します。

tsconfig.ts

{
  "compilerOptions": {
    ....
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"],
      "~/*": ["./*"]
    },
    ....
  }
}

baseUrl はimportの起点となるディレクトリです。
この場合 tsconfig.ts が配置されたところがルートディレクトリとなります。

paths に設定したいエイリアスを記述していきます。

nuxt.config.ts

TypeScript側では静的チェックを行うのみで、実際のコンパイル時にimportを解決してくれません。

なのでimport解決そのものはWebPackの設定で行います。

Nuxt.jsにおけるWebpackの設定は webpack.config.js(ts) ではなく nuxt.config.js(ts) で行います。

const path = require("path");
export default {
  ....
  resolve: {
    ....
    alias: {
      "@": path.resolve(__dirname),
      "~": path.resolve(__dirname)
    }
    ....
  },
  ....
};

上記のような alias プロパティにパスを設定していきます。

これでOK。TypeScriptコンパイルが通り、importを実行できます。