Vue.js 입문 — Inertia × Laravel에서 사용하는 기초 지식

<!-- Options API 예 -->
<script>
export default {
    data() {
        return { count: 0 }
    },
    methods: {
        increment() {
            this.count++
        }
    }
}
</script>

<template>
    <button @click="increment">{{ count }}</button>
</template>

<!-- Composition API (<script setup>) 예 -->
<script setup>
import { ref } from 'vue'

const count = ref(0)

function increment() {
    count.value++
}
</script>

<template>
    <button @click="increment">{{ count }}</button>
</template>

laravel new my-app

# 서버사이드 (PHP)
composer require inertiajs/inertia-laravel

# 클라이언트사이드 (JavaScript)
npm install @inertiajs/vue3 vue
npm install --save-dev @vitejs/plugin-vue

import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
})

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'

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

resources/js/
├── app.js             # Inertia 앱의 기점
├── bootstrap.js
├── components/        # 재이용 가능한 UI 컴포넌트
│   ├── NavBar.vue
│   └── ...
├── layouts/           # 레이아웃 컴포넌트
│   ├── AppLayout.vue
│   └── AuthLayout.vue
└── pages/             # Inertia 페이지 컴포넌트 (컨트롤러 이름에 대응)
    ├── Auth/
    │   ├── Login.vue
    │   └── Register.vue
    ├── Dashboard.vue
    └── Posts/
        ├── Index.vue
        ├── Create.vue
        └── Show.vue

<script setup>
const name = '세계'
const count = 3
</script>

<template>
    <p>안녕하세요, {{ name }}!</p>
    <p>2배는 {{ count * 2 }}</p>
</template>

<template>
    <p v-if="isLoggedIn">어서 오세요!</p>
    <p v-else-if="role === 'admin'">관리자로 로그인 중</p>
    <a v-else href="/login">로그인</a>
</template>

<template>
    <ul>
        <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
    </ul>
</template>

<script setup>
import { ref } from 'vue'

const title = ref('')
const agreed = ref(false)
const role = ref('viewer')
</script>

<template>
    <!-- 텍스트 입력 -->
    <input v-model="title" type="text" />
    <p>입력 중: {{ title }}</p>

    <!-- 체크박스 -->
    <input v-model="agreed" type="checkbox" />
    <p>동의: {{ agreed }}</p>

    <!-- 셀렉트박스 -->
    <select v-model="role">
        <option value="viewer">열람자</option>
        <option value="editor">편집자</option>
        <option value="admin">관리자</option>
    </select>
</template>

<template>
    <!-- 동적인 속성 바인딩 -->
    <img :src="imageUrl" :alt="imageAlt" />

    <!-- 이벤트 핸들러 -->
    <button @click="handleClick">클릭</button>
    <form @submit.prevent="handleSubmit">...</form>
</template>

// app/Http/Controllers/PostController.php
use Inertia\Inertia;
use App\Models\Post;

class PostController extends Controller
{
    public function index()
    {
        return Inertia::render('Posts/Index', [
            'posts' => Post::latest()->paginate(10),
        ]);
    }
}

<!-- resources/js/pages/Posts/Index.vue -->
<script setup>
import { Link } from '@inertiajs/vue3'

defineProps({
    posts: Object,
})
</script>

<template>
    <div>
        <h1>게시물 목록</h1>
        <article v-for="post in posts.data" :key="post.id">
            <h2>
                <Link :href="`/posts/${post.id}`">{{ post.title }}</Link>
            </h2>
            <p>{{ post.created_at }}</p>
        </article>
    </div>
</template>

<script setup>
import { Link } from '@inertiajs/vue3'
</script>

<template>
    <!-- 기본 링크 -->
    <Link href="/posts">게시물 목록</Link>

    <!-- POST 메서드로 링크 (삭제 등) -->
    <Link href="/posts/1" method="delete" as="button" type="button">
        삭제
    </Link>

    <!-- 프리로드 (호버 시 사전 취득) -->
    <Link href="/posts/1" preload>게시물 보기</Link>
</template>

<script setup>
import { Form } from '@inertiajs/vue3'
</script>

<template>
    <Form action="/posts" method="post" class="flex flex-col gap-4" v-slot="{ errors, processing }">
        <div>
            <label for="title">제목</label>
            <input id="title" name="title" type="text" required />
            <p v-if="errors.title" class="error">{{ errors.title }}</p>
        </div>

        <div>
            <label for="content">본문</label>
            <textarea id="content" name="content"></textarea>
            <p v-if="errors.content" class="error">{{ errors.content }}</p>
        </div>

        <button type="submit" :disabled="processing">
            {{ processing ? '전송 중...' : '게시하기' }}
        </button>
    </Form>
</template>

<script setup lang="ts">
import { Form } from '@inertiajs/vue3'
import { store } from '@/routes/login'
</script>

<template>
    <Form
        v-bind="store.form()"
        :reset-on-success="['password']"
        v-slot="{ errors, processing }"
        class="flex flex-col gap-6"
    >
        <!-- 폼 내용 -->
    </Form>
</template>

// app/Http/Controllers/PostController.php
class PostController extends Controller
{
    public function store(Request $request)
    {
        $validated = $request->validate([
            'title'   => ['required', 'string', 'max:255'],
            'content' => ['required', 'string'],
        ]);

        Post::create($validated + ['user_id' => auth()->id()]);

        return redirect()->route('posts.index')
            ->with('success', '게시물을 작성했습니다.');
    }
}

<!-- resources/js/pages/Posts/Create.vue -->
<script setup>
import { useForm } from '@inertiajs/vue3'

const form = useForm({
    title: '',
    content: '',
})

function submit() {
    form.post('/posts')
}
</script>

<template>
    <form @submit.prevent="submit">
        <div>
            <label>제목</label>
            <input v-model="form.title" type="text" />
            <p v-if="form.errors.title" class="error">{{ form.errors.title }}</p>
        </div>

        <div>
            <label>본문</label>
            <textarea v-model="form.content"></textarea>
            <p v-if="form.errors.content" class="error">{{ form.errors.content }}</p>
        </div>

        <button type="submit" :disabled="form.processing">
            {{ form.processing ? '전송 중...' : '게시하기' }}
        </button>
    </form>
</template>

// app/Http/Middleware/HandleInertiaRequests.php
use Illuminate\Http\Request;
use Inertia\Middleware;

class HandleInertiaRequests extends Middleware
{
    public function share(Request $request): array
    {
        return array_merge(parent::share($request), [
            'auth' => [
                'user' => $request->user()
                    ? $request->user()->only('id', 'name', 'email')
                    : null,
            ],
            'flash' => [
                'success' => $request->session()->get('success'),
                'error'   => $request->session()->get('error'),
            ],
        ]);
    }
}

<script setup>
import { computed } from 'vue'
import { usePage } from '@inertiajs/vue3'

const page = usePage()

// 공유 데이터로의 접근
const user = computed(() => page.props.auth.user)
const flash = computed(() => page.props.flash)
</script>

<template>
    <header>
        <span v-if="user">{{ user.name }}</span>
        <span v-else>게스트</span>
    </header>

    <div v-if="flash.success" class="alert-success">
        {{ flash.success }}
    </div>
</template>

<script setup>
import { ref } from 'vue'

const count = ref(0)
const isOpen = ref(false)

// .value로 접근 (템플릿 내에서는 불필요)
count.value++
</script>

<template>
    <p>{{ count }}</p>
    <button @click="isOpen = !isOpen">토글</button>
</template>

<script setup>
import { ref, computed } from 'vue'

const posts = ref([])

const publishedPosts = computed(() =>
    posts.value.filter(post => post.published)
)
</script>

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
    console.log('컴포넌트가 마운트되었습니다')
})
</script>