Zenn
Open14

Laravel＋Vue＋Tailwindでナレッジサイトを作るんだ

Laravel
Tailwind CSS
Vue 3
inertia
#
prelinejs
えーはぶえーはぶ

Laravelで開発環境作成

Laravelで新規プロジェクトを作り直したのでメモ

Laravel新規プロジェクト作成

最新のLaravelインストール

bash
curl -s https://laravel.build/coduck | bash

※coduckは新規作成するアプリの名前

作成したプリジェクトに移動してsailコマンドでDockerをビルド

cd coduck
sail up -d

完了したらhttp://localhostへアクセスして確認。

えーはぶえーはぶ

Laravel Breeze

Laravel Breezeを入れてフロント周りと認証系のセットアップを行う

コンテナに入って下記コマンドを実行

bash
composer require laravel/breeze --dev
php artisan breeze:install vue
php artisan migrate
npm install
npm run dev

http://localhost/ へアクセスして下記表示されれば成功

えーはぶえーはぶ

日本語化

config/app.phpを開いて下記書き換える

config/app.php
'timezone' => 'Asia/Tokyo',
'locale' => 'ja',
'faker_locale' => 'ja_JP',

下記コマンドで日本語化ファイルを入れる

bash
php -r "copy('https://readouble.com/laravel/8.x/ja/install-ja-lang-files.php', 'install-ja-lang.php');"
php -f install-ja-lang.php
php -r "unlink('install-ja-lang.php');"

8.xと書かれているけど硬派なぼくは気にしない。

えーはぶえーはぶ

Tailwind周りをセットアップ

Preline.jsとHeroiconをインストール

bash
npm install preline
npm install @heroicons/vue

tailwind.config.tsのcontentとpluginsにpreline.jsの設定を追記。

tailwind.config.ts
import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './resources/js/**/*.vue',
        'node_modules/preline/dist/*.js',  //←　追加
    ],
    darkMode: 'class', // or 'media' or 'class'

    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    plugins: [
        forms,
        require('preline/plugin'), //←　追加
    ],
};

app.jsにpreline.jsを読み込む設定を追加

resources/js/app.js
import './bootstrap';
import '../css/app.css';

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';
import 'preline'; //　追加

確認

適当にサンプルをコピーしてきてアイコンを差し替えて確認！
いい感じです。

えーはぶえーはぶ

フォントを変更

個人的にMicrosoftのSelawikが好きなので下記からダウンロードしてくる。
https://www.fontsquirrel.com/fonts/selawik
resources/fontsディレクトリを作成して解凍したものを設置する。

app.cssにそれらを読み込む設定を入れる

resources/app.css
@tailwind base;
@tailwind components;
@tailwind utilities;

body {
    background: #f5f5f5;
}
@font-face {
    font-family: "Selawik";
    src: url("../fonts/selawk.eot");
    src: url("../fonts/selawk.eot#iefix") format("embedded-opentype"), url("../fonts/selawk.ttf") format("truetype");
}

@font-face {
    font-family: "Selawik Bold";
    src: url("../fonts/selawkb.eot");
    src: url("../fonts/selawkb.eot#iefix") format("embedded-opentype"), url("../fonts/selawkb.ttf") format("truetype");
}

@font-face {
    font-family: "Selawik Light";
    src: url("../fonts/selawkl.eot");
    src: url("../fonts/selawkl.eot#iefix") format("embedded-opentype"), url("../fonts/selawkl.ttf") format("truetype");
}

@font-face {
    font-family: "Selawik Semibold";
    src: url("../fonts/selawksb.eot");
    src: url("../fonts/selawksb.eot#iefix") format("embedded-opentype"), url("../fonts/selawksb.ttf") format("truetype");
}

@font-face {
    font-family: "Selawik Semilight";
    src: url("../fonts/selawksl.eot");
    src: url("../fonts/selawksl.eot#iefix") format("embedded-opentype"), url("../fonts/selawksl.ttf") format("truetype");
}

Tailwind.config.tsに設定を追加。

theme: {
    extend: {
        fontFamily: {
            sans: [
                "Segoe UI Light", "Segoe UI", "Selawik Light", "Tahoma", "Verdana", "Arial", "sans-serif"
            ],
            selawik: ['Selawik'],
        },
    },
},

app.blade.phpでフォントを指定

resources/views/app.blade.php
    <body class="font-selawik antialiased">
        @inertia
    </body>

確認

ちょっと文字が可愛くなっています。

えーはぶえーはぶ

モック作成

細かい機能は置いといて作りたいサイトの全体的なモックを作っていく。

機能もりもりだと永久に完成しないしいきなりQiitaとかZennとかは作れないのでのでとりあえずCrieitくらいの機能を参考に作る

Home

ちょっとdev.toを意識しています。

プロフィール

えーはぶえーはぶ

Vuetifyインストール

Tailwindだけでちまちまデザイン作るのがしゃらくせぇのでVuetifyインストール

インストール

npm install vuetify
npm install vite-plugin-vuetify

設定

vite.config.jsを編集

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/sass/app.scss', 'resources/js/app.js'],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
        vuetify(),
    ],
});

app.jsにVuetifyを読み込む設定を追加

resources/js/app.js
import './bootstrap';
import '../css/app.css';
import 'vuetify/styles';

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';
import { createVuetify } from 'vuetify';
import { aliases, mdi } from 'vuetify/iconsets/mdi-svg';

const vuetify = createVuetify({
    icons: {
        defaultSet: 'mdi',
        aliases,
        sets: {
            mdi,
        },
    },
});
const appName = import.meta.env.VITE_APP_NAME || 'Laravel';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, App, props, plugin }) {
        return createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue, Ziggy)
            .use(vuetify)
            .mount(el);
    },
    progress: {
        color: '#4B5563',
    },
});

できたっぽい

えーはぶえーはぶ

改めてVuetifyのフォントを変更

とりあえずfont-selawikクラスを作成してbodyに設定してみる。

.font-selawik {
    font-family: 'Selawik';
}


うーん、フォームのラベルやボタンが適応されなくて微妙…
ボタンコンポーネントとかテキストに設定されているところ全てオーバーライドするしかないのかな…

とりあえず力技だけどRobot sans-serifを上書き定義してみる。

@font-face {
    font-family: "Roboto";
    src: url("../fonts/selawk.eot");
    src: url("../fonts/selawk.eot#iefix") format("embedded-opentype"), url("../fonts/selawk.ttf") format("truetype");
}
@font-face {
    font-family: "sans-serif";
    src: url("../fonts/selawk.eot");
    src: url("../fonts/selawk.eot#iefix") format("embedded-opentype"), url("../fonts/selawk.ttf") format("truetype");
}


すっきりしないけどとりあえずよし