Vue entra como camada de tela. O Laravel continua dono de tudo.

Vue é um framework reativo baseado em componentes: você descreve o estado (dados) e o template reage sozinho quando esse estado muda, sem manipular o DOM na mão como em jQuery. Existem duas formas de escrever um componente — a Options API antiga (data(), methods, computed como blocos separados) e a Composition API com <script setup>, que é o padrão atual. Você vai ver Options API em tutoriais mais antigos; nesta trilha usamos só Composition API porque facilita reaproveitar lógica entre componentes (composables, tópico 10).

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

const contador = ref(0)
</script>

<template>
  <button @click="contador++">Cliques: {{ contador }}</button>
</template>

<style scoped>
button { padding: .5rem 1rem; }
</style>

ref() embrulha um valor primitivo (string, number, boolean) e precisa de .value dentro do <script> — no template o Vue desembrulha sozinho. reactive() é pra objetos e não usa .value, mas perde a reatividade se você desestruturar as propriedades soltas.

import { ref, reactive } from 'vue'

const nome = ref('')          // primitivo -> precisa de .value no <script>
const produto = reactive({    // objeto -> não usa .value
  nome: '',
  precoCentavos: 0,
})

function atualizarNome(valor) {
  nome.value = valor          // aqui usa .value
  produto.nome = valor        // aqui não usa
}

{{ }} imprime texto; :atributo (forma curta de v-bind:atributo) liga um atributo HTML a uma variável reativa — inclusive classes e estilos condicionais, o que combina direto com utilitários do Tailwind.

<template>
  <h1>{{ produto.nome }}</h1>
  <img :src="produto.imagemUrl" :alt="produto.nome">
  <span :class="{ 'text-red-600': produto.estoque === 0, 'text-green-600': produto.estoque > 0 }">
    {{ produto.estoque }} em estoque
  </span>
</template>

v-if remove/recria o elemento do DOM (mais caro, mas correto pra conteúdo que raramente alterna). v-show só alterna display: none via CSS — mais barato pra algo que abre e fecha com frequência, como um menu dropdown.

<p v-if="produtos.length === 0">Nenhum produto cadastrado.</p>
<ul v-else>
  <li v-for="p in produtos" :key="p.id">{{ p.nome }}</li>
</ul>

<div v-show="menuAberto" class="dropdown">...</div>

:key precisa ser um identificador estável — o Vue usa isso pra saber qual elemento do DOM corresponde a qual item quando a lista muda.

<tr v-for="venda in vendas" :key="venda.id">
  <td>{{ venda.id }}</td>
  <td>{{ venda.total_formatado }}</td>
</tr>

@evento é a forma curta de v-on:evento. Modificadores como .prevent e .stop evitam escrever event.preventDefault()/stopPropagation() na mão.

<form @submit.prevent="salvar">
  <input @keyup.enter="buscar" v-model="termo">
  <button @click.stop="remover(produto.id)">Remover</button>
</form>

v-model faz o binding nos dois sentidos (estado → input e input → estado) pra inputs de texto, select, checkbox e radio.

<input v-model="produto.nome" type="text">
<select v-model="produto.categoriaId">
  <option v-for="c in categorias" :key="c.id" :value="c.id">{{ c.nome }}</option>
</select>
<input v-model.number="produto.quantidade" type="number">
<input v-model="produto.ativo" type="checkbox">

computed é um valor derivado e cacheado — só recalcula quando uma dependência muda. watch é pra efeito colateral: reagir a uma mudança executando alguma ação (buscar dado, chamar API, etc).

const subtotal = computed(() =>
  itensCarrinho.value.reduce((soma, item) => soma + item.preco * item.quantidade, 0)
)

watch(() => produto.categoriaId, (novaCategoria) => {
  carregarSubcategorias(novaCategoria)
})

Um componente recebe dados de fora via props e avisa o pai de eventos via emits — nunca altera uma prop diretamente. <slot> deixa o pai injetar conteúdo dentro do componente filho.

<!-- ProdutoCard.vue -->
<script setup>
defineProps({
  produto: { type: Object, required: true }
})
defineEmits(['remover'])
</script>

<template>
  <div class="card">
    <h3>{{ produto.nome }}</h3>
    <slot />
    <button @click="$emit('remover', produto.id)">Remover</button>
  </div>
</template>

<!-- Uso no componente pai -->
<ProdutoCard
  v-for="p in produtos"
  :key="p.id"
  :produto="p"
  @remover="excluirProduto"
>
  <span class="badge">Em estoque</span>
</ProdutoCard>

Hooks como onMounted/onUnmounted rodam em pontos específicos da vida do componente. Um composable é só uma function que agrupa lógica reativa reutilizável — o equivalente Vue de extrair um trait ou um service no Laravel.

import { onMounted, onUnmounted } from 'vue'

onMounted(() => console.log('componente montado'))
onUnmounted(() => console.log('componente desmontado'))

// resources/js/composables/useMoney.js
export function useMoney() {
  function paraReais(valorInteiro) {
    return (valorInteiro / 10000).toLocaleString('pt-BR', {
      style: 'currency',
      currency: 'BRL',
    })
  }

  function paraInteiro(valorReais) {
    return Math.round(valorReais * 10000)
  }

  return { paraReais, paraInteiro }
}