Home.vue

<template>
<div>
  <main>
    <div class="main-top">
      <h1>Bem vindo, {{nome}}!</h1>
      <p>{{data}}</p>
    </div>
    <div class="main-body">
      <p>O que gostaria de fazer?</p>
      <div class="btn-group">
        <!-- <button class="btn btn-primary btn-lg">Novo Pedido</button>
        <button class="btn btn-success btn-lg">Sincronização</button> -->
        <meu-botao tipo="button" titulo="Novo Pedido" />
      </div>
    </div>
  </main>

    <footer>
    </footer>
  </div>

</template>

<script>
import Botao from '../../shared/button/Button.Vue';

export default {
  components: {
    'meu-botao' : Botao
  },
  data(){
    return{
      nome: 'Rafael',
      data: new Date().toLocaleDateString('pt-BR', {day: 'numeric', month: 'long',  year: 'numeric', hour:'numeric', minute: 'numeric'})}
  }
}
</script>

<style>

h1{
  font-size: 2em;
}

main .main-top{
  border-bottom: 1px solid #0000001a;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2%;
}

main .main-body{
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #0000001a;
  padding-bottom: 4%;
  margin-top: 2%;
}
  .main-body p{
    text-align: center;
    font-size: 1.2em;
  }
  .main-body .btn-group{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 2%;
  }
</style>