ホーム > Laravel > LaravelでVuetifyを使う方法
Laravel

LaravelでVuetifyを使う方法

いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。

目次

  1. はじめに
  2. Laravel で Vuetify を使う方法
  3. v-app で囲う
  4. 導入が完了したか確認
PR

Laravel で Vuetify を使う方法についてまとめました。

はじめに

Laravel 11 現在では Inertia で Vue を使う方法がドキュメントに載っているため、Inertia で Vuetify を使うセッティングについてまとめています。

それ以前の Laravel-Mix などを使っている場合は、こちらの記事に書いてあります。

Laravel ＋ Vue.js ＋ Vue-Router+Vuetify の環境構築

Laravel で Vuetify を使う方法

コマンドで必要なものをインストールします

npm i vuetify
npm i @mdi/font

app.js に追記

resources/js/app.jsに追記します。

import { createApp, h } from "vue"
import { createInertiaApp } from "@inertiajs/vue3"
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers"
import { ZiggyVue } from "../../vendor/tightenco/ziggy"

// 追記
import "@mdi/font/css/materialdesignicons.css"
import "vuetify/styles"
import { createVuetify } from "vuetify"
import * as components from "vuetify/components"
import * as directives from "vuetify/directives"

const vuetify = createVuetify({
  components,
  directives,
})
// 追記ここまで、下のuseのところにもう１箇所あります

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(vuetify) // ← 追記
      .use(plugin)
      .use(ZiggyVue)
      .mount(el)
  },
  progress: {
    color: "#4B5563",
  },
})

もし Inertia じゃない場合

以下の部分が今回の Vuetify で必要な部分なので、createAppに use で追加してください。

// 追記
import "@mdi/font/css/materialdesignicons.css"
import "vuetify/styles"
import { createVuetify } from "vuetify"
import * as components from "vuetify/components"
import * as directives from "vuetify/directives"

const vuetify = createVuetify({
  components,
  directives,
})

return createApp({ render: () => h(App, props) })
  .use(vuetify) // ← 追記
  .use(plugin)
  .use(ZiggyVue)
  .mount(el)

v-app で囲う

本当に忘れやすいので、注意が必要です。

Vuetify を使いたい場合、<v-app></v-app>で囲う必要があります。

このタグの外では Vuetify は使えません。

<template>
  <main>
    <v-app>
      <slot />
    </v-app>
  </main>
</template>

導入が完了したか確認

<v-btn depressed color="primary"> Primary </v-btn>

以下のようなボタンが表示されれば完了です。

vuetify v btn

ちなみに、本記事ではマテリアルデザインアイコンというアイコンを表示できる設定で実装しています。

Material Design Icons

使用例は、

<v-icon>mdi-plus-thick</v-icon>

こんな感じです。

以上、誰かの参考になれば幸いです。

フィードバックのお願い
この記事のフィードバックがありましたらYoutubeの適当な動画にコメントしていただいたり、お問い合わせからご連絡ください。