Laravel/Inertia.js

초기세팅

짱구를왜말려? 2021. 9. 7. 17:07
반응형
SMALL

# What?

laravel mpa 구조 그대로 spa 구현 가능하게 도와주는 라이브러리

(후원자는 ssr까지 제공)

 

# How?

1. Back-end 세팅

composer require inertiajs/inertia-laravel

- welcome.blade.php => app.blade.php로 변경

@ app.blade.php

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <link href="{{ mix('/css/app.css') }}" rel="stylesheet" />
    <script src="{{ mix('/js/app.js') }}" defer></script>
    @inertiaHead
  </head>
  <body>
    @inertia
  </body>
</html>
php artisan inertia:middleware

@ Kernel.php

'web' => [
    // ...
    \App\Http\Middleware\HandleInertiaRequests::class,
],

@ UserController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Inertia\Inertia;

class UserController extends Controller
{
    public function index()
    {
        return Inertia::render("Pages/Login");
    }
}

@web.php

<?php

use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return \Inertia\Inertia::render("Login");
});

 

2. Front-end 세팅

npm i -D laravel-mix@6.0.31 vue@2.6.14 @vue/compiler-sfc@3.2.12 vue-loader@15.9.8
npm install @inertiajs/inertia @inertiajs/inertia-vue @inertiajs/progress
npm install --save babel-polyfill

- resources/js에 Pages 폴더 만들고 앞으로 페이지는 여기서 관리

 

@ webpack.mix.js에 .vue() 추가

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ])
    .vue();

 

@ app.js

require('./bootstrap');
import "babel-polyfill";
import Vue from 'vue'
import { createInertiaApp } from '@inertiajs/inertia-vue'
import { InertiaProgress } from '@inertiajs/progress'

createInertiaApp({
  resolve: name => require(`./Pages/${name}`),
  setup({ el, App, props, plugin }) {
  	Vue.use(plugin)
    
    new Vue({
      render: h => h(App, props),
    }).$mount(el)
  },
});

InertiaProgress.init();

 

- Pages/Login.vue 만들어서 아무 내용이나 삽입

@ Login.vue

<template>
    <div id="login">
        <input type="text" placeholder="아이디">
        <input type="password" placeholder="비밀번호">
    </div>
</template>
<script>
export default {

}
</script>
npm install
npm run watch

* npm run watch했을 때 한번 실패하더라도 다시 하면 됨

LIST