Vue2でComposition APIとOptions APIを共存させる方法

2024-08-19
山下 鷹徳
#
#
#

概要

Vue.js 2.x系でComposition APIとOptions APIを共存させる方法について詳しく解説します。Vue.js 3.x系ではComposition APIが導入されましたが、Vue.js 2.x系でも一定のサポートが可能です。この記事では、Vue.js 2系の最新バージョンへのアップデートから、Piniaの導入、ビルドエラーの対処法までをステップバイステップで説明します。

設定手順

1. Vue.jsと関連パッケージのバージョンアップ

  1. Vue.jsを2系の最新バージョン("vue": "^2.7.16")にアップデートします。
  2. vue-template-compilerも同じくバージョンアップ("vue-template-compiler": "^2.7.16")します。

これらのアップデートは、Vue.js公式のUpgrade Guideに従って行いました。このガイドでは、Vue.js 2.7への移行に関する具体的な指針や推奨される設定が提供されています。

2. ESLintエラーの対処

バージョンアップの影響で、ESLintのエラーが発生することがあります。ビルドが通らない場合は、ESLintの設定を一時的に無効にするか、コードを修正して解決します。

3. Piniaのインストールと設定

1. Piniaをインストールします("pinia": "^2.1.7")。

2. ビルド時に Can't import the named export 'computed' from non EcmaScript module エラーが発生した場合は、以下の設定を vue.config.js に追加します。


// vue.config.js
module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\\.mjs$/,
          include: /node_modules/,
          type: "javascript/auto"
        }
      ]
    }
  }
}

3. src/main.ts(プロジェクトによって異なる場合がありますが、Vueインスタンスを作成し、アプリケーションを初期化するファイル)に以下のPiniaの設定を追記します。


import { createPinia, PiniaVuePlugin } from "pinia";

Vue.use(PiniaVuePlugin);
const pinia = createPinia();

new Vue({
    router,
    store,
    pinia,
    render: (h) => h(App),
  }).$mount("#app");

4. @vue/cli系パッケージのアップデート

@vue/cli関連のパッケージをバージョン"^4.5.18"にアップデートします。

5. tsconfig.jsonの設定

tsconfig.jsonに以下の設定を追加します。


{
  // ...
  "vueCompilerOptions": {
    "target": 2.7
  }
}



これにより、Volarの型推論サポートを利用できるようになります。Vue.js 2.7では、@vue/runtime-domをインストールする必要がなくなりました。

6. VSCode拡張のインストール

Vue - Official(Volarが組み込まれた)をVSCodeにインストールします。必要に応じて、extensions.jsonに以下を追加します。


{ "recommendations": ["vue.volar"] }

extensions.jsonについては、以下の参考リンクを確認してください。

7. パッケージの再インストール

rm -rf node_modules && npm i を実行し、package-lock.jsonを最新に更新します。Yarnを使用している場合は、対応するコマンドを使用してください。他のブランチに切り替える際は、rm -rf node_modules && npm ciを実行してnode_modulesを再構築します。

実装確認

設定を完了した後、以下のようにsetup()関数の糖衣構文を利用したタグ内にComposition APIで実装すると、Composition APIとOptions APIのファイルが正常に動作することを確認しました。


<script setup lang="ts">
--Options APIからComposition APIに置き換え実装--
</script>

さいごに

Vue.js 2.xでComposition APIとOptions APIを共存させるための手順を紹介しました。これにより、既存のOptions APIコードを維持しながら、新しいComposition APIを試すことができます。Vue.js公式のUpgrade Guideを参考にしながら、適切に設定を行うことで、プロジェクトの移行や新しい機能の導入がスムーズに進むでしょう。

株式会社Grandreamでは、フルリモートであなたのスキルを活かし、活躍できるエンジニアを募集しております。 詳しくは採用ページをご確認いただき、お気軽にお問い合わせください。

株式会社グランドリームでは、AWSを駆使した開発からUI/UXデザインまで、Webアプリケーションに関するすべての要望に応えます。
まずは一度お気軽にご相談ください。

お問い合わせはこちら