Pular para conteúdo

Tutorial Livraria (Carrinho de compras)

Nesta etapa, você irá desenvolver uma aplicação de carrinho de compras utilizando Vue.js. O objetivo é criar uma aplicação que permita ao usuário adicionar produtos a um carrinho, visualizar o carrinho e finalizar a compra.

Usaremos como base esse protótipo feito no Figma. Neste momento, vamos fazer tudo usando apenas um componente, ou seja, apenas o arquivo App.vue. O objetivo é que você consiga entender como funciona a estrutura de uma aplicação Vue.js.

Vamos desenvolver a aplicação em etapas, começando com a configuração do ambiente e a criação da estrutura básica do projeto. Em seguida, adicionaremos os componentes necessários para o carrinho de compras e implementaremos a lógica de adição e remoção de produtos.

Criando a aplicação

Para criar a aplicação, siga os passos abaixo (1):

  1. Lembre-se que você deve estar com o Node na versão superior a 20.0.0 e estar num diretório adequado para criar o projeto.
npm init vue@latest tutorial-livraria
◆  Select features to include in your project: (↑/↓ to navigate, space to select, a to toggle all, enter to confirm)
│  ◻ TypeScript
│  ◻ JSX Support
│  ◻ Router (SPA development)
│  ◻ Pinia (state management)
│  ◻ Vitest (unit testing)
│  ◻ End-to-End Testing
│  ◼ ESLint (error prevention)
│  ◼ Prettier (code formatting)

Em seguida, abra a pasta tutorial-livraria no VSCode e execute os seguintes comandos no terminal:

npm install
npm run dev

Lembrando que, com os comandos acima, você instala as dependências do projeto e inicia o servidor de desenvolvimento. O servidor estará em execução na porta 5173, caso esta esteja livre. Para acessar a aplicação, basta abrir o navegador e acessar a URL http://localhost:5173.

Vamos agora fazer a limpeza do projeto:

  • Abra o arquivo src/App.vue e remova todo o conteúdo, deixando apenas a tag <template> e a tag <script setup>. O arquivo deve ficar assim:
./src/App.vue
1
2
3
<script setup></script>

<template></template>
  • Remova todos os arquivos e subdiretórios da pasta src/components.
  • Edite o arquivo src/assets/main.css, e deixe como abaixo:
./src/assets/main.css
1
2
3
4
5
6
@import './base.css';

html {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.5;
}

Note que o arquivo base.css é um arquivo CSS que contém as regras de estilo base para a aplicação. Ele é importado no arquivo main.css, que é o arquivo principal de estilos da aplicação. Também removemos as regras de estilo que estavam no arquivo main.css e deixamos apenas as regras de estilo base e da tag html. Nesse caso, a regra de estilo font-size define o tamanho da fonte da aplicação. O valor clamp(1rem, 1.5vw, 1.2rem) significa que o tamanho da fonte será de 1rem (16px) no menor tamanho de tela, aumentará para 1.5vw (1.5% da largura da tela) em telas médias e será limitado a 1.2rem (19.2px) em telas grandes.

Instalando o pacote de ícones

Para a criação desse projeto, usaremos a biblioteca de ícones Material Design Icons. Para instalar, execute o seguinte comando:

npm install @mdi/font #(1)(2)
  1. Antes de executar esse comando, é aconselhável parar a execução do servidor de desenvolvimento. Para isso, pressione Ctrl + C no terminal onde o servidor está em execução. Isso interromperá o processo do servidor.
  2. O comando acima instala a biblioteca de ícones Material Design Icons. Essa biblioteca contém uma coleção de ícones que podem ser usados em aplicações web. A biblioteca é baseada no Material Design, um sistema de design criado pelo Google.

Em seguida, vamos importar os ícones no arquivo src/main.js. Para isso, abra o arquivo src/main.js e adicione a seguinte linha:

./src/main.js
1
2
import './assets/main.css';
import '@mdi/font/css/materialdesignicons.css';
👁👁 Versão completa
./src/main.js
1
2
3
4
5
6
7
import './assets/main.css'
import '@mdi/font/css/materialdesignicons.min.css'

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

Uma lista completa de ícones do Material Design Icons pode ser encontrada aqui. A forma de usar os ícones é adicionar a classe correspondente ao elemento HTML desejado. Por exemplo, o ícone do carrinho é representado pela classe mdi mdi-cart. Para usar um ícone, basta adicionar a classe correspondente ao elemento HTML desejado. Em geral, os ícones são usados em elementos <span> ou <i>.

Também, para criar a aplicação, precisaremos das imagens que foram usadas no protótipo e que são as capas dos livros. Para isso, você pode baixar o arquivo de imagens, clicando no botão abaixo.

Baixar arquivo de imagens

Criando o cabeçalho

Vamos inicialmente criar a estrutura principal do cabeçalho, ainda sem a funcionalidade de abrir o carrinho. Para isso, vamos editar o arquivo src/App.vue e adicionar o seguinte código:

./src/App.vue
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<template>
  <header>
    <nav>
      <h1>
        <a href="#">
          IFbooks
          <span class="logo-title"> Apreço a livros </span>
        </a>
      </h1>
      <div class="search-wrapper">
        <input type="text" class="search" placeholder="Buscar..." />
      </div>
      <ul>
        <li>Termos</li>
        <li>Equipe</li>
        <li>Envio</li>
        <li>Devoluções</li>
      </ul>
      <ul class="icons">
        <li><span class="mdi mdi-cart"></span></li>
        <li><span class="mdi mdi-heart"></span></li>
        <li><span class="mdi mdi-account"></span></li>
      </ul>
    </nav>
  </header>
</template>

Note, no código acima, os seguintes detalhes:

  • O cabeçalho é composto por um nav que contém o título da aplicação, um campo de busca e uma lista de links.
  • O cabeçalho também contém uma lista de ícones, que são representados por classes do Material Design Icons. Esses ícones são usados para representar ações como abrir o carrinho, visualizar favoritos e acessar a conta do usuário.
  • Os ícones do Material Design Icons são representados por classes CSS. Por exemplo, o ícone do carrinho é representado pela classe mdi mdi-cart. Para usar um ícone, basta adicionar a classe correspondente ao elemento HTML desejado. Uma lista completa de ícones pode ser encontrada aqui.
  • O cabeçalho já possui várias classes definidas que facilitará a estilização. Em seguida vamos adicionar o CSS para estilizar o cabeçalho.
  • O cabeçalho possui um link que leva à página inicial da aplicação. O link é representado pela tag <a> e contém o título da aplicação. O título é estilizado com a classe logo-title, que pode ser usada para aplicar estilos específicos ao título.
  • O cabeçalho possui uma barra de pesquisa, que é representada pelo elemento <input>. A barra de pesquisa é estilizada com a classe search, que pode ser usada para aplicar estilos específicos à barra de pesquisa.
  • O cabeçalho possui uma lista de links, que são representados pelos elementos <li>. Os links são estilizados com a classe icons, que pode ser usada para aplicar estilos específicos aos ícones.

Agora, vamos adicionar a estilização no próprio componente. Para isso, adicione o seguinte código no arquivo src/App.vue:

./src/App.vue
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
<style scoped>
header nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2vh 8vw;
  border-bottom: 2px solid #27ae6099;

  & h1 {
    font-size: 1.3rem;
    color: #000;

    & a {
      text-decoration: none;
      color: #000;
      display: flex;
      align-items: center;
    }

    & .logo-title {
      border-left: 1px solid #27ae6099;
      font-size: 0.8rem;
      margin-left: 10px;
      padding-left: 10px;
      color: #27ae6099;
      width: 100px;
      line-height: 1rem;
    }
  }

  & input {
    width: 400px;
    height: 40px;
    border-radius: 5px;
    font-size: 1rem;
    border: 0;
    background-color: #f1f1f1;
    padding: 5px;
  }

  & ul {
    display: flex;
  }

  & ul li {
    list-style: none;
    margin: 0 10px;
    font-size: 1rem;
  }

  & .icons li {
    color: #27ae60;
    font-size: 1.3rem;
  }

  & .search-wrapper {
    position: relative;
  }

  & .search-wrapper::before {
    content: '󰍉'; /* Code glyph para mdi-magnify */
    font-family: 'Material Design Icons';
    font-size: 1.2rem;
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
  }

  & .search {
    padding-right: 2rem;
  }
}
</style>

Note que o código acima utiliza uma característica do CSS chamado de nesting, que permite aninhar seletores CSS dentro de outros seletores. Isso torna o código mais legível e organizado. O & é um seletor especial que representa o elemento pai. Por exemplo, & h1 representa o elemento <h1> dentro do elemento pai.

O código acima estiliza o cabeçalho da aplicação, definindo a aparência do título, da barra de pesquisa e dos ícones. O cabeçalho é exibido na parte superior da página e contém um link para a página inicial, uma barra de pesquisa e uma lista de ícones. A barra de pesquisa é estilizada com um fundo cinza claro e um tamanho fixo. Os ícones são exibidos em verde e têm um tamanho maior que o texto normal.

👁👁 Versão completa
./src/App.vue
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
<script setup>
</script>

<template>
    <header>
        <nav>
        <h1>
            <a href="#">
            IFbooks
            <span class="logo-title"> Apreço a livros </span>
            </a>
        </h1>
        <div class="search-wrapper">
            <input type="text" class="search" placeholder="Buscar..." />
        </div>
        <ul>
            <li>Termos</li>
            <li>Equipe</li>
            <li>Envio</li>
            <li>Devoluções</li>
        </ul>
        <ul class="icons">
            <li><span class="mdi mdi-cart"></span></li>
            <li><span class="mdi mdi-heart"></span></li>
            <li><span class="mdi mdi-account"></span></li>
        </ul>
        </nav>
    </header>
</template>

<style scoped>
header nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2vh 8vw;
    border-bottom: 2px solid #27ae6099;

    & h1 {
        font-size: 1.3rem;
        color: #000;

        & a {
        text-decoration: none;
        color: #000;
        display: flex;
        align-items: center;
        }

        & .logo-title {
        border-left: 1px solid #27ae6099;
        font-size: 0.8rem;
        margin-left: 10px;
        padding-left: 10px;
        color: #27ae6099;
        width: 100px;
        line-height: 1rem;
        }
    }

    & input {
        width: 400px;
        height: 40px;
        border-radius: 5px;
        font-size: 1rem;
        border: 0;
        background-color: #f1f1f1;
        padding: 5px;
    }

    & ul {
        display: flex;
    }

    & ul li {
        list-style: none;
        margin: 0 10px;
        font-size: 1rem;
    }

    & .icons li {
        color: #27ae60;
        font-size: 1.3rem;
    }

    & .search-wrapper {
      position: relative;
    }

    & .search-wrapper::before {
      content: '󰍉'; /_ Code glyph para mdi-magnify _/
      font-family: 'Material Design Icons';
      font-size: 1.2rem;
      position: absolute;
      right: 0.75rem;
      top: 50%;
      transform: translateY(-50%);
      pointer-events: none;
    }

    & .search {
      padding-right: 2rem;
    }
}
</style>

A seção Hero

A seção Hero vai apresentar uma imagem e um texto que descreve o livro e autor do mês. Essa seção é uma parte importante do layout, pois é a primeira que os visitantes verão ao acessar a página. Neste momento faremos uma implementação simples, com um livro estático, mas que pode ser facilmente adaptada para receber dados dinâmicos.

Inicialmente, vamos editar o arquivo src/App.vue para adicionar a seção Hero. Para isso, adicione o seguinte código no arquivo src/App.vue, no bloco <template>:

./scr/App.vue
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<main>
  <section class="hero">
    <div class="hero-content">
      <h3 class="outlined">Livro destaque</h3>
      <h2>Noc Ognia</h2>
      <p>
        Noc ognia é um romance de Erich-Emmanuel Schmitt, que narra a história
        de um homem que vive em um mundo onde as pessoas não podem mais sonhar.
        O livro é uma reflexão sobre a importância dos sonhos e da imaginação na
        vida humana. Erich-Emmanuel Schmitt é um autor francês conhecido por
        suas obras que exploram temas filosóficos e existenciais. Ele é um dos
        autores mais traduzidos da França e suas obras têm sido amplamente
        elogiadas pela crítica.
      </p>
      <button>Acessar página do livro</button>
    </div>
    <div class="hero-image">
      <img src="/imgs/hero.png" alt="Hero Image" />
    </div>
  </section>
</main>

Note que o código acima adiciona uma nova seção chamada "hero" ao layout. Essa seção contém um título, uma descrição e uma imagem. O título e a descrição são estilizados com classes CSS específicas, que serão definidas a seguir.

A definição do estilo da seção Hero será feita no próprio componente. Para isso, adicione o seguinte código no arquivo src/App.vue, no bloco <style>:

./scr/App.vue
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
.hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5vh 9vw;
  border-bottom: 2px solid #27ae6099;

  & h2 {
    color: #382c2c;
    font-size: 3rem;
    font-weight: 700;
  }

  & .hero-content {
    width: 50%;
    padding-right: 20px;
    font-weight: 400;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;

    & h3.outlined {
      background-color: transparent;
      color: #27ae60;
      border: 2px solid #27ae60;
      padding: 15px 20px;
      border-radius: 5px;
      font-size: 1rem;
    }

    & button {
      margin-top: 20px;
    }

    p {
      width: 70%;
    }
  }

  & .hero-image {
    width: 50%;
    text-align: right;
    padding-right: 4vw;

    & img {
      max-width: 100%;
      height: auto;
    }
  }
}

button {
  background-color: #27ae60;
  color: #fff;
  border: none;
  padding: 15px 20px;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
  gap: 20px;
  display: flex;
  justify-content: center;

  &.outlined {
    background-color: transparent;
    color: #27ae60;
    border: 2px solid #27ae60;
  }

  &.plain {
    background-color: transparent;
    color: black;
    border: none;
    cursor: pointer;
  }
}

Neste caso, foi adicionado um estilo para a seção Hero, que inclui um layout flexível para alinhar o conteúdo e a imagem. O título e a descrição também foram estilizados com cores e tamanhos de fonte específicos. Note que não deve ter sido excluído o código do cabeçalho, pois ele é necessário para a renderização correta da página.

No quadro abaixo, você pode ver como está, neste ponto, o arquivo src/App.vue.

👁👁 Versão completa
./src/App.vue
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
<script setup>
</script>

<template>
    <header>
        <nav>
        <h1>
            <a href="#">
            IFbooks
            <span class="logo-title"> Apreço a livros </span>
            </a>
        </h1>
        <div class="search-wrapper">
            <input type="text" class="search" placeholder="Buscar..." />
        </div>
        <ul>
            <li>Termos</li>
            <li>Equipe</li>
            <li>Envio</li>
            <li>Devoluções</li>
        </ul>
        <ul class="icons">
            <li><span class="mdi mdi-cart"></span></li>
            <li><span class="mdi mdi-heart"></span></li>
            <li><span class="mdi mdi-account"></span></li>
        </ul>
        </nav>
    </header>
    <main>
        <section class="hero">
            <div class="hero-content">
                <h2>Noc Ognia</h2>
                <p>
                    Noc ognia é um romance de Erich-Emmanuel Schmitt, que narra a história de um homem que vive
                    em um mundo onde as pessoas não podem mais sonhar. O livro é uma reflexão sobre a
                    importância dos sonhos e da imaginação na vida humana. Erich-Emmanuel Schmitt é um autor
                    francês conhecido por suas obras que exploram temas filosóficos e existenciais. Ele é um dos
                    autores mais traduzidos da França e suas obras têm sido amplamente elogiadas pela crítica.
                </p>
                <button>Acessar página do livro</button>
            </div>
            <div class="hero-image">
                <img src="/imgs/hero.png" alt="Hero Image" />
            </div>
        </section>
    </main>
</template>

<style scoped>

header nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2vh 8vw;
    border-bottom: 2px solid #27ae6099;

    & h1 {
        font-size: 1.3rem;
        color: #000;

        & a {
            text-decoration: none;
            color: #000;
            display: flex;
            align-items: center;
        }

        & .logo-title {
            border-left: 1px solid #27ae6099;
            font-size: 0.8rem;
            margin-left: 10px;
            padding-left: 10px;
            color: #27ae6099;
            width: 100px;
            line-height: 1rem;
        }
    }

    & input {
        width: 400px;
        height: 40px;
        border-radius: 5px;
        font-size: 1rem;
        border: 0;
        background-color: #f1f1f1;
        padding: 5px;
    }

    & ul {
        display: flex;
    }

    & ul li {
        list-style: none;
        margin: 0 10px;
        font-size: 1rem;
    }

    & .icons li {
        color: #27ae60;
        font-size: 1.3rem;
    }

    & .search-wrapper {
        position: relative;
    }

    & .search-wrapper::before {
        content: '󰍉'; /* Code glyph para mdi-magnify */
        font-family: 'Material Design Icons';
        font-size: 1.2rem;
        position: absolute;
        right: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
    }

    & .search {
        padding-right: 2rem;
    }
}

.hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5vh 9vw;
    border-bottom: 2px solid #27ae6099;

    & h2 {
        color: #382c2c;
        font-size: 3rem;
        font-weight: 700;
    }

    & .hero-content {
        width: 50%;
        padding-right: 20px;
        font-weight: 400;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;

        & h3.outlined {
            background-color: transparent;
            color: #27ae60;
            border: 2px solid #27ae60;
            padding: 15px 20px;
            border-radius: 5px;
            font-size: 1rem;
        }

        & button {
            margin-top: 20px;
        }

        p {
            width: 70%;
        }
    }

    & .hero-image {
        width: 50%;
        text-align: right;
        padding-right: 4vw;

        & img {
            max-width: 100%;
            height: auto;
        }
    }
}

button {
    background-color: #27ae60;
    color: #fff;
    border: none;
    padding: 15px 20px;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
    gap: 20px;
    display: flex;
    justify-content: center;

    &.outlined {
        background-color: transparent;
        color: #27ae60;
        border: 2px solid #27ae60;
    }

    &.plain {
        background-color: transparent;
        color: black;
        border: none;
        cursor: pointer;
    }
}

</style>

Ne sequência, vamos implementar a seção Featured, que é uma seção que exibe informações sobre os livros mais vendidos, livros recomendados e frete grátis para SC. Essa seção será exibida logo abaixo da seção Hero.

Vamos ainda editar o arquivo src/App.vue e adicionar o seguinte código no bloco <template>, logo abaixo da seção Hero:

./src/App.vue
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
    <section class="featured">
        <div>
            <span class="mdi mdi-truck"></span>
            <h2>Frete grátis para SC</h2>
        </div>
        <div>
            <span class="mdi mdi-star"></span>
            <h2>Livros recomendados</h2>
        </div>
        <div>
            <span class="mdi mdi-book-open-page-variant"></span>
            <h2>Mais vendidos</h2>
        </div>
    </section>
</main>

Note que é um código simples, que apenas exibe três informações. A seção é composta por três divs, cada uma contendo um ícone e um título. Os ícones são representados por classes do Material Design Icons.

Para estilizar a seção Featured, adicione o seguinte código no arquivo src/App.vue, no bloco <style>(1):

  1. Sugiro que você adicione o código CSS logo após a definição das informações da seção Hero, para facilitar a leitura do código.
./src/App.vue
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
.featured {
  display: flex;
  padding: 3vh 8vw;
  border-bottom: 2px solid #27ae6099;

  & div {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: center;
    gap: 10px;

    & span {
      font-size: 2rem;
    }

    & h2 {
      font-size: 1.2rem;
      font-weight: 700;
    }
  }

  & article:nth-child(2) {
    border-left: 1px solid #27ae6099;
    border-right: 1px solid #27ae6099;
  }
}

No código acima, a seção Featured é estilizada para exibir três informações em uma linha. Cada informação é composta por um ícone e um título. A seção é dividida em três partes, cada uma ocupando um espaço igual na tela. A seção também possui uma borda inferior para separá-la da seção Hero.

No bloco abaixo está versão completa desenvolvida até aqui. Você pode comparar com o código que você desenvolveu até agora e verificar se está tudo certo.

👁👁 Versão completa
./src/App.vue
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
<script setup>
</script>

<template>
    <header>
        <nav>
        <h1>
            <a href="#">
            IFbooks
            <span class="logo-title"> Apreço a livros </span>
            </a>
        </h1>
        <div class="search-wrapper">
            <input type="text" class="search" placeholder="Buscar..." />
        </div>
        <ul>
            <li>Termos</li>
            <li>Equipe</li>
            <li>Envio</li>
            <li>Devoluções</li>
        </ul>
        <ul class="icons">
            <li><span class="mdi mdi-cart"></span></li>
            <li><span class="mdi mdi-heart"></span></li>
            <li><span class="mdi mdi-account"></span></li>
        </ul>
        </nav>
    </header>
    <main>
        <section class="hero">
            <div class="hero-content">
                <h3 class="outlined">Livro destaque</h3>
                <h2>Noc Ognia</h2>
                <p>
                    Noc ognia é um romance de Erich-Emmanuel Schmitt, que narra a história de um homem que
                    vive em um mundo onde as pessoas não podem mais sonhar. O livro é uma reflexão sobre a
                    importância dos sonhos e da imaginação na vida humana. Erich-Emmanuel Schmitt é um autor
                    francês conhecido por suas obras que exploram temas filosóficos e existenciais. Ele é um
                    dos autores mais traduzidos da França e suas obras têm sido amplamente elogiadas pela
                    crítica.
                </p>
                <button>Acessar página do livro</button>
            </div>
            <div class="hero-image">
                <img src="/hero.png" alt="Hero Image" />
            </div>
        </section>
        <section class="featured">
            <div>
                <span class="mdi mdi-truck"></span>
                <h2>Frete grátis para SC</h2>
            </div>
            <div>
                <span class="mdi mdi-star"></span>
                <h2>Livros recomendados</h2>
            </div>
            <div>
                <span class="mdi mdi-book-open-page-variant"></span>
                <h2>Mais vendidos</h2>
            </div>
        </section>
    </main>
</template>

<style scoped>
header nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2vh 8vw;
    border-bottom: 2px solid #27ae6099;

    & h1 {
        font-size: 1.3rem;
        color: #000;

        & a {
            text-decoration: none;
            color: #000;
            display: flex;
            align-items: center;
        }

        & .logo-title {
            border-left: 1px solid #27ae6099;
            font-size: 0.8rem;
            margin-left: 10px;
            padding-left: 10px;
            color: #27ae6099;
            width: 100px;
            line-height: 1rem;
        }
    }

    & input {
        width: 400px;
        height: 40px;
        border-radius: 5px;
        font-size: 1rem;
        border: 0;
        background-color: #f1f1f1;
        padding: 5px;
    }

    & ul {
        display: flex;
    }

    & ul li {
        list-style: none;
        margin: 0 10px;
        font-size: 1rem;
    }

    & .icons li {
        color: #27ae60;
        font-size: 1.3rem;
    }

    & .search-wrapper {
        position: relative;
    }

    & .search-wrapper::before {
        content: '󰍉'; /* Code glyph para mdi-magnify */
        font-family: 'Material Design Icons';
        font-size: 1.2rem;
        position: absolute;
        right: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
    }

    & .search {
        padding-right: 2rem;
    }
}

.hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5vh 9vw;
    border-bottom: 2px solid #27ae6099;

    & h2 {
        color: #382c2c;
        font-size: 3rem;
        font-weight: 700;
    }

    & .hero-content {
        width: 50%;
        padding-right: 20px;
        font-weight: 400;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;

        & h3.outlined {
            background-color: transparent;
            color: #27ae60;
            border: 2px solid #27ae60;
            padding: 15px 20px;
            border-radius: 5px;
            font-size: 1rem;
        }

        & button {
            margin-top: 20px;
        }

        p {
            width: 70%;
        }
    }

    & .hero-image {
        width: 50%;
        text-align: right;
        padding-right: 4vw;

        & img {
            max-width: 100%;
            height: auto;
        }
    }
}

.featured {
    display: flex;
    padding: 3vh 8vw;
    border-bottom: 2px solid #27ae6099;

    & div {
        display: flex;
        align-items: center;
        flex: 1;
        justify-content: center;
        gap: 10px;

        & span {
            font-size: 2rem;
        }

        & h2 {
            font-size: 1.2rem;
            font-weight: 700;
        }
    }

    & article:nth-child(2) {
        border-left: 1px solid #27ae6099;
        border-right: 1px solid #27ae6099;
    }
}

button {
    background-color: #27ae60;
    color: #fff;
    border: none;
    padding: 15px 20px;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
    gap: 20px;
    display: flex;
    justify-content: center;

    &.outlined {
        background-color: transparent;
        color: #27ae60;
        border: 2px solid #27ae60;
    }

    &.plain {
        background-color: transparent;
        color: black;
        border: none;
        cursor: pointer;
    }
}
</style>

A listagem de livros

Vamos agora fazer uma parte central do nosso projeto, que é a listagem de livros. Como queremos mostrar vários livros, vamoos iniciar criando um array com os livros que queremos exibir. Para isso, vamos criar um array de objetos, onde cada objeto representa um livro. Cada livro terá as seguintes propriedades:

  • id: um número inteiro que representa o ID do livro.
  • title: uma string que representa o título do livro.
  • cover: uma string que representa o caminho da imagem de capa do livro.
  • price: um número que representa o preço do livro.
  • author: uma string que representa o autor do livro.

Para dar início a essa parte, vamos editar o arquivo src/App.vue e adicionar o seguinte código no bloco <script setup>:

./src/App.vue
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<script setup>
const books = [
  {
    id: 1,
    title: 'Comigo na livraria',
    cover: '/covers/comigo-na-livraria.png',
    price: 23.24,
    author: 'Martha Medeiros',
  },
  {
    id: 2,
    title: 'Quincas Borba',
    cover: '/covers/quincas-borba.png',
    price: 23.24,
    author: 'Machado de Assis',
  },
  {
    id: 3,
    title: 'A livraria',
    cover: '/covers/a-livraria.png',
    price: 13.94,
    author: 'Penelope Fitzgerald',
  },
  {
    id: 4,
    title: 'A hora da estrela',
    cover: '/covers/a-hora-da-estrela.png',
    price: 16.84,
    author: 'Clarice Lispector',
  },
  {
    id: 5,
    title: 'O alienista',
    cover: '/covers/o-alienista.png',
    price: 266.92,
    author: 'Machado de Assis',
  },
  {
    id: 6,
    title: 'Mar morto',
    cover: '/covers/mar-morto.png',
    price: 13.95,
    author: 'Jorge Amado',
  },
  {
    id: 7,
    title: 'Grande sertão',
    cover: '/covers/grande-sertao-veredas.png',
    price: 26.04,
    author: 'Guimarães Rosa',
  },
  {
    id: 8,
    title: 'Flor de poemas',
    cover: '/covers/flor-de-poema.png',
    price: 15.81,
    author: 'Cecília Meireles',
  },
];
</script>

No futuro, nós podemos substituir esse array por uma chamada a uma API, ou mesmo deixar essa informação estática em um arquivo JSON. Mas, por enquanto, vamos deixar assim.

Agora, vamos exibir esses livros na tela. Para isso, vamos criar um loop v-for no bloco <template> do arquivo src/App.vue. O loop v-for é usado para iterar sobre os itens de um array e renderizar um elemento para cada item. Vamos adicionar o seguinte código no bloco <template>, logo abaixo da seção Featured:

./src/App.vue
120
121
122
123
124
125
126
127
128
129
130
131
<section class="books">
  <article class="book" v-for="book in books" :key="book.id">
    <img :src="book.cover" :alt="book.title" />
    <h2>{{ book.title }}</h2>
    <p class="book-author">{{ book.author }}</p>
    <span class="price-and-like">
      <p class="book-price">R$ {{ book.price.toFixed(2) }}</p>
      <span class="mdi mdi-heart-outline"></span>
    </span>
    <button><span class="mdi mdi-cart"></span>Comprar</button>
  </article>
</section>

Note que criamos uma seção com a classe books, que contém um loop v-for que itera sobre o array books, dentro de uma tag article. Dessa forma, para cada livro, criamos um elemento <article> com a classe book, que contém a imagem de capa do livro, o título, o autor, o preço e um botão de compra. O botão de compra contém um ícone de carrinho. Também aqui, para cada elemento, foram utilizadas classes específicas para depois serem estilizadas no CSS.

Ainda, temos alguns recurso de renderização interessantes utilizados:

  • O :src e :alt são usados para definir o caminho da imagem e o texto alternativo da imagem, respectivamente. O : indica que estamos usando uma expressão Vue, a diretiva v-bind, para definir o valor.
  • O {{ book.title }} e {{ book.author }} são usados para exibir o título e o autor do livro, respectivamente. O {{ }} indica que estamos usando uma expressão Vue para interpolar o valor.
  • Para mostrar o preço do livro, usamos {{ book.price.toFixed(2) }}, que formata o preço para duas casas decimais. Note que o toFixed(2) é um método do JavaScript que formata um número para ter um número fixo de casas decimais.

Por, perceba que ainda não implementamos a funcionalidade do botão de compra. Isso será feito em um próximo passo.

Agora, vamos estilizar a seção de livros. Para isso, adicione o seguinte código no arquivo src/App.vue, no bloco <style>, logo após a definição da seção Featured:

./src/assets/main.css
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
.books {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  padding: 5vh 8vw;

  & .book {
    display: flex;
    flex-direction: column;
    min-width: 300px;
    width: calc(100% / 4 - 42px);
    margin: 20px;

    & h2 {
      font-size: 1.5rem;
      font-weight: 700;
    }

    & .book-author {
      font-size: 1rem;
    }

    & .book-price {
      font-size: 1.2rem;
      font-weight: 700;
    }

    & .price-and-like {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;

      & .mdi-heart-outline {
        font-size: 1.3rem;
        color: #27ae60;
      }
    }
  }
}

O código acima estiliza a seção de livros. A seção é exibida como uma grade, com cada livro ocupando uma coluna. O número de colunas é ajustado automaticamente com base no tamanho da tela, usando a propriedade grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)). Isso significa que cada coluna terá um tamanho mínimo de 300 pixels e ocupará o restante do espaço disponível. A seção também possui um espaçamento de 20 pixels entre os livros.

Outra coisa interessante é que, para cada livro, o título e o autor são estilizados com tamanhos de fonte diferentes. O preço do livro é exibido em negrito e com um tamanho de fonte maior. O ícone de coração é estilizado com uma cor em tom verde.

O quadro abaixo mostra o resultado final do código que implementamos até agora.

👁👁 Versão completa
./src/App.vue
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
<script setup>
    const books = [
        {
            id: 1,
            title: 'Comigo na livraria',
            cover: '/covers/comigo-na-livraria.png',
            price: 23.24,
            author: 'Martha Medeiros',
        },
        {
            id: 2,
            title: 'Quincas Borba',
            cover: '/covers/quincas-borba.png',
            price: 23.24,
            author: 'Machado de Assis',
        },
        {
            id: 3,
            title: 'A livraria',
            cover: '/covers/a-livraria.png',
            price: 13.94,
            author: 'Penelope Fitzgerald',
        },
        {
            id: 4,
            title: 'A hora da estrela',
            cover: '/covers/a-hora-da-estrela.png',
            price: 16.84,
            author: 'Clarice Lispector',
        },
        {
            id: 5,
            title: 'O alienista',
            cover: '/covers/o-alienista.png',
            price: 266.92,
            author: 'Machado de Assis',
        },
        {
            id: 6,
            title: 'Mar morto',
            cover: '/covers/mar-morto.png',
            price: 13.95,
            author: 'Jorge Amado',
        },
        {
            id: 7,
            title: 'Grande sertão',
            cover: '/covers/grande-sertao-veredas.png',
            price: 26.04,
            author: 'Guimarães Rosa',
        },
        {
            id: 8,
            title: 'Flor de poemas',
            cover: '/covers/flor-de-poema.png',
            price: 15.81,
            author: 'Cecília Meireles',
        }
    ]
</script>

<template>
    <header>
        <nav>
            <h1>
                <a href="#">
                    IFbooks
                    <span class="logo-title"> Apreço a livros </span>
                </a>
            </h1>
            <div class="search-wrapper">
                <input type="text" class="search" placeholder="Buscar..." />
            </div>
            <ul>
                <li>Termos</li>
                <li>Equipe</li>
                <li>Envio</li>
                <li>Devoluções</li>
            </ul>
            <ul class="icons">
                <li><span class="mdi mdi-cart"></span></li>
                <li><span class="mdi mdi-heart"></span></li>
                <li><span class="mdi mdi-account"></span></li>
            </ul>
        </nav>
    </header>
    <main>
        <section class="hero">
            <div class="hero-content">
                <h3 class="outlined">Livro destaque</h3>
                <h2>Noc Ognia</h2>
                <p>
                    Noc ognia é um romance de Erich-Emmanuel Schmitt, que narra a história de um homem que
                    vive em um mundo onde as pessoas não podem mais sonhar. O livro é uma reflexão sobre a
                    importância dos sonhos e da imaginação na vida humana. Erich-Emmanuel Schmitt é um autor
                    francês conhecido por suas obras que exploram temas filosóficos e existenciais. Ele é um
                    dos autores mais traduzidos da França e suas obras têm sido amplamente elogiadas pela
                    crítica.
                </p>
                <button>Acessar página do livro</button>
            </div>
            <div class="hero-image">
                <img src="/hero.png" alt="Hero Image" />
            </div>
        </section>
        <section class="featured">
            <div>
                <span class="mdi mdi-truck"></span>
                <h2>Frete grátis para SC</h2>
            </div>
            <div>
                <span class="mdi mdi-star"></span>
                <h2>Livros recomendados</h2>
            </div>
            <div>
                <span class="mdi mdi-book-open-page-variant"></span>
                <h2>Mais vendidos</h2>
            </div>
        </section>
        <section class="books">
            <article class="book" v-for="book in books" :key="book.id">
                <img :src="book.cover" :alt="book.title" />
                <h2>{{ book.title }}</h2>
                <p class="book-author">{{ book.author }}</p>
                <span class="price-and-like">
                    <p class="book-price">R$ {{ book.price.toFixed(2) }}</p>
                    <span class="mdi mdi-heart-outline"></span>
                </span>
                <button><span class="mdi mdi-cart"></span>Comprar</button>
            </article>
        </section>
    </main>
</template>

<style scoped>
header nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2vh 8vw;
    border-bottom: 2px solid #27ae6099;

    & h1 {
        font-size: 1.3rem;
        color: #000;

        & a {
            text-decoration: none;
            color: #000;
            display: flex;
            align-items: center;
        }

        & .logo-title {
            border-left: 1px solid #27ae6099;
            font-size: 0.8rem;
            margin-left: 10px;
            padding-left: 10px;
            color: #27ae6099;
            width: 100px;
            line-height: 1rem;
        }
    }

    & input {
        width: 400px;
        height: 40px;
        border-radius: 5px;
        font-size: 1rem;
        border: 0;
        background-color: #f1f1f1;
        padding: 5px;
    }

    & ul {
        display: flex;
    }

    & ul li {
        list-style: none;
        margin: 0 10px;
        font-size: 1rem;
    }

    & .icons li {
        color: #27ae60;
        font-size: 1.3rem;
    }

    & .search-wrapper {
        position: relative;
    }

    & .search-wrapper::before {
        content: '󰍉'; /* Code glyph para mdi-magnify */
        font-family: 'Material Design Icons';
        font-size: 1.2rem;
        position: absolute;
        right: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
    }

    & .search {
        padding-right: 2rem;
    }
}

.hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5vh 9vw;
    border-bottom: 2px solid #27ae6099;

    & h2 {
        color: #382c2c;
        font-size: 3rem;
        font-weight: 700;
    }

    & .hero-content {
        width: 50%;
        padding-right: 20px;
        font-weight: 400;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;

        & h3.outlined {
            background-color: transparent;
            color: #27ae60;
            border: 2px solid #27ae60;
            padding: 15px 20px;
            border-radius: 5px;
            font-size: 1rem;
        }

        & button {
            margin-top: 20px;
        }

        p {
         width: 70%;
        }
    }

    & .hero-image {
        width: 50%;
        text-align: right;
        padding-right: 4vw;

        & img {
            max-width: 100%;
            height: auto;
        }
    }
}

.featured {
    display: flex;
    padding: 3vh 8vw;
    border-bottom: 2px solid #27ae6099;

    & div {
        display: flex;
        align-items: center;
        flex: 1;
        justify-content: center;
        gap: 10px;

        & span {
            ont-size: 2rem;
        }

        & h2 {
            font-size: 1.2rem;
            font-weight: 700;
        }
    }

    & article:nth-child(2) {
        border-left: 1px solid #27ae6099;
        border-right: 1px solid #27ae6099;
    }
}

.books {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    padding: 5vh 8vw;

    & .book {
        display: flex;
        flex-direction: column;
        min-width: 300px;
        width: calc(100% / 4 - 42px);
        margin: 20px;

        & h2 {
            font-size: 1.5rem;
            font-weight: 700;
        }

        & .book-author {
            font-size: 1rem;
        }

        & .book-price {
            font-size: 1.2rem;
            font-weight: 700;
        }

        & .price-and-like {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;

            & .mdi-heart-outline {
                font-size: 1.3rem;
                color: #27ae60;
            }
        }
    }
}

button {
    background-color: #27ae60;
    color: #fff;
    border: none;
    padding: 15px 20px;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
    gap: 20px;
    display: flex;
    justify-content: center;

    &.outlined {
        background-color: transparent;
        color: #27ae60;
        border: 2px solid #27ae60;
    }

    &.plain {
        background-color: transparent;
        color: black;
        border: none;
        cursor: pointer;
    }
}
</style>

Por fim, a seção de rodapé (footer) é a última parte do layout. Ela contém informações de contato e links para redes sociais. Ela é estilizada para ter um fundo verde e texto branco, com uma borda inferior para separá-la do restante da página. Inicialmente, vamos fazer a estrutura do rodapé, e depois vamos estilizar. Para isso, edite o arquivo src/App.vue e adicione o seguinte código no final do arquivo, antes da tag de fechamento </template>, logo após o fechamento da tag <main>:

./src/App.vue
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<footer>
  <nav>
    <section class="upper-footer">
      <div>
        <p class="footer-title">
          <a href="#"> IFbooks </a>
        </p>
        <ul>
          <li><span class="mdi mdi-facebook" /></li>
          <li><span class="mdi mdi-instagram" /></li>
          <li><span class="mdi mdi-twitter" /></li>
        </ul>
      </div>
      <div>
        <p class="contact-text">Contato</p>
        <p><span class="mdi mdi-phone" /> +55 47 99999-9999</p>
        <p><span class="mdi mdi-clock" /> 8h às 23h - Seg a Sex</p>
        <p><span class="mdi mdi-email" /> contato@ifbooks.com.br</p>
        <div class="payment-methods">
          <span class="mdi mdi-visa" />
        </div>
      </div>
    </section>
    <section class="lower-footer">
      <p>&copy; Alguns direitos reservados. IFBooks. 2025</p>
    </section>
  </nav>
</footer>

Agora, vamos estilizar o rodapé. Para isso, adicione o seguinte código no bloco <style> do arquivo src/App.vue:

./src/App.vue
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
footer {
  background-color: #27ae60;
  padding: 2vh 8vw;
  color: #fff;

  .upper-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 100px;
    border-bottom: 2px solid #fff;

    & div {
      display: flex;
      flex-direction: column;
      gap: 10px;

      & .footer-title {
        font-size: 1.2rem;
        font-weight: 700;

        & a {
          text-decoration: none;
          color: #fff;
        }
      }

      & .contact-text {
        font-size: 1.1rem;
        font-weight: 700;
      }
    }
  }

  .lower-footer {
    display: flex;
    justify-content: center;
    padding-top: 20px;
    font-size: 0.8rem;
  }

  ul {
    display: flex;
    padding: 0;
    gap: 20px;

    li {
      list-style: none;
      font-size: 1.2rem;
      color: #fff;
    }
  }
}

O quadro abaixo mostra o resultado final do código que implementamos até agora.

👁👁 Versão completa
./src/App.vue
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
<script setup>
    const books = [
        {
            id: 1,
            title: 'Comigo na livraria',
            cover: '/covers/comigo-na-livraria.png',
            price: 23.24,
            author: 'Martha Medeiros',
        },
        {
            id: 2,
            title: 'Quincas Borba',
            cover: '/covers/quincas-borba.png',
            price: 23.24,
            author: 'Machado de Assis',
        },
        {
            id: 3,
            title: 'A livraria',
            cover: '/covers/a-livraria.png',
            price: 13.94,
            author: 'Penelope Fitzgerald',
        },
        {
            id: 4,
            title: 'A hora da estrela',
            cover: '/covers/a-hora-da-estrela.png',
            price: 16.84,
            author: 'Clarice Lispector',
        },
        {
            id: 5,
            title: 'O alienista',
            cover: '/covers/o-alienista.png',
            price: 266.92,
            author: 'Machado de Assis',
        },
        {
            id: 6,
            title: 'Mar morto',
            cover: '/covers/mar-morto.png',
            price: 13.95,
            author: 'Jorge Amado',
        },
        {
            id: 7,
            title: 'Grande sertão',
            cover: '/covers/grande-sertao-veredas.png',
            price: 26.04,
            author: 'Guimarães Rosa',
        },
        {
            id: 8,
            title: 'Flor de poemas',
            cover: '/covers/flor-de-poema.png',
            price: 15.81,
            author: 'Cecília Meireles',
        }
    ]
</script>

<template>
    <header>
        <nav>
            <h1>
                <a href="#">
                    IFbooks
                    <span class="logo-title"> Apreço a livros </span>
                </a>
            </h1>
            <div class="search-wrapper">
                <input type="text" class="search" placeholder="Buscar..." />
            </div>
            <ul>
                <li>Termos</li>
                <li>Equipe</li>
                <li>Envio</li>
                <li>Devoluções</li>
            </ul>
            <ul class="icons">
                <li><span class="mdi mdi-cart"></span></li>
                <li><span class="mdi mdi-heart"></span></li>
                <li><span class="mdi mdi-account"></span></li>
            </ul>
        </nav>
    </header>
    <main>
        <section class="hero">
            <div class="hero-content">
                <h3 class="outlined">Livro destaque</h3>
                <h2>Noc Ognia</h2>
                <p>
                    Noc ognia é um romance de Erich-Emmanuel Schmitt, que narra a história de um homem que
                    vive em um mundo onde as pessoas não podem mais sonhar. O livro é uma reflexão sobre a
                    importância dos sonhos e da imaginação na vida humana. Erich-Emmanuel Schmitt é um autor
                    francês conhecido por suas obras que exploram temas filosóficos e existenciais. Ele é um
                    dos autores mais traduzidos da França e suas obras têm sido amplamente elogiadas pela
                    crítica.
                </p>
                <button>Acessar página do livro</button>
            </div>
            <div class="hero-image">
                <img src="/hero.png" alt="Hero Image" />
            </div>
        </section>
        <section class="featured">
            <div>
                <span class="mdi mdi-truck"></span>
                <h2>Frete grátis para SC</h2>
            </div>
            <div>
                <span class="mdi mdi-star"></span>
                <h2>Livros recomendados</h2>
            </div>
            <div>
                <span class="mdi mdi-book-open-page-variant"></span>
                <h2>Mais vendidos</h2>
            </div>
        </section>
        <section class="books">
            <article class="book" v-for="book in books" :key="book.id">
                <img :src="book.cover" :alt="book.title" />
                <h2>{{ book.title }}</h2>
                <p class="book-author">{{ book.author }}</p>
                <span class="price-and-like">
                    <p class="book-price">R$ {{ book.price.toFixed(2) }}</p>
                    <span class="mdi mdi-heart-outline"></span>
                </span>
                <button><span class="mdi mdi-cart"></span>Comprar</button>
            </article>
        </section>
    </main>
    <footer>
        <nav>
            <section class="upper-footer">
                <div>
                    <p class="footer-title">
                        <a href="#"> IFbooks </a>
                    </p>
                    <ul>
                        <li><span class="mdi mdi-facebook" /></li>
                        <li><span class="mdi mdi-instagram" /></li>
                        <li><span class="mdi mdi-twitter" /></li>
                    </ul>
                </div>
                <div>
                    <p class="contact-text">Contato</p>
                    <p><span class="mdi mdi-phone" /> +55 47 99999-9999</p>
                    <p><span class="mdi mdi-clock" /> 8h às 23h - Seg a Sex</p>
                    <p><span class="mdi mdi-email" /> contato@ifbooks.com.br</p>
                    <div class="payment-methods">
                        <span class="mdi mdi-visa" />
                    </div>
                </div>
            </section>
            <section class="lower-footer">
                <p>&copy; Alguns direitos reservados. IFBooks. 2025</p>
            </section>
        </nav>
    </footer>
</template>

<style scoped>
header nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2vh 8vw;
    border-bottom: 2px solid #27ae6099;

    & h1 {
        font-size: 1.3rem;
        color: #000;

        & a {
            text-decoration: none;
            color: #000;
            display: flex;
            align-items: center;
        }

        & .logo-title {
            border-left: 1px solid #27ae6099;
            font-size: 0.8rem;
            margin-left: 10px;
            padding-left: 10px;
            color: #27ae6099;
            width: 100px;
            line-height: 1rem;
        }
    }

    & input {
        width: 400px;
        height: 40px;
        border-radius: 5px;
        font-size: 1rem;
        border: 0;
        background-color: #f1f1f1;
        padding: 5px;
    }

    & ul {
        display: flex;
    }

    & ul li {
        list-style: none;
        margin: 0 10px;
        font-size: 1rem;
    }

    & .icons li {
        color: #27ae60;
        font-size: 1.3rem;
    }

    & .search-wrapper {
        position: relative;
    }

    & .search-wrapper::before {
        content: '󰍉'; /* Code glyph para mdi-magnify */
        font-family: 'Material Design Icons';
        font-size: 1.2rem;
        position: absolute;
        right: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
    }

    & .search {
        padding-right: 2rem;
    }
}

.hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5vh 9vw;
    border-bottom: 2px solid #27ae6099;

    & h2 {
        color: #382c2c;
        font-size: 3rem;
        font-weight: 700;
    }

    & .hero-content {
        width: 50%;
        padding-right: 20px;
        font-weight: 400;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;

        & h3.outlined {
            background-color: transparent;
            color: #27ae60;
            border: 2px solid #27ae60;
            padding: 15px 20px;
            border-radius: 5px;
            font-size: 1rem;
        }

        & button {
            margin-top: 20px;
        }

        p {
         width: 70%;
        }
    }

    & .hero-image {
        width: 50%;
        text-align: right;
        padding-right: 4vw;

        & img {
            max-width: 100%;
            height: auto;
        }
    }
}

.featured {
    display: flex;
    padding: 3vh 8vw;
    border-bottom: 2px solid #27ae6099;

    & div {
        display: flex;
        align-items: center;
        flex: 1;
        justify-content: center;
        gap: 10px;

        & span {
            ont-size: 2rem;
        }

        & h2 {
            font-size: 1.2rem;
            font-weight: 700;
        }
    }

    & article:nth-child(2) {
        border-left: 1px solid #27ae6099;
        border-right: 1px solid #27ae6099;
    }
}

.books {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    padding: 5vh 8vw;

    & .book {
        display: flex;
        flex-direction: column;
        min-width: 300px;
        width: calc(100% / 4 - 42px);
        margin: 20px;

        & h2 {
            font-size: 1.5rem;
            font-weight: 700;
        }

        & .book-author {
            font-size: 1rem;
        }

        & .book-price {
            font-size: 1.2rem;
            font-weight: 700;
        }

        & .price-and-like {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;

            & .mdi-heart-outline {
                font-size: 1.3rem;
                color: #27ae60;
            }
        }
    }
}

footer {
    background-color: #27ae60;
    padding: 2vh 8vw;
    color: #fff;

    .upper-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 100px;
        border-bottom: 2px solid #fff;

        & div {
            display: flex;
            flex-direction: column;
            gap: 10px;

            & .footer-title {
                font-size: 1.2rem;
                font-weight: 700;

                & a {
                    text-decoration: none;
                    color: #fff;
                }
            }

            & .contact-text {
                font-size: 1.1rem;
                font-weight: 700;
            }
        }
    }

    .lower-footer {
        display: flex;
        justify-content: center;
        padding-top: 20px;
        font-size: 0.8rem;
    }

    ul {
        display: flex;
        padding: 0;
        gap: 20px;

        li {
            list-style: none;
            font-size: 1.2rem;
            color: #fff;
        }
    }
}

button {
    background-color: #27ae60;
    color: #fff;
    border: none;
    padding: 15px 20px;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
    gap: 20px;
    display: flex;
    justify-content: center;

    &.outlined {
        background-color: transparent;
        color: #27ae60;
        border: 2px solid #27ae60;
    }

    &.plain {
        background-color: transparent;
        color: black;
        border: none;
        cursor: pointer;
    }
}
</style>

Mostrando o carrinho

Agora vamos para uma parte que requer um pouco mais de atenção. Vamos implementar a seção do carrinho, que é uma parte importante da aplicação. Nós não queremos que o carrinho seja exibido o tempo todo, mas sim quando o usuário clicar no ícone do carrinho. Para isso, vamos usar um estado reativo para controlar a exibição do carrinho.

Primeiramente, vamos editar a seção <script> do arquivo src/App.vue para criar a variável reativa que vai controlar a exibição do carrinho, e também uma variável que vai armazenar os livros que estão no carrinho. Para isso, adicione o seguinte código no bloco <script>:

./src/App.vue
2
3
4
5
6
7
import { ref } from 'vue';
const showCart = ref(false);
const cart = ref({
  items: [],
  total: 0,
});

Note que o código acima cria duas variáveis reativas: showCart e cart. A variável showCart é um booleano que controla a exibição do carrinho, enquanto a variável cart é um objeto que armazena os itens do carrinho e o total da compra. Depois faremos a lógica para adicionar os livros ao carrinho e calcular o total da compra.

Agora, vamos adicionar a lógica para abrir e fechar o carrinho. Para isso, e altere o seguinte código no bloco <template>:

./src/App.vue
87
88
89
90
91
<ul class="icons">
  <li @click="showCart = !showCart"><span class="mdi mdi-cart"></span></li>
  <li><span class="mdi mdi-heart"></span></li>
  <li><span class="mdi mdi-account"></span></li>
</ul>

Note que adicionamos um evento @click no ícone do carrinho, que altera o valor da variável showCart. Quando o usuário clicar no ícone do carrinho, a variável showCart será alterada para true, e o carrinho será exibido. Quando o usuário clicar novamente no ícone do carrinho, a variável showCart será alterada para false, e o carrinho será ocultado.

Agora, vamos adicionar o código do carrinho. Para isso, adicione o seguinte código no bloco <template>, substituindo a abertura da tag <main>, logo após o fechamento da tag <header>:

./src/App.vue
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<main v-if="showCart">
  <section class="cart">
    <h2>Carrinho</h2>
    <table>
      <thead>
        <tr>
          <th>Título</th>
          <th>Quantidade</th>
          <th>Subtotal</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="book in cart.items" :key="book.id">
          <td class="cart-item">
            <img :src="book.cover" :alt="book.title" />
            <div class="cart-item-info">
              <p class="cart-item-title">{{ book.title }}</p>
              <p class="cart-item-author">{{ book.author }}</p>
              <p class="cart-item-price">R$ {{ book.price.toFixed(2) }}</p>
            </div>
          </td>
          <td>
            <div class="cart-item-quantity">
              <button class="plain">
                <span class="mdi mdi-minus" />
              </button>
              {{ book.quantity }}
              <button class="plain">
                <span class="mdi mdi-plus" />
              </button>
            </div>
          </td>
          <td class="cart-item-subtotal">
            R$ {{ book.price * book.quantity }}
          </td>
        </tr>
      </tbody>
    </table>
    <button @click="showCart = false" class="outlined">Voltar para loja</button>
    <div class="cart-summary">
      <div class="cupom">
        <input type="text" placeholder="Código do cupom" />
        <button>Inserir cupom</button>
      </div>
      <div class="summary">
        <h2>Total da Compra</h2>
        <div class="summary-items">
          <span>Produtos</span> <span>R$ {{ cart.total.toFixed(2) }}</span>
          <span>Frete</span> <span> Grátis</span> <span>Total</span>
          <span>R$ {{ cart.total.toFixed(2) }}</span>
        </div>
        <button>Ir para pagamento</button>
      </div>
    </div>
  </section>
</main>
<main v-else>

Note que já na abertura da tag <main> (linha 93) foi adicionada uma diretiva v-if que verifica se a variável showCart é verdadeira. Se for, o carrinho será exibido. Caso contrário, o carrinho não será exibido, e será exibida a tag <main> que já existia antes (linhas 149 em diante). Isso garante que o carrinho só será exibido quando o usuário clicar no ícone do carrinho.

Dentro a nova tag <main>, foi adicionado o código do carrinho. O carrinho é exibido como uma tabela, onde cada linha representa um livro no carrinho. A tabela possui três colunas: título, quantidade e subtotal. A coluna de título exibe a imagem do livro, o título, o autor e o preço. A coluna de quantidade exibe a quantidade do livro no carrinho e dois botões para aumentar ou diminuir a quantidade. A coluna de subtotal exibe o subtotal do livro (preço * quantidade). No final da tabela, há um botão para voltar para a loja e um resumo da compra com o total.

O botão adicionado para voltar para a loja tem um evento @click que altera o valor da variável showCart para false, ocultando o carrinho. O resumo da compra exibe o total da compra, que ainda não foi implementado, mas será feito na próxima seção. Por fim, alguns elementos como a aplicação do cupom e o botão para ir para o pagamento foram adicionados, mas ainda não possuem funcionalidade.

Agora, vamos adicionar o CSS para estilizar o carrinho. Para isso, adicione o seguinte código no bloco <style> do arquivo src/App.vue:

./src/App.vue
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
.cart {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 5vh 8vw;
  border-bottom: 2px solid #27ae6099;

  & h2 {
    font-size: 2rem;
    font-weight: 700;
    color: #27ae60;
  }

  & table {
    width: 100%;
    border-collapse: collapse;
    margin: 40px 0;

    & th,
    td {
      padding: 10px;
      text-align: left;
    }

    & th {
      border-bottom: 2px solid #27ae6099;
      font-size: 1.2rem;
      font-weight: 700;
    }

    & td {
      border-bottom: 1px solid rgb(128, 128, 128);
      font-size: 1rem;
    }

    & .cart-item-quantity {
      display: flex;
      align-items: center;
    }

    & .cart-item-subtotal {
      font-size: 1.1rem;
      font-weight: 700;
    }

    & .cart-item {
      display: flex;
      align-items: center;
      gap: 20px;

      & img {
        width: 80px;
        height: auto;
      }

      & .cart-item-info {
        display: flex;
        flex-direction: column;
        gap: 5px;

        & .cart-item-title {
          font-size: 1.2rem;
          font-weight: 700;
        }
        & .cart-item-author {
          font-size: 1rem;
        }
        & .cart-item-price {
          font-size: 1.1rem;
          font-weight: 600;
        }
      }
    }
  }

  & .cart-summary {
    display: flex;
    justify-content: space-between;
    width: 100%;

    & .cupom {
      display: flex;
      align-items: center;
      margin-top: 80px;
      gap: 10px;

      & input {
        width: 350px;
        height: 50px;
        border-radius: 5px;
        font-size: 1rem;
        border: 2px solid rgb(128, 128, 128);
        padding: 5px;
      }
    }

    & .summary {
      border: 1px solid rgb(128, 128, 128);
      padding: 1vw;

      & h2 {
        font-size: 1.2rem;
        font-weight: 700;
        color: black;
      }

      & .summary-items {
        display: grid;
        grid-template-columns: 3fr 1fr;

        & span {
          padding: 10px 0;
          border-bottom: 1px solid rgb(128, 128, 128);
        }
      }

      & button {
        margin-top: 20px;
      }
    }
  }
}

Nesse caso, a estilização do carrinho é feita de forma semelhante à estilização das demais seções do projeto, sendo que a tabela do carrinho é estilizada para ter um layout mais limpo e organizado.

O quadro abaixo contém o código completo do que fizemos até agora, atentando-se às partes destacadas, que correspondem ao que foi adicionado ou alterado.

👁👁 Versão completa
./src/App.vue
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
<script setup>
import { ref } from 'vue'
const showCart = ref(false)
const cart = ref({
    items: [],
    total: 0,
})

const books = [
    {
    id: 1,
    title: 'Comigo na livraria',
    cover: '/covers/comigo-na-livraria.png',
    price: 23.24,
    author: 'Martha Medeiros',
    },
    {
    id: 2,
    title: 'Quincas Borba',
    cover: '/covers/quincas-borba.png',
    price: 23.24,
    author: 'Machado de Assis',
    },
    {
    id: 3,
    title: 'A livraria',
    cover: '/covers/a-livraria.png',
    price: 13.94,
    author: 'Penelope Fitzgerald',
    },
    {
    id: 4,
    title: 'A hora da estrela',
    cover: '/covers/a-hora-da-estrela.png',
    price: 16.84,
    author: 'Clarice Lispector',
    },
    {
    id: 5,
    title: 'O alienista',
    cover: '/covers/o-alienista.png',
    price: 266.92,
    author: 'Machado de Assis',
    },
    {
    id: 6,
    title: 'Mar morto',
    cover: '/covers/mar-morto.png',
    price: 13.95,
    author: 'Jorge Amado',
    },
    {
    id: 7,
    title: 'Grande sertão',
    cover: '/covers/grande-sertao-veredas.png',
    price: 26.04,
    author: 'Guimarães Rosa',
    },
    {
    id: 8,
    title: 'Flor de poemas',
    cover: '/covers/flor-de-poema.png',
    price: 15.81,
    author: 'Cecília Meireles',
    },
]
</script>

<template>
  <header>
    <nav>
      <h1>
        <a href="#">
          IFbooks
          <span class="logo-title"> Apreço a livros </span>
        </a>
      </h1>
      <div class="search-wrapper">
        <input type="text" class="search" placeholder="Buscar..." />
      </div>
      <ul>
        <li>Termos</li>
        <li>Equipe</li>
        <li>Envio</li>
        <li>Devoluções</li>
      </ul>
      <ul class="icons">
        <li @click="showCart = !showCart"><span class="mdi mdi-cart"></span></li>
        <li><span class="mdi mdi-heart"></span></li>
        <li><span class="mdi mdi-account"></span></li>
      </ul>
    </nav>
  </header>
  <main v-if="showCart">
    <section class="cart">
      <h2>Carrinho</h2>
      <table>
        <thead>
          <tr>
            <th>Título</th>
            <th>Quantidade</th>
            <th>Subtotal</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="book in cart.items" :key="book.id">
            <td class="cart-item">
              <img :src="book.cover" :alt="book.title" />
              <div class="cart-item-info">
                <p class="cart-item-title">{{ book.title }}</p>
                <p class="cart-item-author">{{ book.author }}</p>
                <p class="cart-item-price">R$ {{ book.price.toFixed(2) }}</p>
              </div>
            </td>
            <td>
              <div class="cart-item-quantity">
                <button class="plain">
                  <span class="mdi mdi-minus" />
                </button>
                {{ book.quantity }}
                <button class="plain">
                  <span class="mdi mdi-plus" />
                </button>
              </div>
            </td>
            <td class="cart-item-subtotal">R$ {{ book.price * book.quantity }}</td>
          </tr>
        </tbody>
      </table>
      <button @click="showCart = false" class="outlined">Voltar para loja</button>
      <div class="cart-summary">
        <div class="cupom">
          <input type="text" placeholder="Código do cupom" />
          <button>Inserir cupom</button>
        </div>
        <div class="summary">
          <h2>Total da Compra</h2>
          <div class="summary-items">
            <span>Produtos</span> <span>R$ {{ cart.total.toFixed(2) }}</span> <span>Frete</span>
            <span> Grátis</span> <span>Total</span> <span>R$ {{ cart.total.toFixed(2) }}</span>
          </div>
          <button>Ir para pagamento</button>
        </div>
      </div>
    </section>
  </main>
  <main v-else>
    <section class="hero">
      <div class="hero-content">
        <h3 class="outlined">Livro destaque</h3>
        <h2>Noc Ognia</h2>
        <p>
          Noc ognia é um romance de Erich-Emmanuel Schmitt, que narra a história de um homem que
          vive em um mundo onde as pessoas não podem mais sonhar. O livro é uma reflexão sobre a
          importância dos sonhos e da imaginação na vida humana. Erich-Emmanuel Schmitt é um autor
          francês conhecido por suas obras que exploram temas filosóficos e existenciais. Ele é um
          dos autores mais traduzidos da França e suas obras têm sido amplamente elogiadas pela
          crítica.
        </p>
        <button>Acessar página do livro</button>
      </div>
      <div class="hero-image">
        <img src="/hero.png" alt="Hero Image" />
      </div>
    </section>
    <section class="featured">
      <div>
        <span class="mdi mdi-truck"></span>
        <h2>Frete grátis para SC</h2>
      </div>
      <div>
        <span class="mdi mdi-star"></span>
        <h2>Livros recomendados</h2>
      </div>
      <div>
        <span class="mdi mdi-book-open-page-variant"></span>
        <h2>Mais vendidos</h2>
      </div>
    </section>
    <section class="books">
      <article class="book" v-for="book in books" :key="book.id">
        <img :src="book.cover" :alt="book.title" />
        <h2>{{ book.title }}</h2>
        <p class="book-author">{{ book.author }}</p>
        <span class="price-and-like">
          <p class="book-price">R$ {{ book.price.toFixed(2) }}</p>
          <span class="mdi mdi-heart-outline"></span>
        </span>
        <button><span class="mdi mdi-cart"></span>Comprar</button>
      </article>
    </section>
  </main>
  <footer>
    <nav>
      <section class="upper-footer">
        <div>
          <p class="footer-title">
            <a href="#"> IFbooks </a>
          </p>
          <ul>
            <li><span class="mdi mdi-facebook" /></li>
            <li><span class="mdi mdi-instagram" /></li>
            <li><span class="mdi mdi-twitter" /></li>
          </ul>
        </div>
        <div>
          <p class="contact-text">Contato</p>
          <p><span class="mdi mdi-phone" /> +55 47 99999-9999</p>
          <p><span class="mdi mdi-clock" /> 8h às 23h - Seg a Sex</p>
          <p><span class="mdi mdi-email" /> contato@ifbooks.com.br</p>
          <div class="payment-methods">
            <span class="mdi mdi-visa" />
          </div>
        </div>
      </section>
      <section class="lower-footer">
        <p>&copy; Alguns direitos reservados. IFBooks. 2025</p>
      </section>
    </nav>
  </footer>
</template>

<style scoped>
header nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2vh 8vw;
  border-bottom: 2px solid #27ae6099;

  & h1 {
    font-size: 1.3rem;
    color: #000;

    & a {
      text-decoration: none;
      color: #000;
      display: flex;
      align-items: center;
    }

    & .logo-title {
      border-left: 1px solid #27ae6099;
      font-size: 0.8rem;
      margin-left: 10px;
      padding-left: 10px;
      color: #27ae6099;
      width: 100px;
      line-height: 1rem;
    }
  }

  & input {
    width: 400px;
    height: 40px;
    border-radius: 5px;
    font-size: 1rem;
    border: 0;
    background-color: #f1f1f1;
    padding: 5px;
  }

  & ul {
    display: flex;
  }

  & ul li {
    list-style: none;
    margin: 0 10px;
    font-size: 1rem;
  }

  & .icons li {
    color: #27ae60;
    font-size: 1.3rem;
  }

  & .search-wrapper {
    position: relative;
  }

  & .search-wrapper::before {
    content: '󰍉'; /* Code glyph para mdi-magnify */
    font-family: 'Material Design Icons';
    font-size: 1.2rem;
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
  }

  & .search {
    padding-right: 2rem;
  }
}

.hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5vh 9vw;
  border-bottom: 2px solid #27ae6099;

  & h2 {
    color: #382c2c;
    font-size: 3rem;
    font-weight: 700;
  }

  & .hero-content {
    width: 50%;
    padding-right: 20px;
    font-weight: 400;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;

    & h3.outlined {
      background-color: transparent;
      color: #27ae60;
      border: 2px solid #27ae60;
      padding: 15px 20px;
      border-radius: 5px;
      font-size: 1rem;
    }

    & button {
      margin-top: 20px;
    }

    p {
      width: 70%;
    }
  }

  & .hero-image {
    width: 50%;
    text-align: right;
    padding-right: 4vw;

    & img {
      max-width: 100%;
      height: auto;
    }
  }
}

.featured {
  display: flex;
  padding: 3vh 8vw;
  border-bottom: 2px solid #27ae6099;

  & div {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: center;
    gap: 10px;

    & span {
      font-size: 2rem;
    }

    & h2 {
      font-size: 1.2rem;
      font-weight: 700;
    }
  }

  & article:nth-child(2) {
    border-left: 1px solid #27ae6099;
    border-right: 1px solid #27ae6099;
  }
}

.books {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  padding: 5vh 8vw;

  & .book {
    display: flex;
    flex-direction: column;
    min-width: 300px;
    width: calc(100% / 4 - 42px);
    margin: 20px;

    & h2 {
      font-size: 1.5rem;
      font-weight: 700;
    }

    & .book-author {
      font-size: 1rem;
    }

    & .book-price {
      font-size: 1.2rem;
      font-weight: 700;
    }

    & .price-and-like {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;

      & .mdi-heart-outline {
        font-size: 1.3rem;
        color: #27ae60;
      }
    }
  }
}

.cart {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 5vh 8vw;
  border-bottom: 2px solid #27ae6099;

  & h2 {
    font-size: 2rem;
    font-weight: 700;
    color: #27ae60;
  }

  & table {
    width: 100%;
    border-collapse: collapse;
    margin: 40px 0;

    & th,
    td {
      padding: 10px;
      text-align: left;
    }

    & th {
      border-bottom: 2px solid #27ae6099;
      font-size: 1.2rem;
      font-weight: 700;
    }

    & td {
      border-bottom: 1px solid rgb(128, 128, 128);
      font-size: 1rem;
    }

    & .cart-item-quantity {
      display: flex;
      align-items: center;
    }

    & .cart-item-subtotal {
      font-size: 1.1rem;
      font-weight: 700;
    }

    & .cart-item {
      display: flex;
      align-items: center;
      gap: 20px;

      & img {
        width: 80px;
        height: auto;
      }

      & .cart-item-info {
        display: flex;
        flex-direction: column;
        gap: 5px;

        & .cart-item-title {
          font-size: 1.2rem;
          font-weight: 700;
        }
        & .cart-item-author {
          font-size: 1rem;
        }
        & .cart-item-price {
          font-size: 1.1rem;
          font-weight: 600;
        }
      }
    }
  }

  & .cart-summary {
    display: flex;
    justify-content: space-between;
    width: 100%;

    & .cupom {
      display: flex;
      align-items: center;
      margin-top: 80px;
      gap: 10px;

      & input {
        width: 350px;
        height: 50px;
        border-radius: 5px;
        font-size: 1rem;
        border: 2px solid rgb(128, 128, 128);
        padding: 5px;
      }
    }

    & .summary {
      border: 1px solid rgb(128, 128, 128);
      padding: 1vw;

      & h2 {
        font-size: 1.2rem;
        font-weight: 700;
        color: black;
      }

      & .summary-items {
        display: grid;
        grid-template-columns: 3fr 1fr;

        & span {
          padding: 10px 0;
          border-bottom: 1px solid rgb(128, 128, 128);
        }
      }

      & button {
        margin-top: 20px;
      }
    }
  }
}

footer {
  background-color: #27ae60;
  padding: 2vh 8vw;
  color: #fff;

  .upper-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 100px;
    border-bottom: 2px solid #fff;

    & div {
      display: flex;
      flex-direction: column;
      gap: 10px;

      & .footer-title {
        font-size: 1.2rem;
        font-weight: 700;

        & a {
          text-decoration: none;
          color: #fff;
        }
      }

      & .contact-text {
        font-size: 1.1rem;
        font-weight: 700;
      }
    }
  }

  .lower-footer {
    display: flex;
    justify-content: center;
    padding-top: 20px;
    font-size: 0.8rem;
  }

  ul {
    display: flex;
    padding: 0;
    gap: 20px;

    li {
      list-style: none;
      font-size: 1.2rem;
      color: #fff;
    }
  }
}

button {
  background-color: #27ae60;
  color: #fff;
  border: none;
  padding: 15px 20px;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
  gap: 20px;
  display: flex;
  justify-content: center;

  &.outlined {
    background-color: transparent;
    color: #27ae60;
    border: 2px solid #27ae60;
  }

  &.plain {
    background-color: transparent;
    color: black;
    border: none;
    cursor: pointer;
  }
}
</style>

Adicionando e removendo itens

Vamos agora para a parte final desse tutorial, onde vamos adicionar a funcionalidade de adicionar e remover itens do carrinho. Ainda vamos fazer tudo isso de forma simples, sem usar componentes ou gerenciamento de estados.

Primeiramente, vamos adicionar as funções para adicionar ou remover itens no carrinho. Nós faremos três funções distintas:

  • addToCart: adiciona um livro ao carrinho.
  • incrementBookToCart: incrementa a quantidade de um livro já adicionado ao carrinho.
  • decrementBookToCart: decrementa a quantidade de um livro já adicionado ao carrinho.

As funções devem ser implementadas no arquivo src/App.vue, dentro do bloco <script setup>. O código deve ficar assim:

./src/App.vue
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
function decrementBookToCart(book) {
  const existingBook = cart.value.items.find((item) => item.id === book.id);
  if (existingBook.quantity === 1) {
    cart.value.items = cart.value.items.filter((item) => item.id !== book.id);
  } else {
    existingBook.quantity--;
  }
  cart.value.total -= book.price;
}

function incrementBookToCart(book) {
  const existingBook = cart.value.items.find((item) => item.id === book.id);
  existingBook.quantity++;
  cart.value.total += book.price;
}

function addToCart(book) {
  const existingBook = cart.value.items.find((item) => item.id === book.id);
  if (existingBook) {
    existingBook.quantity++;
  } else {
    cart.value.items.push({ ...book, quantity: 1 });
  }
  cart.value.total += book.price;
  alert(`Adicionado ${book.title} ao carrinho!`);
}

Note que em todos os casos foi recalculado o total do carrinho, que é a soma dos preços de todos os livros. Também, foi adicionado um alerta para informar ao usuário que o livro foi adicionado ao carrinho.

Com as funções já desenvolvidas, vamos agora adicionar os eventos de clique nos botões de adicionar item ao carrinho e também de incrementar e decrementar a quantidade de livros no carrinho. Para isso, vamos editar o arquivo src/App.vue e adicionar os eventos de clique nos botões. Serão feitas duas alterações no código. Na primeira, vamos usar as funções incrementBookToCart e decrementBookToCart para incrementar e decrementar a quantidade de livros no carrinho. Para isso, vamos editar o arquivo src/App.vue, e alterar <div> que possui a classe cart-item-quantity para o seguinte código:

./src/App.vue
142
143
144
145
146
147
148
149
150
<div class="cart-item-quantity">
  <button @click="decrementBookToCart(book)" class="plain">
    <span class="mdi mdi-minus" />
  </button>
  {{ book.quantity }}
  <button @click="incrementBookToCart(book)" class="plain">
    <span class="mdi mdi-plus" />
  </button>
</div>

Note que foram adicionados os eventos de clique nos botões de incrementar e decrementar a quantidade de livros no carrinho.

Também, vamos adicionar o evento de clique no botão de adicionar livro ao carrinho. Para isso, vamos editar o arquivo src/App.vue, e alterar o botão de adicionar livro ao carrinho, dentro do laço de repetição da tag <article>, para o seguinte código:

./src/App.vue
215
216
217
<button @click="addToCart(book)">
  <span class="mdi mdi-cart"></span>Comprar
</button>

Com essas alterações realizadas, o código do arquivo src/App.vue deve ficar com o apresentado no quadro abaixo.

👁👁 Versão completa
./src/App.vue
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
<script setup>
import { ref } from 'vue'
const showCart = ref(false)
const cart = ref({
  items: [],
  total: 0,
})
const books = [
  {
    id: 1,
    title: 'Comigo na livraria',
    cover: '/covers/comigo-na-livraria.png',
    price: 23.24,
    author: 'Martha Medeiros',
  },
  {
    id: 2,
    title: 'Quincas Borba',
    cover: '/covers/quincas-borba.png',
    price: 23.24,
    author: 'Machado de Assis',
  },
  {
    id: 3,
    title: 'A livraria',
    cover: '/covers/a-livraria.png',
    price: 13.94,
    author: 'Penelope Fitzgerald',
  },
  {
    id: 4,
    title: 'A hora da estrela',
    cover: '/covers/a-hora-da-estrela.png',
    price: 16.84,
    author: 'Clarice Lispector',
  },
  {
    id: 5,
    title: 'O alienista',
    cover: '/covers/o-alienista.png',
    price: 266.92,
    author: 'Machado de Assis',
  },
  {
    id: 6,
    title: 'Mar morto',
    cover: '/covers/mar-morto.png',
    price: 13.95,
    author: 'Jorge Amado',
  },
  {
    id: 7,
    title: 'Grande sertão',
    cover: '/covers/grande-sertao-veredas.png',
    price: 26.04,
    author: 'Guimarães Rosa',
  },
  {
    id: 8,
    title: 'Flor de poemas',
    cover: '/covers/flor-de-poema.png',
    price: 15.81,
    author: 'Cecília Meireles',
  },
]

function decrementBookToCart(book) {
  const existingBook = cart.value.items.find((item) => item.id === book.id)
  if (existingBook.quantity === 1) {
    cart.value.items = cart.value.items.filter((item) => item.id !== book.id)
  } else {
    existingBook.quantity--
  }
  cart.value.total -= book.price
}

function incrementBookToCart(book) {
  const existingBook = cart.value.items.find((item) => item.id === book.id)
  existingBook.quantity++
  cart.value.total += book.price
}

function addToCart(book) {
  const existingBook = cart.value.items.find((item) => item.id === book.id)
  if (existingBook) {
    existingBook.quantity++
  } else {
    cart.value.items.push({ ...book, quantity: 1 })
  }
  cart.value.total += book.price
  alert(`Adicionado ${book.title} ao carrinho!`)
}
</script>

<template>
  <header>
    <nav>
      <h1>
        <a href="#">
          IFbooks
          <span class="logo-title"> Apreço a livros </span>
        </a>
      </h1>
      <div class="search-wrapper">
        <input type="text" class="search" placeholder="Buscar..." />
      </div>
      <ul>
        <li>Termos</li>
        <li>Equipe</li>
        <li>Envio</li>
        <li>Devoluções</li>
      </ul>
      <ul class="icons">
        <li @click="showCart = !showCart"><span class="mdi mdi-cart"></span></li>
        <li><span class="mdi mdi-heart"></span></li>
        <li><span class="mdi mdi-account"></span></li>
      </ul>
    </nav>
  </header>
  <main v-if="showCart">
    <section class="cart">
      <h2>Carrinho</h2>
      <table>
        <thead>
          <tr>
            <th>Título</th>
            <th>Quantidade</th>
            <th>Subtotal</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="book in cart.items" :key="book.id">
            <td class="cart-item">
              <img :src="book.cover" :alt="book.title" />
              <div class="cart-item-info">
                <p class="cart-item-title">{{ book.title }}</p>
                <p class="cart-item-author">{{ book.author }}</p>
                <p class="cart-item-price">R$ {{ book.price.toFixed(2) }}</p>
              </div>
            </td>
            <td>
              <div class="cart-item-quantity">
                <button @click="decrementBookToCart(book)" class="plain">
                  <span class="mdi mdi-minus" />
                </button>
                {{ book.quantity }}
                <button @click="incrementBookToCart(book)" class="plain">
                  <span class="mdi mdi-plus" />
                </button>
              </div>
            </td>
            <td class="cart-item-subtotal">R$ {{ book.price * book.quantity }}</td>
          </tr>
        </tbody>
      </table>
      <button @click="showCart = false" class="outlined">Voltar para loja</button>
      <div class="cart-summary">
        <div class="cupom">
          <input type="text" placeholder="Código do cupom" />
          <button>Inserir cupom</button>
        </div>
        <div class="summary">
          <h2>Total da Compra</h2>
          <div class="summary-items">
            <span>Produtos</span> <span>R$ {{ cart.total.toFixed(2) }}</span> <span>Frete</span>
            <span> Grátis</span> <span>Total</span> <span>R$ {{ cart.total.toFixed(2) }}</span>
          </div>
          <button>Ir para pagamento</button>
        </div>
      </div>
    </section>
  </main>
  <main v-else>
    <section class="hero">
      <div class="hero-content">
        <h3 class="outlined">Livro destaque</h3>
        <h2>Noc Ognia</h2>
        <p>
          Noc ognia é um romance de Erich-Emmanuel Schmitt, que narra a história de um homem que
          vive em um mundo onde as pessoas não podem mais sonhar. O livro é uma reflexão sobre a
          importância dos sonhos e da imaginação na vida humana. Erich-Emmanuel Schmitt é um autor
          francês conhecido por suas obras que exploram temas filosóficos e existenciais. Ele é um
          dos autores mais traduzidos da França e suas obras têm sido amplamente elogiadas pela
          crítica.
        </p>
        <button>Acessar página do livro</button>
      </div>
      <div class="hero-image">
        <img src="/hero.png" alt="Hero Image" />
      </div>
    </section>
    <section class="featured">
      <div>
        <span class="mdi mdi-truck"></span>
        <h2>Frete grátis para SC</h2>
      </div>
      <div>
        <span class="mdi mdi-star"></span>
        <h2>Livros recomendados</h2>
      </div>
      <div>
        <span class="mdi mdi-book-open-page-variant"></span>
        <h2>Mais vendidos</h2>
      </div>
    </section>
    <section class="books">
      <article class="book" v-for="book in books" :key="book.id">
        <img :src="book.cover" :alt="book.title" />
        <h2>{{ book.title }}</h2>
        <p class="book-author">{{ book.author }}</p>
        <span class="price-and-like">
          <p class="book-price">R$ {{ book.price.toFixed(2) }}</p>
          <span class="mdi mdi-heart-outline"></span>
        </span>
        <button @click="addToCart(book)"><span class="mdi mdi-cart"></span>Comprar</button>
      </article>
    </section>
  </main>
  <footer>
    <nav>
      <section class="upper-footer">
        <div>
          <p class="footer-title">
            <a href="#"> IFbooks </a>
          </p>
          <ul>
            <li><span class="mdi mdi-facebook" /></li>
            <li><span class="mdi mdi-instagram" /></li>
            <li><span class="mdi mdi-twitter" /></li>
          </ul>
        </div>
        <div>
          <p class="contact-text">Contato</p>
          <p><span class="mdi mdi-phone" /> +55 47 99999-9999</p>
          <p><span class="mdi mdi-clock" /> 8h às 23h - Seg a Sex</p>
          <p><span class="mdi mdi-email" /> contato@ifbooks.com.br</p>
          <div class="payment-methods">
            <span class="mdi mdi-visa" />
          </div>
        </div>
      </section>
      <section class="lower-footer">
        <p>&copy; Alguns direitos reservados. IFBooks. 2025</p>
      </section>
    </nav>
  </footer>
</template>

<style scoped>
header nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2vh 8vw;
  border-bottom: 2px solid #27ae6099;

  & h1 {
    font-size: 1.3rem;
    color: #000;

    & a {
      text-decoration: none;
      color: #000;
      display: flex;
      align-items: center;
    }

    & .logo-title {
      border-left: 1px solid #27ae6099;
      font-size: 0.8rem;
      margin-left: 10px;
      padding-left: 10px;
      color: #27ae6099;
      width: 100px;
      line-height: 1rem;
    }
  }

  & input {
    width: 400px;
    height: 40px;
    border-radius: 5px;
    font-size: 1rem;
    border: 0;
    background-color: #f1f1f1;
    padding: 5px;
  }

  & ul {
    display: flex;
  }

  & ul li {
    list-style: none;
    margin: 0 10px;
    font-size: 1rem;
  }

  & .icons li {
    color: #27ae60;
    font-size: 1.3rem;
  }

  & .search-wrapper {
    position: relative;
  }

  & .search-wrapper::before {
    content: '󰍉'; /* Code glyph para mdi-magnify */
    font-family: 'Material Design Icons';
    font-size: 1.2rem;
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
  }

  & .search {
    padding-right: 2rem;
  }
}

.hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5vh 9vw;
  border-bottom: 2px solid #27ae6099;

  & h2 {
    color: #382c2c;
    font-size: 3rem;
    font-weight: 700;
  }

  & .hero-content {
    width: 50%;
    padding-right: 20px;
    font-weight: 400;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;

    & h3.outlined {
      background-color: transparent;
      color: #27ae60;
      border: 2px solid #27ae60;
      padding: 15px 20px;
      border-radius: 5px;
      font-size: 1rem;
    }

    & button {
      margin-top: 20px;
    }

    p {
      width: 70%;
    }
  }

  & .hero-image {
    width: 50%;
    text-align: right;
    padding-right: 4vw;

    & img {
      max-width: 100%;
      height: auto;
    }
  }
}

.featured {
  display: flex;
  padding: 3vh 8vw;
  border-bottom: 2px solid #27ae6099;

  & div {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: center;
    gap: 10px;

    & span {
      font-size: 2rem;
    }

    & h2 {
      font-size: 1.2rem;
      font-weight: 700;
    }
  }

  & article:nth-child(2) {
    border-left: 1px solid #27ae6099;
    border-right: 1px solid #27ae6099;
  }
}

.books {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  padding: 5vh 8vw;

  & .book {
    display: flex;
    flex-direction: column;
    min-width: 300px;
    width: calc(100% / 4 - 42px);
    margin: 20px;

    & h2 {
      font-size: 1.5rem;
      font-weight: 700;
    }

    & .book-author {
      font-size: 1rem;
    }

    & .book-price {
      font-size: 1.2rem;
      font-weight: 700;
    }

    & .price-and-like {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;

      & .mdi-heart-outline {
        font-size: 1.3rem;
        color: #27ae60;
      }
    }
  }
}

.cart {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 5vh 8vw;
  border-bottom: 2px solid #27ae6099;

  & h2 {
    font-size: 2rem;
    font-weight: 700;
    color: #27ae60;
  }

  & table {
    width: 100%;
    border-collapse: collapse;
    margin: 40px 0;

    & th,
    td {
      padding: 10px;
      text-align: left;
    }

    & th {
      border-bottom: 2px solid #27ae6099;
      font-size: 1.2rem;
      font-weight: 700;
    }

    & td {
      border-bottom: 1px solid rgb(128, 128, 128);
      font-size: 1rem;
    }

    & .cart-item-quantity {
      display: flex;
      align-items: center;
    }

    & .cart-item-subtotal {
      font-size: 1.1rem;
      font-weight: 700;
    }

    & .cart-item {
      display: flex;
      align-items: center;
      gap: 20px;

      & img {
        width: 80px;
        height: auto;
      }

      & .cart-item-info {
        display: flex;
        flex-direction: column;
        gap: 5px;

        & .cart-item-title {
          font-size: 1.2rem;
          font-weight: 700;
        }
        & .cart-item-author {
          font-size: 1rem;
        }
        & .cart-item-price {
          font-size: 1.1rem;
          font-weight: 600;
        }
      }
    }
  }

  & .cart-summary {
    display: flex;
    justify-content: space-between;
    width: 100%;

    & .cupom {
      display: flex;
      align-items: center;
      margin-top: 80px;
      gap: 10px;

      & input {
        width: 350px;
        height: 50px;
        border-radius: 5px;
        font-size: 1rem;
        border: 2px solid rgb(128, 128, 128);
        padding: 5px;
      }
    }

    & .summary {
      border: 1px solid rgb(128, 128, 128);
      padding: 1vw;

      & h2 {
        font-size: 1.2rem;
        font-weight: 700;
        color: black;
      }

      & .summary-items {
        display: grid;
        grid-template-columns: 3fr 1fr;

        & span {
          padding: 10px 0;
          border-bottom: 1px solid rgb(128, 128, 128);
        }
      }

      & button {
        margin-top: 20px;
      }
    }
  }
}

footer {
  background-color: #27ae60;
  padding: 2vh 8vw;
  color: #fff;

  .upper-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 100px;
    border-bottom: 2px solid #fff;

    & div {
      display: flex;
      flex-direction: column;
      gap: 10px;

      & .footer-title {
        font-size: 1.2rem;
        font-weight: 700;

        & a {
          text-decoration: none;
          color: #fff;
        }
      }

      & .contact-text {
        font-size: 1.1rem;
        font-weight: 700;
      }
    }
  }

  .lower-footer {
    display: flex;
    justify-content: center;
    padding-top: 20px;
    font-size: 0.8rem;
  }

  ul {
    display: flex;
    padding: 0;
    gap: 20px;

    li {
      list-style: none;
      font-size: 1.2rem;
      color: #fff;
    }
  }
}

button {
  background-color: #27ae60;
  color: #fff;
  border: none;
  padding: 15px 20px;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
  gap: 20px;
  display: flex;
  justify-content: center;

  &.outlined {
    background-color: transparent;
    color: #27ae60;
    border: 2px solid #27ae60;
  }

  &.plain {
    background-color: transparent;
    color: black;
    border: none;
    cursor: pointer;
  }
}
</style>

Conclusão

Com esses passos concluídos, você terá uma aplicação básica de carrinho de compras em Vue.js. A aplicação possui um cabeçalho, uma seção de destaque, uma seção de livros e um rodapé. Além disso, a aplicação possui um carrinho de compras que permite adicionar e remover produtos.

Nas próximas aulas, vamos utilizar essa aplicação como base para implementar funcionalidades mais avançadas, como o uso de componentes, rotas, e gerenciamento de estado com o Pinia.