はじめに
前回は、環境構築を行なった。
今回はVueよりルーティングを行う、vue router、vuetifyを使用、データをvue内でjsonデータで作って表示まで行う。
参考記事
以下の記事の内容をかなり代用し、本記事を作成した。
vue routerインストール
npm install vue-router@4
このコマンドは、Vue Router(Vue.jsでのルーティングをサポートするライブラリ)をインストールする。これにより、SPA内でのページ遷移などを実装することができる。
vuetifyをインストール
npm install vite-plugin-vuetify
このコマンドでVuetify(Vue.jsでのUIコンポーネントライブラリ)をインストールする。
vite.config.jsを設定
vuetifyを追加
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import vuetify from 'vite-plugin-vuetify'←追加
export default defineConfig({
plugins: [
vue(),
vuetify(),←追加
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
],
});
ここでは、Viteの設定ファイル(vite.config.js)を編集し、先ほどインストールしたVuetifyをViteプロジェクトで使用できるようにしている。
app.jsを設定する
resources/js/app.jsを修正する。
vuetify、routerを追加する。
import './bootstrap';
import '../css/app.css';
import { createApp } from 'vue';
import App from './App.vue';
import { createVuetify } from 'vuetify';←追加
import router from './router';←追加
import 'vuetify/dist/vuetify.min.css';←追加
const app = createApp(App);
const vuetify = createVuetify();←追加
app.use(router);←追加
app.use(vuetify);←追加
app.mount('#app');
web.phpを修正
localhost:8000以下のURLが何であってもapp.blade.phpを返すようにroutes\web.phpを編集します。
<?php
use Illuminate\Support\Facades\Route;
Route::get('/{any?}', fn () => view('app'))->where('any', '.+');
app.blade.phpをVueのappに紐づかせている。
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel Vite Vue</title>
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
<div id="app"></div>
</body>
</html>
※前回、welcome.blade.phpを使用していましたが、app.blade.phpに差し替えます。
ルーティング部品の作成
resources\js\router.jsを作成
import { createRouter, createWebHistory } from "vue-router";
import AboutView from "../views/AboutView.vue"
import HomeView from "../views/HomeView.vue"
const routes = [
{
path: "/about",
component: AboutView,
name: "about"
},
{
path: "/",
component: HomeView,
name: "home"
}
]
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: routes
})
export default router
App.vueを編集
resources\views\App.vueを以下のように編集する。
※各タグの説明
・v-app：このタグの中のみVuetifyが有効になる。
・TopHeader：ヘッダーを読み込む。
・router-view：URLに応じてrouter.jsで定義されたテンプレートが返される。
<template>
<v-app>
<TopHeader></TopHeader>
<v-main>
<router-view />
</v-main>
</v-app>
</template>
<script>
import TopHeader from "./TopHeader.vue"
export default {
components: {
TopHeader
}
}
</script>
ヘッダー部品作成
resources\views\TopHeader.vueを作成。
<template>
<v-app-bar color="blue-grey-lighten-3" density="compact">
<v-toolbar-title>Todoアプリ</v-toolbar-title>
</v-app-bar>
</template>
ルーティングのVueを作成
・HomeView.vue
一覧取得表示。
<template>
<v-container fluid>
<h4 class="mb-5">ToDo一覧</h4>
<div class="table-list">
<v-table density="compact">
<thead>
<tr>
<th>No.</th>
<th>タイトル</th>
<th>ステータス</th>
<th>作成日</th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in todoList" :key="index">
<td>{{ index + 1 }}</td>
<td>{{ item.TODO_NAME }}</td>
<td>{{ item.STATUS }}</td>
<td>{{ item.CREATE_DATE }}</td>
</tr>
</tbody>
</v-table>
</div>
</v-container>
</template>
<script setup>
import { ref } from 'vue'
// 一覧取得
const todoList = ref([
{ TODO_NAME: "タスク1", STATUS: "完了", CREATE_DATE: "2023-06-17" },
{ TODO_NAME: "タスク2", STATUS: "未完了", CREATE_DATE: "2023-06-16" },
{ TODO_NAME: "タスク3", STATUS: "完了", CREATE_DATE: "2023-06-15" },
{ TODO_NAME: "タスク4", STATUS: "未完了", CREATE_DATE: "2023-06-14" }
])
</script>
・AboutView.php
<template>
<h1>About</h1>
</template>
画面表示
以上により、下記にアクセスするとルーティングで設定した画面が表示される。
