Criando um Novo Layout

🔍 Preview

Nem toda página precisa ter a mesma estrutura visual.

Em alguns projetos, pode ser necessário remover header e footer, criar páginas especiais ou estruturar experiências diferentes.

Neste guia você vai aprender:

• Quando criar um novo layout
• Como criar
• Como aplicar a uma página
• Boas práticas

---

🧱 O que é um Layout?

Layout é a camada estrutural que envolve as páginas.

Ele normalmente contém:

• Header
• Footer
• Estrutura base
• Containers principais

A área restrita inicia com um layout padrão chamado DefaultLayout

Na maioria dos projetos, apenas ele é suficiente.

🧠 Quando criar um novo layout?

Crie um novo layout quando:

• A página não deve exibir header/footer
• Existe uma experiência isolada (ex: login)
• Existe uma landing page especial
• Uma campanha exige estrutura diferente

Evite criar layouts desnecessários.

🛠️ Criando um novo layout

1️⃣ Vá até a pasta src/layouts

2️⃣ Crie um novo arquivo AuthLayout.vue

3️⃣ Estrutura básica:

1<template>
2  <div class="auth-layout">
3    <slot />
4  </div>
5</template>

O slot é onde a página será renderizada.

🔗 Aplicando Layout via Router

Na Área restrita, o layout é definido através do meta das rotas.

Isso garante:

• Centralização da estrutura
• Controle explícito por rota
• Melhor organização arquitetural

1️⃣ Declarando os layouts permitidos

No router.ts, declare os layouts válidos no RouteMeta:

1declare module 'vue-router' {
2  interface RouteMeta {
3    layout: 'DefaultLayout' | 'AuthLayout';
4  }
5}

Isso:

• Garante tipagem forte
• Evita erro de nome incorreto
• Padroniza os layouts disponíveis

Sempre que criar um novo layout, adicione ele aqui.

2️⃣ Definindo layout na rota

1export const routes: Array<RouteRecordRaw> = [
2  {
3    name: 'Auth',
4    path: '/',
5    component: AuthView,
6    meta: { layout: 'AuthLayout' },
7  },
8]

Agora essa rota utilizará o layout informado.

3️⃣ Como o layout é renderizado?

No App.vue faz uso do src/core/CoreLayout.vue responsável por identificar e resolver qual cliente deve ser renderizado

1<template>
2  <TranslateContext>
3    <CustomTheme v-if="templateStore.getTemplate">
4      <RouterView v-slot="{ Component, route }">
5        <CoreLayout v-if="route.meta.layout">
6          <component :is="Component" :key="$route.path" />
7        </CoreLayout>
8      </RouterView>
9    </CustomTheme>
10  </TranslateContext>
11</template>

Em CoreLayout.vue o layout é resolvido com base no route.meta.layout

Isso permite que cada rota escolha sua própria estrutura.

⚠️ Erros comuns

• Esquecer de adicionar o novo layout na tipagem
• Escrever nome diferente do arquivo
• Criar layout sem slot

🏁 Próximo passo

Agora que você sabe estruturar a interface, veja também:

Criando uma Nova Página: adicionando uma nova página no projeto

Consumo de Dados: como consumir dados via API Pública Persistência de dados: como funciona