# Personalize o Console da Azion com o Console Kit

O **Console Kit** da Azion permite que você crie uma interface Azion personalizada para atender às necessidades do seu negócio. Neste guia, você aprenderá a fazer algumas alterações visuais simples no Console da Azion.

:::caution[atenção]
Para seguir este guia, você deve primeiro [configurar seu projeto do Console Kit](/pt-br/documentacao/devtools/console-kit/#configure-um-projeto) em um repositório bifurcado (forked) na sua conta e inicializar o projeto usando a CLI da Azion para executá-lo localmente. Então, você pode trabalhar na alteração da versão bifurcada do Console da Azion e, uma vez concluído, entregar o projeto no edge usando a CLI.
:::

---

## Adicione um componente de interface e crie uma função de route para navegação

Neste exemplo, você adicionará um novo componente de interface de usuário (UI) a uma list view para chamar a atenção para uma etapa importante de um processo de fluxo de trabalho para os usuários do Console.

Você adicionará os componentes `InlineMessage` e `PrimeButton` à list view de **Applications** para alertar seus usuários de que eles devem criar um domínio para entregar applications online, com uma ação de botão que direciona os usuários para a rota `create-domain`. Para fazer isso:

1. Abra o projeto do Console Kit na sua IDE.
2. Execute `azion dev` para inicializar um servidor de desenvolvimento local.
3. Na pasta `src/views`, localize a list view de Applications e modifique o código conforme a seguir:

```js title="src/views/EdgeApplications/ListView.vue"
  ...
  import { computed, ref } from 'vue'

  // import statement para o componente InlineMessage
  import InlineMessage from 'primevue/inlinemessage'

  // import statement para o componente PrimeButton
  import Illustration from '@/assets/svg/illustration-layers.vue'

  // import statement para a função do router
  import { useRouter } from 'vue-router'
  ...
```

4. Na seção de declaração de constantes, crie a const `router` para referenciar a função do route:

```js title="src/views/EdgeApplications/ListView.vue"
  ...
  defineOptions({ name: 'list-edge-applications' })

  // referencia a função  router para a ação do botão
  const router = useRouter()
  ...  
```

5. Crie a função `navigateToDomains` que será executada quando o usuário clicar no `PrimeButton` antes de fechar a tag `<script>`:

```js title="src/views/EdgeApplications/ListView.vue"
  ...
  
  // ação on push action para redirecionar o usuário para a rota create-domain
  function navigateToDomains() {
    router.push({ name: 'create-domain' })
  }
</script>
```

:::tip
Você pode usar esta função com as rotas definidas na pasta `src/router/routes`.
:::

6. Agora adicione os elementos ao layout da list view dentro da tag `<template>`:

```html title="src/views/EdgeApplications/ListView.vue"
    ...
    <template #heading>
      <PageHeadingBlock pageTitle="Applications"></PageHeadingBlock>

      <!--- adiciona o componente InlineMessage e personaliza a mensagem com o button --->
      <InlineMessage
        class="w-fit"
        severity="warn"
        >Remember to create a
        <PrimeButton
          link
          size="small"
          class="p-0"
          @click="navigateToDomains"
        >
          Domain
        </PrimeButton>
         and select an application to launch online.
      </InlineMessage>
    </template>
    <template #content>
    ...
```

7. No navegador, acesse o localhost e navegue até a página **Applications**. Você deve ver o elemento `InlineMessage` com um `PrimeButton` abaixo do título.
8. Depois de terminar, execute `azion deploy` para lançar as alterações no edge.