Skip to content

Commit

Permalink
docs(pt): update content inside docs/concepts folder (#2254)
Browse files Browse the repository at this point in the history
  • Loading branch information
nazarepiedady authored Jun 9, 2024
1 parent 996fd91 commit b5185a1
Show file tree
Hide file tree
Showing 5 changed files with 206 additions and 202 deletions.
74 changes: 38 additions & 36 deletions content/pt/docs/2.concepts/1.views.md
Original file line number Diff line number Diff line change
@@ -1,22 +1,23 @@
---
title: Views
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.
title: Visões
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.
category: concepts
csb_link: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/02_concepts/01_views?fontsize=14&hidenavigation=1&theme=dark
---
# Views

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.
# Visões

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.

---

![Composition of a View in Nuxt](/img/docs/views.png)
![Composição duma visão na Nuxt](/img/docs/views.png)

Composition of a View in Nuxt
Composição duma visão na Nuxt

## Pages
## Páginas

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.
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:

```html{}[pages/index.vue]
<template>
Expand All @@ -26,7 +27,7 @@ Every Page component is a Vue component but Nuxt adds special attributes and fun
<script>
export default {
head() {
// Set Meta Tags for this Page
// Definir os metamarcadores para esta página
}
// ...
}
Expand All @@ -39,21 +40,21 @@ Every Page component is a Vue component but Nuxt adds special attributes and fun
</style>
```

## Properties of a page component
## Propriedades de um componente de página

There are many properties of the page component such as the head property in the example above.
Existem muitas propriedades do componente de página, como a propriedade `head` no exemplo acima.

::alert{type="next"}
See the [Directory Structure book](/docs/directory-structure/nuxt) to learn more about all the properties can use on your page
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.
::

## Layouts
## Disposições

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.
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.

### Default Layout
### Disposição Predefinida

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.
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:

```html{}[layouts/default.vue]
<template>
Expand All @@ -62,14 +63,14 @@ You can define a default layout by adding a `default.vue` file inside the layo
```

::alert{type="next"}
Learn more about the [Nuxt component](/docs/features/nuxt-components) in the components chapter
Saber mais sobre o [componente `Nuxt`](/docs/features/nuxt-components) no capítulo sobre componentes.
::

### Custom Layout
### Disposição Personalizada

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.
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.

To create a blog layout add a `blog.vue` file to your layouts directory `layouts/blog.vue`:
Para criar uma disposição de blogue, adicionamos `blog.vue` ao nosso diretório de disposições `layouts/blog.vue`:

```html{}[layouts/blog.vue]
<template>
Expand All @@ -81,38 +82,38 @@ To create a blog layout add a `blog.vue` file to your layouts directory `layouts
```

::alert{type="warning"}
Make sure to add the `<Nuxt/>` component when creating a layout to actually include the page component.
Temos de certificar-nos de que adicionamos o componente `<Nuxt />` ao criarmos uma disposição para incluir efetivamente o componente de página.
::

We then use the layout property with the value of 'blog' in the page where we want that layout to be used.
Em seguida, usamos a propriedade `layout` com o valor de `'blog'` na página onde queremos que esta disposição seja usada:

```html{}[pages/posts.vue]
<template>
<!-- Your template -->
<!-- Nosso modelo de marcação -->
</template>
<script>
export default {
layout: 'blog'
// page component definitions
// definições do componente de página
}
</script>
```

::alert{type="info"}
If you don't add a layout property to your page, e.g. `layout: 'blog'`, then the `default.vue` layout will be used.
Se não adicionarmos uma propriedade `layout` à nossa página, por exemplo, `layout: 'blog'`, então a disposição `default.vue` será usada.
::

## Error Page
## Página de Erro

The error page is a *page component* which is always displayed when an error occurs (that does not happen while server-side rendering).
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).

::alert{type="warning"}
Although this file is placed in the `layouts` folder, it should be treated as a page.
Embora este ficheiro seja colocado na pasta `layouts`, deve ser tratado como uma página.
::

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.
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.

You can customize the error page by adding a `layouts/error.vue` file:
Podemos personalizar a página de erro adicionado um ficheiro `layouts/error.vue`:

```html{}[layouts/error.vue]
<template>
Expand All @@ -126,16 +127,17 @@ You can customize the error page by adding a `layouts/error.vue` file:
<script>
export default {
props: ['error'],
layout: 'error' // you can set a custom layout for the error page
// podemos definir uma disposição personalizada para a página de erro.
layout: 'error'
}
</script>
```

## Document: App.html
## Documento: `App.html`

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.
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.

The default template used by Nuxt is:
O modelo de marcação predefinido usado pela Nuxt é:

```html{}[app.html]
<!DOCTYPE html>
Expand All @@ -149,7 +151,7 @@ The default template used by Nuxt is:
</html>
```

One use case of using a custom app template is to add conditional CSS classes for IE:
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:

```html{}[app.html]
<!DOCTYPE html>
Expand All @@ -165,5 +167,5 @@ One use case of using a custom app template is to add conditional CSS classes fo
```

::alert{type="info"}
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!
Embora possamos adicionar ficheiros de JavaScript e CSS no `app.html`, recomenda-se a utilização do `nuxt.config.js` para estas tarefas!
::
Loading

0 comments on commit b5185a1

Please sign in to comment.