Laravel9+vite環境下でのVue-routerによるグラフページ表示の実現

実現したいこと

・Laravel9+viteの環境下で、vue-routerを用いてSPA様式のグラフページを作成したい。

前提

お世話になっております。どう調べても解決できなかったため、質問をさせていただきます。
Laravel8+MIXの環境でvue-routerとvue-chartjs、Chart.jsを用いてのSPA様式のグラフページアプリを一旦開発しました。
しかし、Laravelが最新版に更新されたとのことだったので、Laravel9+viteの環境に移植しようとしたところ、以下のエラーメッセージが発生しました。
コードについてはLaravel8+MIX環境で製作したものをそのままコピペで用いました。

発生している問題・エラーメッセージ

下記のエラーと警告が発生し、ページにvueが読み込まれませんでした

警告1

runtime-core.esm-bundler.js:40 [Vue warn]: Missing required prop: "data" 
  at <Line chart-data= {} > 
  at <LineChart onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App>

警告2

runtime-core.esm-bundler.js:40 [Vue warn]: Invalid prop: type check failed for prop "data". Expected Object, got Undefined  
  at <Anonymous ref=fn<reforwardRef> type="line" options= {}  ... > 
  at <Line chart-data= {} > 
  at <LineChart onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App>

警告3

runtime-core.esm-bundler.js:40 [Vue warn]: Unhandled error during execution of mounted hook 
  at <Anonymous ref=fn<reforwardRef> type="line" options= {}  ... > 
  at <Line chart-data= {} > 
  at <LineChart onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {fillData: ƒ, …} > > 
  at <RouterView> 
  at <App>

エラーメッセージ

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'labels')
    at cloneData (utils.ts:96:28)
    at renderChart (chart.ts:35:26)
    at runtime-core.esm-bundler.js:2757:40
    at callWithErrorHandling (runtime-core.esm-bundler.js:173:22)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:182:21)
    at hook.__weh.hook.__weh (runtime-core.esm-bundler.js:2731:29)
    at flushPostFlushCbs (runtime-core.esm-bundler.js:359:46)
    at flushJobs (runtime-core.esm-bundler.js:413:9)

該当のソースコード app.js

javascript
1import './bootstrap';
2import router from './router';
3import { createApp } from 'vue/dist/vue.esm-bundler.js';
4import App from "./components/App.vue";
5
6
7const app = createApp({App})
8    app.use(router);
9    app.mount("#app");
10

router.js

javascript
1import {createRouter,createWebHashHistory} from 'vue-router';
2import Graph from "./components/graph.vue";
3import Bar from "./components/graph_bar.vue";
4import Pie from "./components/graph_pie.vue";
5
6const routes = [
7  { path: '/', name:'graph',component: Graph},
8  { path: '/Bar', name:'bar',component: Bar },
9  { path: '/Pie', name:'pie',component: Pie },
10]
11
12const router = createRouter({
13  mode:'history',
14  history: createWebHashHistory(),
15  routes,
16})
17
18
19export default router;
20

vueファイル　graph.vue
apiからのデータを受け取るため、axiosを用いています。

vue
1<template>
2  <Line :chart-data="chartData" />
3</template>
4
5<script>
6// DataPage.vue
7import { 
8  Line } from 'vue-chartjs'
9import {   
10  Chart as ChartJS,
11  Title,
12  Tooltip,
13  Legend,
14  LineElement,
15  LinearScale,
16  PointElement,
17  CategoryScale,
18  } from 'chart.js'
19
20ChartJS.register(Title,Tooltip,Legend,LineElement,LinearScale,PointElement,CategoryScale)
21
22export default {
23  name: 'LineChart',
24  components: { 
25    Line 
26  },
27
28  data(){
29    return{
30      chartData:{},
31      loaded:false,
32      food_amount:0,
33      food_dates:0,
34    };
35  },
36  mounted() {
37    this.fillData();
38  },
39  watch() {
40    this.fillData();
41  },
42  methods: {
43    fillData(){
44      axios.get('/api/kakeiboes').then(response =>{
45        this.data=response.data.data;
46        const food_purposes='食費';
47        const food_target = this.data.filter(v => v.purpose === food_purposes);
48        this.food_amount=food_target.map(item=>item["amount"]);
49        this.food_dates=food_target.map(item=>item["dates"]);
50
51        this.chartData={
52          labels: this.food_dates,
53          datasets: [
54            {
55              label: 'Data One',
56              backgroundColor: '#f87979',
57              data: this.food_amount
58            }
59          ]
60        }
61
62      })
63    }
64  }
65}
66</script>
67

ビューを表示するbladeファイル graph.blade.php

HTML
1<!DOCTYPE html>
2<html>
3 <head>
4 <meta charset =" UTF-8"/>
5  <title>家計簿</title>
6  <link rel =" stylesheet" href =" https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
7  <link href="{{asset('css/base.css')}}" rel="stylesheet">
8  <link href="{{asset('css/input.css')}}" rel="stylesheet">
9  <meta name="csrf-token" content="{{ csrf_token() }}">
10  @vite(['resources/css/app.css', 'resources/js/app.js'])
11  </head>
12
13  <body>
14    <!--各遷移ボタンのサイドブロックを生成-->
15    <div class="container-fulid">
16      <div class="row">
17        <div class="col-2 buttons">
18            <p><button type="button" class="movebutton" onclick="location.href='{{route('home')}}'">ホーム画面</button></p>
19            <p><button type="button" class="movebutton" onclick="location.href='{{route('input')}}'">出費入力画面</button></p>
20            <p><button type="button" class="movebutton" onclick="location.href='{{route('payment')}}'">口座降金入力画面</button></p>
21            <p><button type="button" class="movebutton" onclick="location.href='{{route('payment')}}'">入金入力画面</button></p>
22            <p><button type="button" class="movebutton" onclick="location.href='{{route('graph')}}'">グラフ画面</button></p>
23            <p><button type="button" class="movebutton" onclick="location.href='{{route('history')}}'">履歴画面</button></p>
24        </div>
25        <div class="col-5">
26          <div id="app">
27            <div id="nav">
28              <router-link to="/">Line</router-link>
29              <router-link to="/Bar">Bar</router-link>
30              <router-link to="/Pie">Pie</router-link>
31            </div>
32            <router-view/>
33          </div>
34        </div>
35      </div>
36    </div>

viteの設定ファイル　vite.config.js

javascript
1import { defineConfig } from 'vite';
2import laravel from 'laravel-vite-plugin';
3import vue from '@vitejs/plugin-vue';
4
5
6export default defineConfig({
7    plugins: [
8        vue(),
9        laravel({
10            input: ['resources/css/app.css', 'resources/js/app.js'],
11            refresh: true,
12        }),
13    ],
14});
15

package.json

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@vitejs/plugin-vue": "^4.0.0",
        "axios": "^1.1.2",
        "chart.js": "^4.2.0",
        "laravel-vite-plugin": "^0.7.2",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "vite": "^4.0.0",
        "vue-chartjs": "^5.2.0"
    },
    "dependencies": {
        "chart.js": "^4.2.0",
        "type": "^2.7.2",
        "vue-chartjs": "^5.2.0",
        "vue-cli": "^2.9.6",
        "vue-router": "^4.1.6"
    }
}

試したこと

最初にコピペした時点ではまだMIXの形式をそのまま使っていたため、

<script src="{{ mix('js/app.js') }}"></script>

と記載されていた部分を

@vite(['resources/css/app.css', 'resources/js/app.js'])

に変更しましたが、エラーは消えませんでした。
app.jsに問題があるのかと考え、色々な項目について削除したりなどを試したのですが、

app.use(router);

を消した場合のみ、エラーが発生しない状況になりましたが、どういったことが原因なのかはわかりませんでした。
現状、自分ではどうすれば解決できるのか皆目見当がつかない状態であります。
拙い質問とは思いますが、皆様のお知恵をお貸し願えればと存じます。よろしくお願いいたします。

補足情報（FW/ツールのバージョンなど）

VScode 1.75.0
Laravel 9.50.1
PHP　8.14

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.31%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！