Vetur をモノレポで動かす

📆September 01, 2021

yarn workspace を使ったモノレポ構成(/pacakes/pacakge-A みたいな感じの構成)のときに、VS Code をルートで開くと、うまく Vetur が働かない現象の解決方法が分かった。

今までパッケージ単位で VS Code を開いて使って回避してたんだけど、やっぱりルートで開いてた方が色々と grep かけるときとか便利だなということで、ルートで開く運用に変更。

結論、ルートのディレクトリ(packages ディレクトリと並列の位置)に、vetur.config.js というファイルを設置して、そこに設定を書くだけで良かった。設定ファイルを今まで一切弄らずデフォルトのままで使用してた。Vetur にも設定ファイルがあって、このファイルを配置しておくと自動でエディタ(正しくは VS Code 内の Vetur プラグイン)が読み込んでくれるようになってたっぽい。

うちだと以下みたいな感じ。projects の配列に、Vetur を適用したいパッケージを指定してやるだけで OK。packages 内にアプリケーションとか e2e テストとかが入ってるんだけど、うちは Nuxt.js アプリケーションだけを対象にしてる。

// vetur.config.js
// SEE https://vuejs.github.io/vetur/reference/#example
/** @type {import('vls').VeturConfig} */
module.exports = {
  projects: [
    './packages/package-a', // shorthand for only root.
    './packages/package-b', // shorthand for only root.
    './packages/package-c', // shorthand for only root.
  ],
};

https://vuejs.github.io/vetur/reference/



🔖 VSCodeVue.jsNuxtJS