-
초기세팅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.8npm install @inertiajs/inertia @inertiajs/inertia-vue @inertiajs/progressnpm 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'Laravel > Inertia.js' 카테고리의 다른 글
Inertia.js에서 AOS 사용하는법 (0) 2022.05.21 Inertia.js 외부링크로 redirect하는법(결제 요청 시 필요) (0) 2022.05.13 검색 필터 및 더보기 구현(#Filter #Search #LoadMore) (0) 2021.11.16 Shared Data (0) 2021.09.21 레이아웃 설정법 (0) 2021.09.21