Criando uma Nova Página

🔍 Preview

No Store Theme, uma nova página sempre envolve duas etapas principais:

1. Criar a rota no router.ts 2. Criar a estrutura da página dentro da pasta views

A navegação do projeto é totalmente controlada pelo Vue Router.

1️⃣ Criando a rota

Toda nova página precisa ser registrada no arquivo src/router/router.ts

Exemplo básico:

1import NewView from '@/views/NewView/NewView.vue';
2
3export const routes: Array<RouteRecordRaw> = [
4  {
5    name: 'new-page',
6    path: '/nova-pagina',
7    component: NewView,
8    meta: { layout: 'DefaultLayout' },
9  },
10];

🧠 Entendendo cada propriedade

• name: nome interno da rota (usado para navegação programática)
• path: URL da página
• component: componente Vue que representa a página
• meta.layout: define qual layout será utilizado

2️⃣ Criando a estrutura em views

Após definir a rota, crie a página dentro da pasta src/views

📦 Estrutura recomendada:

1views/
2 └── NewView/
3      ├── NewView.vue
4      ├── styles.scoped.css
5      ├── types.ts

Estrutura de cada arquivo

🔹 NewView.vue É o componente principal da página.

Responsável por:

• Importar componentes da pasta components
• Controlar lógica da página
• Orquestrar a experiência da interface

Exemplo:

1<script setup lang="ts">
2</script>
3
4<template>
5  <div class="new-view">
6    <h1>Nova Página</h1>
7  </div>
8</template>
9
10<style src="./styles.scoped.css" scoped></style>

🔹 styles.scoped.css CSS exclusivo da página.

• Não vaza para outros componentes
• Mantém organização
• Evita conflitos globais

🔹 types.ts Centraliza tipagens específicas da página.

Use para:

• Interfaces de dados consumidos
• Tipagens auxiliares
• Estruturas específicas da View

Evite colocar essas tipagens na pasta global ts quando forem específicas da página.

3️⃣ Rotas com Children (páginas internas)

Exemplo real do projeto:

1{
2  name: 'institutional',
3  path: '/pagina',
4  component: () => import('@/views/InstitutionalView/InstitutionalView.vue'),
5  meta: { layout: 'DefaultLayout' },
6  children: [
7    {
8      name: 'talkus-institutional',
9      path: 'fale-conosco',
10      component: () =>
11        import('@/views/InstitutionalView/TalkusView/TalkusView.vue'),
12      meta: { layout: 'DefaultLayout' },
13    },
14  ],
15}

Isso gera URLs como /pagina/fale-conosco

Ideal para:

• Institucional
• Fluxos internos
• Agrupamento por contexto

⚠️ Boas práticas

• Sempre definir meta.layout
• Manter padrão de nomenclatura NomeView
• Não colocar lógica pesada diretamente na View - particione em componentes menores

🏁 Próximo passo

Agora que você sabe como criar uma página, veja também:

Customização de Interfaces: criando uma nova camada de layout

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