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

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

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

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

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

ただいまの回答率
86.02%

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

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

質問する

reactのrouteを用いてページを作成したいが，何も表示されない

回答1

クリップ0

更新

2023/03/05

Q&A

解決済

【TypeScript】Reactのコンポーネントに値を渡すとIntrinsicAttributesに代入できないと怒られる

回答1

クリップ0

更新

2020/07/11

Q&A

解決済

vue3 vue-router　Cannot read properties of undefined (reading 'push')　エラー

回答1

クリップ0

更新

2023/01/16

Q&A

解決済

【Nuxt.js】API連携での「connect ECONNREFUSED 127.0.0.1:80」エラーを解決したい

回答1

クリップ0

更新

2021/05/31

Q&A

解決済

Vue.js Componentが読み込めず、表示できません

回答2

クリップ0

更新

2021/08/04

Q&A

解決済

Lravelで作成したAPIをReactで呼んで更新処理を行いたいです。

回答1

クリップ0

更新

2023/03/03

Q&A

解決済

"ルートが定義されていません"エラーが出ます。新規投稿画面を表示させたい。

回答1

クリップ0

更新

2023/03/03

Q&A

解決済

vue-router を使用したルーティングができない。

回答1

クリップ2

更新

2023/02/07

同じタグがついた質問を見る

トップ Vue.jsに関する質問

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

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

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