![見出し画像](https://assets.st-note.com/production/uploads/images/91131054/rectangle_large_type_2_dbe95370cee283453cc06274668d95c0.jpeg?width=1200)
【ララはじ #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 もちょっと変更してみます。(ちょっと適当にw
<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でなにか変わったのかどうかは、未だわかってないけれども、まぁ、表示できてよかった。(のかどうかもわからないw
この記事が気に入ったらサポートをしてみませんか?