Laravel - Splade (Single Page Application)

Blade 와 Vue 기반으로 단일 페이지 어플리케이션 구축

https://splade.dev/docs/introducing-splade

Introducing Splade | Laravel Splade

 

 

특징

<Link href="/">Home</Link>
<Link href="{{ route('contact') }}">Contact</Link>

 

 

지원하는 컴포넌트

 

<Link> 

구성 요소는 전체 페이지 새로고침을 방지하여 SPA 느낌을 줍니다. 

 

<x-data>

반응형 데이터와 상호 작용하는 구성 요소(양방향 바인딩) 기본값을 지원하고 페이지 간 상태를 기억하며 로컬 저장소에 상태를 기억

 

<x-defer>

데이터를 비동기적으로 로드하거나 폴링하는 구성요소

 

<x-errors>

양식 외부에 유효성 검사 오류를 표시하는 구성 요소

 

<x-event>

브로드캐스트된 이벤트를 수신하는 구성요소입니다. 리디렉션, 새로 고침, 토스트 표시 및 이벤트 데이터와의 상호 작용을 지원

 

<x-flash>

플래시된 데이터와 상호 작용하는 구성 요소

 

<x-form>

양식을 비동기적으로 보내는 구성 요소입니다. 기본값, 유효성 검사 오류, 양방향 바인딩, 파일 업로드, 확인 팝업 및 상태 관리를 지원

 

<x-lazy>

템플릿의 섹션을 느리게 로드하는 구성요소입니다. 조건부 데이터 로드, 자리 표시자 및 다른 끝점에서의 로드를 지원

 

<x-modal>

든 경로를 모달 또는 슬라이드오버로 로드하는 구성 요소입니다. 중첩된 모달도 지원.

 

<x-state>

효성 검사 오류, 플래시된 데이터 및 공유 데이터와 상호 작용하는 구성 요소

 

<x-teleport>

템플릿의 섹션을 다른 DOM 노드로 순간 이동하는 구성 요소

 

<x-toggle>

페이지의 부울 값을 쉽게 전환하는 구성 요소

 

<x-transition>

템플릿에 애니메이션을 추가하는 구성요소

 

Toast

페이지에 토스트 메시지를 표시하는 구성요소입니다. 9가지 위치, 4가지 스타일, 배경화면 및 자동 해제를 지원

 

Table

자동 채우기, 검색, 필터링, 정렬, 열 전환 및 페이지 매김을 지원하는 테이블을 자동으로 생성하는 구성 요소

 

Form

신속하게 양식을 구축하는 구성 요소입니다. 모델 바인딩, 검증, Eloquent Relationships, 텍스트 영역 자동 크기, Choices.js 검색 가능/태그 지정 가능 선택, 날짜/시간/범위 선택을 위한 Flatpickr 및 FilePond 파일 업로드를 지원

 

 

설치하기

composer creat-project laravel/laravel mySplade

cd mySplade

composer require protonemedia/laravel-splade
 
php artisan splade:install

npm run build

php artisan serve