LaravelでVuetifyを始める手順

Laravelのインストール
LaravelとVue.jsの連携
Vuetify インストール
ファイル編集
動作確認

Laravelのインストール

まずはじめにLaravelをインストールします。

以下の記事を参考にインストールしてください。

すでにインストール済の方は次に進んでください。

LaravelとVue.jsの連携

//Laravelのプロジェクトに移動してください
cd {フォルダ名}
//
composer require laravel/ui:^1.0
//
php artisan ui vue
//
npm install

Vuetify インストール

npm install vuetify

ファイル編集

まず、resources/js/app.jsを以下のように編集してください。


require('./bootstrap');

import Vue from 'vue'
import Vuetify from 'vuetify'　//追加
import 'vuetify/dist/vuetify.min.css'　//追加

〜省略〜

const app = new Vue({
    el: '#app',
    vuetify: new Vuetify(),　//追加
});

次にresources/js/components/ExampleComponent.vueを以下のように編集してください。

<template>
  <v-app>
    <v-main>
      <v-container>Hello world</v-container>
    </v-main>
  </v-app>
</template>

最後にresources/views/welcome.blade.phpeを以下のように編集してください。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>test</title>
        <link href="{{ mix('css/app.css') }}" rel="stylesheet">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    </head>
    <body>
      <div id="app">
          <example-component></example-component>
      </div>
    </body>
    <script type="text/javascript" src="{{ mix('js/app.js') }}"></script>
</html>

動作確認

コンパイルしてください

npm run dev

サイトにアクセスして「Hello world」と表示されているとおもいます。