Laravel Inertia Client-side 설치

Inertia.js의 클라이언트 측 설정 과정은 서버 측 프레임워크를 설정한 후에 이루어집니다. Inertia는 현재 React, Vue, Svelte를 지원합니다.

 

Laravel starter kits

Laravel의 스타터 키트인 Breeze와 Jetstream은 Inertia 애플리케이션을 위한 준비된 스캐폴딩을 제공합니다. 이 스타터 키트들은 Laravel 및 Vue 또는 React를 사용하여 새로운 Inertia 프로젝트를 시작하는 가장 빠른 방법입니다. 수동으로 Inertia를 설치하려면 아래 문서를 참조하십시오.

 

Install dependencies

우선, 선택한 프레임워크에 해당하는 Inertia 클라이언트 측 어댑터를 설치합니다.

npm install @inertiajs/vue3

 

Initialize the Inertia app

다음으로, 주요 JavaScript 파일을 업데이트하여 Inertia 앱을 부팅합니다. 이를 위해 기본 Inertia 컴포넌트로 클라이언트 측 프레임워크를 초기화합니다.

 

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'

createInertiaApp({
  resolve: name => {
    const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
    return pages[`./Pages/${name}.vue`]
  },
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
})

 

setup 콜백은 클라이언트 측 프레임워크를 초기화하는 데 필요한 모든 것을 받습니다, 여기에는 루트 Inertia App 컴포넌트도 포함됩니다.

 

Resolving components

resolve 콜백은 Inertia에 페이지 컴포넌트를 로드하는 방법을 알려줍니다. 이는 페이지 이름(문자열)을 받아 페이지 컴포넌트 모듈을 반환합니다. 이 콜백의 구현 방법은 사용하는 번들러(Vite 또는 Webpack)에 따라 달라집니다.

 

// Vite
resolve: name => {
  const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
  return pages[`./Pages/${name}.vue`]
},

// Webpack
resolve: name => require(`./Pages/${name}`),

 

기본적으로 컴포넌트를 선 로드하는 것을 권장합니다, 이는 단일 JavaScript 번들로 이어집니다. 그러나 컴포넌트를 지연 로드하려면 코드 분할 문서를 참조하십시오.

 

Defining a root element

기본적으로 Inertia는 애플리케이션의 루트 템플릿이 id가 app인 루트 요소를 가지고 있다고 가정합니다. 애플리케이션의 루트 요소가 다른 id를 가지고 있다면, id 속성을 사용하여 제공할 수 있습니다.

 

createInertiaApp({
  id: 'my-app',
  // ...
})