Vue.js in Laravel: Main Things You Need to Know

To achieve dynamic behavior in Laravel projects, you can use JavaScript, and Vue.js is one of the most popular solutions. This article will provide an overview for Laravel developers who hasn't started with Vue.

What is a Vue.js Component?

Before diving into Laravel integration, let's understand what a Vue component is. A Vue component is a reusable piece of UI that combines HTML template and JavaScript logic in a single file.

Here's an example of a Vue component for listing tasks and having a checkbox to mark them as completed:

<template>
  <div class="bg-white p-6 rounded-lg shadow">
    <h2 class="text-xl font-bold mb-4">My Tasks</h2>
    <ul class="space-y-2">
      <li
        v-for="task in tasks"
        :key="task.id"
        class="flex items-center space-x-3"
      >
        <input
          type="checkbox"
          :checked="task.completed"
          @change="toggleTask(task.id)"
        >
        <span :class="{ 'line-through text-gray-500': task.completed }">
          {{ task.title }}
        </span>
      </li>
    </ul>
  </div>
</template>
 
<script setup>
import { ref } from 'vue'
 
// In real projects, this data would come from API or Laravel Controller via Inertia
const tasks = ref([
  { id: 1, title: 'Learn Vue.js basics', completed: true },
  { id: 2, title: 'Set up Laravel project', completed: false },
  { id: 3, title: 'Build first component', completed: false }
])
 
const toggleTask = (taskId) => {
  const task = tasks.value.find(t => t.id === taskId)
  if (task) {
    task.completed = !task.completed
  }
}
</script>

This shows the basic Vue component structure: a template section for HTML and a script setup section for JavaScript logic using a Composition API. The component is interactive and reusable.

Using Vue.js in Laravel: Three Options

You can use Vue in Laravel projects in three different ways:

1. VILT Stack with Inertia (currently most popular)
2. Vue Components with Laravel API (for dedicated front-end and back-end teams)
3. Simple Vue Components in Blade (but consider Alpine.js for this, instead)

Let's talk about each of them in more details.

Case 1: VILT Stack with Inertia (Most Popular)

The VILT stack (Vue, Inertia, Laravel, Tailwind) has become the most popular way to build modern single-page applications with Laravel. Laravel 12 includes official Vue starter kit with Inertia 2, Vue 3 Composition API, TypeScript, Tailwind, and shadcn-vue components.

Creating a New Project with Laravel 12 Vue Starter Kit

laravel new my-project

During setup, choose Vue as your starter kit. This creates a complete VILT stack with...