ASP.NET Core MVCプロジェクトにVueコンポーネントを組み込む方法

プログラミング

2024.12.01

こんにちは。業務でVueを使ってからというもの、フロントエンド開発がこんなに楽しいとは思いもよりませんでした。かつて、ASP.NET Core MVCでcshtmlにダラダラと書いていたRazorとhtmlをvueで置き換えていけたらと思い、この記事を作成します。

1 この記事で行うこと
2 開発環境
3 ASP.NET Core MVCプロジェクトにVueコンポーネントを組み込む方法
4 最後に

この記事で行うこと

ASP.NET Core MVCプロジェクトの初期状態に対して、以下のセットアップを行います。

npmで必要なツールのインストール
vueコンポーネントを作成
vueのエントリーポイントとなるJavaScriptファイルを作成
webpack.config.jsで事前ビルドしてbundle.jsを生成
bundle.jsを参照してcshtmlでvueを動作させる

開発環境

以下の環境で実施します。

Windows10
Visual Studio 2022

ASP.NET Core MVCプロジェクトにVueコンポーネントを組み込む方法

早速作っていきます。Visual Studioで新しいプロジェクトを作成し、プロジェクトテンプレートに「ASP.NET Core Webアプリ(Model-View-Controller)」を選択します。

プロジェクト名とソリューション名は共に、「SampleVueProject」としておきます。フレームワークは自由に選択してください。今回は「.NET 8.0」を選択します。認証の種類は「個別のアカウント」を選択します。

作成ボタンをクリックすると、ベースが作成されました。

パッケージのインストール

次にパッケージをインストールしていきます。ターミナルを開く必要があるので、「SampleVueProject」プロジェクトを右クリックして、「ターミナルを開く」をクリックします。

PowerShellが開いたので、以下のコマンドを実行します。

npm install vue vue-loader vue-template-compiler webpack webpack-cli @babel/core @babel/preset-env babel-loader style-loader css-loader --save-dev

各種パッケージがインストールされます。vue-loaderやvue-template-compiler、webpackがvueファイルをjsファイルに変換してくれます。

Vueコンポーネント作成

SampleVueProjectの直下に新しいフォルダー「VueComponents」を作成します。このフォルダ内を右クリック＞追加で「新しい項目の追加」をクリックします。JavaScriptファイルを選んで名前欄を「SampleComponent.vue」Vueコンポーネントに書き換えましょう。

追加をクリックすると、作成したファイルが開くので以下のようにコンポーネントを定義しておきます。

<template>
   <div>
      <p>{{ message }}</p>
   </div>
</template>

<script>
   export default {
      data() {
         return {
            message: 'こんにちは、Vue!'
         };
      }
   };
</script>

<style scoped>
   p {
      color: blue;
   }
</style>

vueのエントリーポイントとなるJavaScriptファイルを作成

wwwroot\jsに「vue-components-define.js」を作成します。SampleVueProjectを右クリック＞追加して、「新しい項目の追加」からJavaScriptファイルを選択します。名前は「vue-components-define.js」に変更してください。その後、以下をコピペしてください。

import { createApp } from 'vue';
import SampleComponent from '../../VueComponents/SampleComponent.vue';

createApp(SampleComponent).mount('#app');

webpack.config.jsで事前ビルドしてbundle.jsを生成

続けて、プロジェクト直下に「webpack.config.js」を作成します。SampleVueProjectを右クリック＞追加して、「新しい項目の追加」からJavaScriptファイルを選択します。名前は「webpack.config.js」に変更してください。その後、以下をコピペしてください。

const { VueLoaderPlugin } = require('vue-loader');
const path = require('path');

module.exports = {
   mode: 'development',
   entry: './wwwroot/js/vue-components-define.js',
   output: {
      path: path.resolve(__dirname, './wwwroot/js/'),
      filename: 'vue-bundle.js'
   },
   module: {
      rules: [
         {
            test: /\.vue$/,
            loader: 'vue-loader'
         },
         {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            options: {
               presets: ['@babel/preset-env']
            }
         },
         {
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
         }
      ]
   },
   plugins: [
      new VueLoaderPlugin()
   ]
};

その後、vueファイルをjsファイルにコンパイルするため、PowerShellで以下を実行します。

npx webpack --config webpack.config.js

bundle.jsを参照してcshtmlでvueを動作させる

あとは、jsファイルを参照するだけです。「Views/Shared/_Layout.cshtml」に以下を追記します。

<body>
   <!--省略-->
   <footer class="border-top footer text-muted">
      <div class="container">
         &copy; 2024 - VueSample - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
      </div>
   </footer>
   <script src="~/lib/jquery/dist/jquery.min.js"></script>
   <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
   <script src="~/js/vue-bundle.js"></script><!--左記を追記-->
   <script src="~/js/site.js" asp-append-version="true"></script>
   @await RenderSectionAsync("Scripts", required: false)
</body>

あとはViewからVueを使用するだけです。(~~ダジャレじゃないです。~~)

「Views\Home\Index.cshtml」に以下を追記しましょう。

@{
   ViewData["Title"] = "Home Page";
}

<div class="text-center">
   <h1 class="display-4">Welcome</h1>
   <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
   <div id="app">
      <sample-component></sample-component>
   </div>
</div>

最後に動作確認します。F5キーを押してアプリを実行します。