【ララはじ #3】 Vuetifulに美しく、なりたくて。

ちょっと、Web系の開発から離れていたので、今時どんな感じになってるのかを確認する為にいろいろやってみた備忘録です。

築山五郎の人生語録より

以前使ってたんですよね。Vue UIライブラリとしてVuetifyを。
なので、今回も実現してみようかと…
ヘッダー、フッター、サイドメニューみたいな2ペインって言うんですか？そんなレイアウトで。

Vue3だとVuetifyもバージョン3なんです？！
2と何がちがうんです？！

こっちも、目を離した隙に進化してますか…orz
まぁ、インストールしていきます。

% sail npm install vuetify@next --save-dev

あと、ViteでVuetifyをTree Shakingしてくれるらしいプラグインも一緒にインストールします。

% sail npm install vite-plugin-vuetify --save-dev

そして、Viteの設定ファイル vite.config.js も修正します。

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: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
        // ↓ ここから
        vuetify({
            autoImport: true,
        }),
        // ↑ ここまで
    ],
});

折角なので、 resources/js/components/App.vue もちょっと変更してみます。（ちょっと適当にｗ

<template>
    <v-app>
        <v-main>
            <v-card>
                <v-card-title>
                    <h1>Laravel9、さわり始めました。</h1>
                </v-card-title>
            </v-card>
        </v-main>
    </v-app>
</template>

Vuetifyを読み込むために、resources/js/app.js ファイルに追記します。

import './bootstrap';
import { createApp } from "vue";
import 'vuetify/styles';                    // <-- ここ
import { createVuetify } from 'vuetify';　　　　　　　　// <-- ここ
import App from "./components/App.vue"

const app = createApp(App);
const vuetify = createVuetify();　　　　　　　　　　　　　　　　　　　　　　　　// <-- ここ
app.use(vuetify);                           // <-- ここ
app.mount("#app");

とくにバージョン3でなにか変わったのかどうかは、未だわかってないけれども、まぁ、表示できてよかった。（のかどうかもわからないｗ