TailAdmin와 Laravel 통합

Source: Dev.to

전체 코드: raflizocky/laravel11-tailadmin

Laravel 11 요구 사항

# php version
php -v   # >= 8.2

composer -v
node -v   # >= v14.16
npm -v

Laravel 설정

# Laravel 11 설치
composer create-project "laravel/laravel:^11.0" example-app

# .env 설정
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_db
DB_USERNAME=root
DB_PASSWORD=your_password

# 마이그레이션 및 실행
php artisan migrate
php artisan serve

TailAdmin

1. 다운로드

공식 사이트에서 HTML + Tailwind CSS 템플릿을 다운로드하고, 압축을 풀어 폴더명을 tailadmin으로 바꾼 뒤 Laravel의 public 디렉터리로 이동합니다.

2. Webpack

템플릿은 Webpack을 사용해 에셋을 컴파일합니다.

# Laravel 프로젝트 루트에서
cd public/tailadmin
npm i
npm run build

이제 public/tailadmin 안에 build 폴더가 생성됩니다.

3. 기본 레이아웃

1. resources/views 안에 components 디렉터리를 생성합니다.
2. layout.blade.php 파일을 만들고 public/tailadmin/build/index.html 내용을 복사합니다.
3. 에셋 경로를 Laravel의 asset() 헬퍼를 사용하도록 수정합니다.

예시 layout.blade.php

 localStorage.setItem('darkMode', JSON.stringify(value)))"
      :class="{ 'dark text-bodydark bg-boxdark-2': darkMode === true }">

     { setTimeout(() => loaded = false, 500) })"
         class="fixed left-0 top-0 z-999999 flex h-screen w-screen items-center justify-center bg-white dark:bg-black">
        
    

    
        
        
            {{ $slot }}
        
    

    

간단한 헤더와 사이드바 컴포넌트(components/header.blade.php, components/sidebar.blade.php)를 만들고 <x-header />와 <x-sidebar /> 태그로 포함시킬 수도 있습니다.

4. 대시보드

대시보드용 컨트롤러를 생성합니다:

php artisan make:controller DashboardController

위 단계들을 마치면 TailAdmin UI가 새 Laravel 11 애플리케이션에 통합됩니다.