koramit/laravue-inertrap.md

## laravue-inertrap.md

      
    Raw
  

              laravue-inertrap.md
            
          
    Laravel 6.x InertiaJS + VueJS + Bootstrap

Part 0

ติดตั้ง Laravel น่ะสิ
Part I Laravel JavaScript & CSS Scaffolding


ติดตั้ง laravel-ui เพื่อใช้งาน bootstrap

composer require laravel/ui --dev

ให้ laravel init code เบื้องต้นสำหรับใช้งาน bootstrap+vue ลองเปรียเทียบไฟล์ resources/js/bootstrap.js resources/scss/app.scss ก่อนและหลังทำคำสั่งดู

php artisan ui bootstrap
php artisan ui vue

เนื่องจากเราจะทำ SPA โดยมี app.js หลักแค่ไฟล์เดียว ให้ย้าย content ของไฟล์ resources/js/bootstrap.js มาใส่ใน resources/js/aap.js

// resources/js/aap.js
window._ = require('lodash');

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {}

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

window.Vue = require('vue');

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

const app = new Vue({
    el: '#app',
});


ลบไฟล์ resources/js/bootstrap.js ได้เลย


compile assets


npm i && npm run dev

ทดสอบด้วย app.blade.php และ web.php ตามนี้

<!-- resources/views/app.blade.php -->
<!DOCTYPE html>
<html lang="th-TH">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="{{ mix('/css/app.css') }}" rel="stylesheet" />
    <script src="{{ mix('/js/app.js') }}" defer></script>
    <title>Test Page</title>
</head>
<body>
    <div id="app">
        <example-component />
    </div>
    <label for="">koko</label>
    <input type="text" class="form-control">
</body>
</html>
// routes/web.php
<?php

Route::get('/', function () {
    return view('app');
});
ถึงตรงนี้เมื่อเข้าหน้าแรกของ app ควรเห็น example component และเห็น input ตาม style ของ bootstrap ได้อย่างถูกต้องแล้ว
Part II Inertia server side


ติดตั้ง inertia package

composer require inertiajs/inertia-laravel

เตรียมไฟล์ app.blade.php ให้พร้อมใช้งาน inertia โดย inertia จะ inject content ไปใส่ตรง @inertia ให้

<!DOCTYPE html>
<html lang="th-TH">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="{{ mix('/css/app.css') }}" rel="stylesheet" />
    <script src="{{ mix('/js/app.js') }}" defer></script>
    <title>Test Page</title>
</head>
<body>
    @inertia
</body>
</html>
Part III Inertia client side


ติดตั้ง inertia package

npm i @inertiajs/inertia @inertiajs/inertia-vue

แก้ไขไฟล์ app.js ได้แบบนี้

window._ = require('lodash');

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {}

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

import { InertiaApp } from '@inertiajs/inertia-vue'
import Vue from 'vue'

Vue.use(InertiaApp)

const app = document.getElementById('app')

new Vue({
  render: h => h(InertiaApp, {
    props: {
      initialPage: JSON.parse(app.dataset.page),
      resolveComponent: name => require(`./Pages/${name}`).default,
    },
  }),
}).$mount(app)
Part IV Test inertia


ตาม code ใน app.js มันจะมองหา file .vue ใน path resources/js/Pages ให้เราเขียน page ด้วย vue ใส่ไว้ใน path นี้

// resources/js/Pages/Welcome.vue
<template>
<div class="container-fluid bg-info text-success">
    <h1>Welcome🥳</h1>
</div>
</template>
<script>
export default {}
</script>

แก้ web.php ตามนี้

<?php

Route::get('/', function () {
    return Inertia\Inertia::render('Welcome', []);
});


compile assets แล้วลองเข้าหน้าแรกของ app ควรเห็น content ใน Welcome.vue ด้วย style bootstrap แล้ว


ทดสอบการใช้งาน props ใน Welcome.vue โดยการเพิ่ม props ในไฟล์ตามนี้


// resources/js/Pages/Welcome.vue
...
<h1>Welcome🥳</h1>
<h2>{{ greeting }}</h2>
...

...
export default {
    props: ["greeting"],
}
...
ต่อด้วยส่ง prop greeting ใน web.php
...
return Inertia\Inertia::render('Welcome', ['greeting' => 'Sup!!']);
...
compile แล้วเข้าหน้าแรกดูควรเห็น content ที่เราเพิ่มแล้ว

ทดสอบการใช้งาน vue component ใน Welcome.vue

สร้างไฟล์ component Card.vue
// resources/js/components/Card.vue

<template>
    <div class="card" style="width: 18rem;">
        <img src="" class="card-img-top" alt="no image">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
    </div>
</template>

<script>
export default {}
</script>
จากนั้นนำ component ไปใช้งาน
// resources/js/Pages/Welcome.vue
<template>
<div class="container-fluid bg-info text-success">
    <h1>Welcome🥳</h1>
    <h2>{{ greeting }}</h2>
    <card />
</div>
</template>
<script>
import Card from "../components/Card"
export default {
components: { Card },
props: ["greeting"],
}
</script>
compile แล้วเข้าหน้าแรกดูควรเห็น component card ที่เราเพิ่มแล้ว