You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
description: The Views section describes all you need to know to configure data and views for a specific route in your Nuxt Application. Views consist of an app template, a layout, and the actual page.
2
+
title: Visões
3
+
description: A secção visões descreve tudo o que precisamos de saber para configurar dados e visões para uma rota específica na nossa aplicação de Nuxt. As visões são compostas por um modelo de marcação de aplicação, uma disposição e a página propriamente dita.
The Views section describes all you need to know to configure data and views for a specific route in your Nuxt Application. Views consist of an app template, a layout, and the actual page.
8
+
# Visões
9
+
10
+
A secção visões descreve tudo o que precisamos de saber para configurar dados e visões para uma rota específica na nossa aplicação de Nuxt. As visões são compostas por um modelo de marcação de aplicação, uma disposição e a página propriamente dita.
10
11
11
12
---
12
13
13
-
14
+
14
15
15
-
Composition of a View in Nuxt
16
+
Composição duma visão na Nuxt
16
17
17
-
## Pages
18
+
## Páginas
18
19
19
-
Every Page component is a Vue component but Nuxt adds special attributes and functions to make the development of your application as easy as possible.
20
+
Cada componente de página é um componente de Vue, mas a Nuxt adiciona atributos e funções especiais para facilitar ao máximo o desenvolvimento da nossa aplicação:
20
21
21
22
```html{}[pages/index.vue]
22
23
<template>
@@ -26,7 +27,7 @@ Every Page component is a Vue component but Nuxt adds special attributes and fun
26
27
<script>
27
28
export default {
28
29
head() {
29
-
// Set Meta Tags for this Page
30
+
// Definir os metamarcadores para esta página
30
31
}
31
32
// ...
32
33
}
@@ -39,21 +40,21 @@ Every Page component is a Vue component but Nuxt adds special attributes and fun
39
40
</style>
40
41
```
41
42
42
-
## Properties of a page component
43
+
## Propriedades de um componente de página
43
44
44
-
There are many properties of the page component such as the head property in the example above.
45
+
Existem muitas propriedades do componente de página, como a propriedade `head` no exemplo acima.
45
46
46
47
::alert{type="next"}
47
-
See the [Directory Structure book](/docs/directory-structure/nuxt)to learn more about all the properties can use on your page
48
+
Consultar o [livro Estrutura do Diretório](/docs/directory-structure/nuxt)para saber mais sobre todas as propriedades que podemos utilizar na nossa página.
48
49
::
49
50
50
-
## Layouts
51
+
## Disposições
51
52
52
-
Layouts are a great help when you want to change the look and feel of your Nuxt app. For example you want to include a sidebar or have distinct layouts for mobile and desktop.
53
+
As disposições são uma grande ajuda quando queremos alterar o aspeto e a sensação da nossa aplicação de Nuxt. Por exemplo, queremos incluir uma barra lateral ou ter disposições distintas para telemóvel e computador.
53
54
54
-
### Default Layout
55
+
### Disposição Predefinida
55
56
56
-
You can define a default layout by adding a `default.vue` file inside the layouts directory. This will be used for all pages that don't have a layout specified. The only thing you need to include in the layout is the `<Nuxt />` component which renders the page component.
57
+
Podemos definir uma disposição padrão adicionando um ficheiro `default.vue` dentro do diretório `layouts`. Isto será utilizado para todas as páginas que não tiverem uma disposição especificada. A única coisa que precisamos incluir na disposição é o componente `<Nuxt />`, que desenha o componente da página:
57
58
58
59
```html{}[layouts/default.vue]
59
60
<template>
@@ -62,14 +63,14 @@ You can define a default layout by adding a `default.vue` file inside the layo
62
63
```
63
64
64
65
::alert{type="next"}
65
-
Learn more about the [Nuxt component](/docs/features/nuxt-components)in the components chapter
66
+
Saber mais sobre o [componente `Nuxt`](/docs/features/nuxt-components)no capítulo sobre componentes.
66
67
::
67
68
68
-
### Custom Layout
69
+
### Disposição Personalizada
69
70
70
-
You can create custom layouts by adding a `.vue`file to the layouts directory. In order to use the custom layout you need to set the `layout`property in the page component where you want to use that layout. The value will be the name of the custom layout that you have created.
71
+
Podemos criar disposições personalizadas adicionando um ficheiro `.vue`ao diretório `layouts`. Para utilizar uma disposição personalizada, precisamos de definir a propriedade `layout`no componente da página onde queremos utilizar esta disposição. O valor será o nome da disposição personalizada que criámos.
71
72
72
-
To create a blog layout add a`blog.vue`file to your layouts directory`layouts/blog.vue`:
73
+
Para criar uma disposição de blogue, adicionamos`blog.vue`ao nosso diretório de disposições`layouts/blog.vue`:
73
74
74
75
```html{}[layouts/blog.vue]
75
76
<template>
@@ -81,38 +82,38 @@ To create a blog layout add a `blog.vue` file to your layouts directory `layouts
81
82
```
82
83
83
84
::alert{type="warning"}
84
-
Make sure to add the `<Nuxt/>` component when creating a layout to actually include the page component.
85
+
Temos de certificar-nos de que adicionamos o componente `<Nuxt/>` ao criarmos uma disposição para incluir efetivamente o componente de página.
85
86
::
86
87
87
-
We then use the layout property with the value of 'blog' in the page where we want that layout to be used.
88
+
Em seguida, usamos a propriedade `layout` com o valor de `'blog'` na página onde queremos que esta disposição seja usada:
88
89
89
90
```html{}[pages/posts.vue]
90
91
<template>
91
-
<!-- Your template -->
92
+
<!-- Nosso modelo de marcação -->
92
93
</template>
93
94
<script>
94
95
export default {
95
96
layout: 'blog'
96
-
// page component definitions
97
+
// definições do componente de página
97
98
}
98
99
</script>
99
100
```
100
101
101
102
::alert{type="info"}
102
-
If you don't add a layout property to your page, e.g. `layout: 'blog'`, then the `default.vue`layout will be used.
103
+
Se não adicionarmos uma propriedade `layout` à nossa página, por exemplo, `layout: 'blog'`, então a disposição `default.vue`será usada.
103
104
::
104
105
105
-
## Error Page
106
+
## Página de Erro
106
107
107
-
The error page is a *page component* which is always displayed when an error occurs (that does not happen while server-side rendering).
108
+
A página de erro é um *componente de página*, o qual é sempre apresentado quando ocorre um erro (isto não acontece durante a interpretação do lado do servidor).
108
109
109
110
::alert{type="warning"}
110
-
Although this file is placed in the `layouts` folder, it should be treated as a page.
111
+
Embora este ficheiro seja colocado na pasta `layouts`, deve ser tratado como uma página.
111
112
::
112
113
113
-
As mentioned above, this layout is special, since you should not include the `<Nuxt/>` component inside its template. You must see this layout as a component displayed when an error occurs (`404`,`500`, etc.). Similar to other page components, you can set a custom layout for the error page as well in the usual way.
114
+
Como mencionado acima, esta disposição é especial, pois não devemos incluir o componente `<Nuxt/>` dentro do seu modelo de marcação. Devemos ver esta disposição como um componente exibido quando ocorre um erro (`404`,`500`, etc). À semelhança de outros componentes de página, também podemos definir uma disposição personalizada para a página de erro, da maneira habitual.
114
115
115
-
You can customize the error page by adding a `layouts/error.vue` file:
116
+
Podemos personalizar a página de erro adicionado um ficheiro `layouts/error.vue`:
116
117
117
118
```html{}[layouts/error.vue]
118
119
<template>
@@ -126,16 +127,17 @@ You can customize the error page by adding a `layouts/error.vue` file:
126
127
<script>
127
128
export default {
128
129
props: ['error'],
129
-
layout: 'error' // you can set a custom layout for the error page
130
+
// podemos definir uma disposição personalizada para a página de erro.
131
+
layout: 'error'
130
132
}
131
133
</script>
132
134
```
133
135
134
-
## Document: App.html
136
+
## Documento: `App.html`
135
137
136
-
The app template is used to create the actual HTML frame of your document for your Nuxt application which injects the content as well as variables for the head and body. This file is created automatically for you and in general rarely needs to be modified. You can customize the HTML app template used by Nuxt to include scripts or conditional CSS classes by creating an `app.html` file in the source directory of your project which by default is the root directory.
138
+
O modelo de marcação da aplicação é usado para criar a moldura de HTML real do nosso documento para a nossa aplicação de Nuxt, que injeta o conteúdo, bem como variáveis para o cabeçalho e o corpo. Este ficheiro é criado automaticamente para nós e, em geral, precisa raramente de ser modificado. Podemos personalizar o modelo de marcação da aplicação de linguagem de marcação de hipertexto usado pela Nuxt para incluir programas ou classes de folhas de estilos condicionais, criando um ficheiro `app.html` no diretório de origem do nosso projeto, que por predefinição é o diretório raiz.
137
139
138
-
The default template used by Nuxt is:
140
+
O modelo de marcação predefinido usado pela Nuxt é:
139
141
140
142
```html{}[app.html]
141
143
<!DOCTYPE html>
@@ -149,7 +151,7 @@ The default template used by Nuxt is:
149
151
</html>
150
152
```
151
153
152
-
One use case of using a custom app template is to add conditional CSS classes for IE:
154
+
Um caso de uso de um modelo de marcação de aplicação personalizado é adicionar classes de folhas de estilos condicionais para o Internet Explorer:
153
155
154
156
```html{}[app.html]
155
157
<!DOCTYPE html>
@@ -165,5 +167,5 @@ One use case of using a custom app template is to add conditional CSS classes fo
165
167
```
166
168
167
169
::alert{type="info"}
168
-
While you can add JavaScript and CSS files in the `app.html`, it is recommended to use the `nuxt.config.js`for these tasks instead!
170
+
Embora possamos adicionar ficheiros de JavaScript e CSS no `app.html`, recomenda-se a utilização do `nuxt.config.js`para estas tarefas!
0 commit comments