最近の私は、LaravelのフロントエンドをVue.js(Vuex, Vue Router, Vuetify)で書いています。
Vuetifyはコンポーネントも豊富で便利ですが、たまには違うUIフレームワークを使ってみたくなりました。
調べたところ、Quasar Frameworkを見つけました。
Build high-performance VueJS user interfaces in record time
https://quasar.dev/
そこで今回は、LaravelでQuasar Frameworkを使ってUI実装してみます。
Laravelのバージョンは6.8.0です。
準備
$ composer create-project --prefer-dist laravel/laravel lara-quasar
$ cd lara-quasar
$ composer require laravel/ui --dev
$ php artisan ui vue --auth
$ yarn install
$ yarn add quasar --dev
$ yarn add quasar-extras --dev
$ yarn run watch
Quasarの読み込み
デフォルトのresources/js/bootstrap.jsの読み込みを削除します。
resources/js/app.js
/**
* We'll load the axios HTTP library which allows us to easily issue requests
* to our Laravel back-end. This library automatically handles sending the
* CSRF token as a header based on the value of the "XSRF" token cookie.
*/
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
window.Vue = require('vue');
/**
* The following block of code may be used to automatically register your
* Vue components. It will recursively scan this directory for the Vue
* components and automatically register them with their "basename".
*
* Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
*/
// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
// Quasar Framework
import Quasar from 'quasar';
import 'quasar/dist/quasar.sass';
import 'quasar-extras/material-icons';
Vue.use(Quasar);
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
const app = new Vue({
el: '#app',
});
ビューの変更
レイアウトを変更してみます。
css/app.cssの読み込みは削除します。
resources/views/layouts/app.blade.php
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
</head>
<body>
<div id="app">
<q-layout view="hHh lpr fFf" container style="height:100vh">
<q-header elevated>
<q-toolbar>
<q-avatar>
<img src="https://cdn.quasar.dev/logo/svg/quasar-logo.svg">
</q-avatar>
<q-toolbar-title>Quasar Framework</q-toolbar-title>
</q-toolbar>
</q-header>
<q-footer elevated>
<q-toolbar>
<q-toolbar-title>Footer</q-toolbar-title>
</q-toolbar>
</q-footer>
<q-page-container>
<q-page class="q-pa-md">
@yield('content')
</q-page>
</q-page-container>
</q-layout>
</div>
</body>
</html>
<q-layout>の中に<q-header>、<q-footer>、<q-page-container>がある構造です。
<q-layout view="hHh lpr fFf" container style="height:100vh">の呪文のようなhHh lpr fFfは、レイアウト構造の定義らしいです。
以下のリンク先でなんとなく理解してください。。。
ユーザ登録画面のビューは以下です。
ただしデータバインディングは実装していません。
resources/views/auth/register.blade.php
@extends('layouts.app')
@section('content')
<div class="row justify-center">
<div class="col-4">
<q-card>
<q-card-section>
<div class="text-h6">{{ __('Register') }}</div>
</q-card-section>
<q-separator></q-separator>
<q-card-section>
<q-input name="name" label="{{ __('Name') }}">
<template v-slot:prepend>
<q-icon name="person" />
</template>
</q-input>
<q-input label="{{ __('Email') }}">
<template v-slot:prepend>
<q-icon name="email" />
</template>
</q-input>
<q-input type="password" label="{{ __('Password') }}">
<template v-slot:prepend>
<q-icon name="lock" />
</template>
</q-input>
<q-input type="password" label="{{ __('Confirm Password') }}">
<template v-slot:prepend>
<q-icon name="lock" />
</template>
</q-input>
</q-card-section>
<q-card-actions>
<q-btn color="primary" label="{{ __('Register') }}"></q-btn>
</q-card-actions>
</q-card>
</div>
</div>
@endsection
なかなかいい感じではないでしょうか
いまのところいちばん悩ましいのは、コンポーネントタグの接頭辞がqなので、キーボードのqをたくさん叩くために左手の小指が疲れることぐらいです
（1やtabは苦ではないのに。。。）
参考URL
https://quasar.dev/
https://qiita.com/SatoTakumi/items/19222f6e74f53043d6a1