Laravel8+Vuetify+inertiajs+sass

5 min read読了の目安(約5300字

概要

Laravel8では標準のスタイルフレームワークでTailWindを使っています。
モダンで今風のイケイケなページが作れるフレームワークでコンポーネントも充実しているのですが、フロントエンド苦手なクソダサジジイにとってはちょっと扱いづらいんで全部入りフレームワークのVuetifyに差し替えます。

vuetifyとは

Materialデザインを備えたVue.jsのデザインフレームワークです。
コンポーネントが充実しておりサイドバーデザインやModalなんかも簡単に実装することができるし、レイアウトテンプレートなんかも用意されているのでバカでもチョンでもまぁ見れるレベルのサイトが作れます。

前提

Laravelのセットアップは済ませた状態から始めますのでこちらの記事を参考にセットアップを済ませておいてください。

手順

TailWindの削除

まずPackage.jsonを開いてTailwindと書かれている下記の3行を全て削除してください。

package.json
"@tailwindcss/forms": "^0.2.1",
"@tailwindcss/typography": "^0.3.0",
"tailwindcss": "^2.0.1",

次にUpdateを実行してライブラリを削除。

npm update

これでライブラリが完全に消えたので、CSSの記述を削除。
app.cssファイルに下記の記述があるので全て消して空のCSSファイルを作ります。

resource/css/app.css
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

最後にwebpack.mix.jsの記述も削除

webpack.mix.js
mix.js('resources/js/app.js', 'public/js').vue()
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        //require('tailwindcss'),
        require('autoprefixer'),
    ])
    .webpackConfig(require('./webpack.config'));

if (mix.inProduction()) {
    mix.version();
}

ビルドして確認します。

npm run watch

ブラウザで開き、CSSが適応されていないサイトが表示されればTailwindの削除は成功です。

sassを使えるようにする

既にsassのコンパイラは入っているので、webpack.mix.jsの記述を変更するだけでいいです。

webpack.mix.js
mix.js('resources/js/app.js', 'public/js').vue()
    //.postCss('resources/css/app.css', 'public/css', [
    //    require('postcss-import'),
    //require('tailwindcss'),
    //    require('autoprefixer'),
    //])
    .sass('resources/sass/app.scss', 'public/css').version()//←これ追加
    .webpackConfig(require('./webpack.config'));
if (mix.inProduction()) {
    mix.version();
}

あとはresourceディレクトリにsassディレクトリを作成してapp.scssファイルを作成すればOKです。

resource/
 └ sass/
  └ app.scss

確認のためapp.scssに下記を記述します。

/resource/scss/app.scss
body    {
    color: red;
}

ビルドして確認します。

npm run dev

文字色が全て赤くなったら成功です。

Vuetifyのインストール

Vuetify本体と依存関係、アイコンセットをまとめてインストールします。

npm install vuetify
npm install sass sass-loader deepmerge -D
npm install @mdi/font -D
npm install material-design-icons-iconfont

JSの設定を変更

/resource/js/app.js
require('./bootstrap');

// Import modules...
import Vue from 'vue';
import { App as InertiaApp, plugin as InertiaPlugin } from '@inertiajs/inertia-vue';
import PortalVue from 'portal-vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
import '@mdi/font/css/materialdesignicons.css';
import 'material-design-icons-iconfont/dist/material-design-icons.css';

Vue.mixin({ methods: { route } });
Vue.use(InertiaPlugin);
Vue.use(PortalVue);
Vue.use(Vuetify);

const app = document.getElementById('app');

new Vue({
    vuetify: new Vuetify(),
    render: (h) =>
        h(InertiaApp, {
            props: {
                initialPage: JSON.parse(app.dataset.page),
                resolveComponent: (name) => require(`./Pages/${name}`).default,
            },
        }),
}).$mount(app);

Vuetifyの標準フォントRobotoは日本語が微妙なので変えときます。
app.scssに下記を記述。

/resource/scss/app.scss
.v-application{
    font-family: "M Plus 1p" !important;
}

最後に確認用にWelcome.vueを書き換え。
公式の適当なサンプルを表示させます。

/resource/js/Pages/Welcome.vue
<template>
  <v-app>
    <v-card class="mx-auto" color="#26c6da" dark max-width="400">
      <v-card-title>
        <v-icon large left> mdi-twitter </v-icon>
        <span class="title font-weight-light">Twitter</span>
      </v-card-title>

      <v-card-text class="headline font-weight-bold">
        "Turns out semicolon-less style is easier and safer in TS because most
        gotcha edge cases are type invalid as well."
      </v-card-text>

      <v-card-actions>
        <v-list-item class="grow">
          <v-list-item-avatar color="grey darken-3">
            <v-img
              class="elevation-6"
              alt=""
              src="https://avataaars.io/?avatarStyle=Transparent&topType=ShortHairShortCurly&accessoriesType=Prescription02&hairColor=Black&facialHairType=Blank&clotheType=Hoodie&clotheColor=White&eyeType=Default&eyebrowType=DefaultNatural&mouthType=Default&skinColor=Light"
            ></v-img>
          </v-list-item-avatar>

          <v-list-item-content>
            <v-list-item-title>Evan You</v-list-item-title>
          </v-list-item-content>

          <v-row align="center" justify="end">
            <v-icon class="mr-1"> mdi-heart </v-icon>
            <span class="subheading mr-2">256</span>
            <span class="mr-1">·</span>
            <v-icon class="mr-1"> mdi-share-variant </v-icon>
            <span class="subheading">45</span>
          </v-row>
        </v-list-item>
      </v-card-actions>
    </v-card>
  </v-app>
</template>

ブラウザで確認して背景色やアイコンが問題なく表示されていればOKです。

とりあえず導入までできましたが、ここからログイン画面や管理画面をシコシコ作り直していく必要があります。
がんばりましょう。

おまけ

Dashboard、Login、Register、Welcomeページだけ作成したものを下記にコミットしてます。

https://github.com/chegeba/larafy/tree/vuetify_setup

参考

https://vuetifyjs.com/ja/
https://qiita.com/dojyorin/items/f2e595f68d7c29cf2adb