Laravel9+Vue3でFailed to parse sourceエラーが表示される

こちらの記事を参考にLaravel9(バージョン9.21.6)とVue3の連携を行ってウェブブラウザで画面表示を行うと、次のようなエラーが発生しました。 npm run devを実行しているターミナルにも同様のエラーが表示されます。

$ npm run dev
> dev
> vite

  VITE v3.0.2  ready in 762 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

  LARAVEL v9.21.6  plugin v0.5.2

  ➜  APP_URL: http://localhost
Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.
2:24:00 PM [vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.
  Plugin: vite:import-analysis
  File: /laravel9-vue3/resources/js/App.vue
  1  |  
     |             ^
  4  |
  5  |
      at formatError (file:///laravel9-vue3/node_modules/vite/dist/node/chunks/dep-1513d487.js:35028:46)
      at TransformContext.error (file:///laravel9-vue3/node_modules/vite/dist/node/chunks/dep-1513d487.js:35024:19)
      at TransformContext.transform (file:///laravel9-vue3/node_modules/vite/dist/node/chunks/dep-1513d487.js:40080:22)
      at async Object.transform (file:///laravel9-vue3/node_modules/vite/dist/node/chunks/dep-1513d487.js:35277:30)
      at async loadAndTransform (file:///laravel9-vue3/node_modules/vite/dist/node/chunks/dep-1513d487.js:39776:29)

回避策

こちらの記事を参考にvite.config.jsのpluginsにvue()を追加するとエラーが解消しました。

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
        vue(),
    ],
});