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」と表示されているとおもいます。