From 161ed2fa8fb21202a56c75deead92f4af812ab16 Mon Sep 17 00:00:00 2001 From: GuiDevloper Date: Fri, 4 Mar 2022 10:28:22 -0300 Subject: [PATCH 1/6] Translate the new SSR folder --- src/guide/ssr/build-config.md | 58 +++++++++++++++--------------- src/guide/ssr/getting-started.md | 40 ++++++++++----------- src/guide/ssr/hydration.md | 24 ++++++------- src/guide/ssr/introduction.md | 48 ++++++++++++------------- src/guide/ssr/routing.md | 26 +++++++------- src/guide/ssr/server.md | 16 ++++----- src/guide/ssr/structure.md | 60 ++++++++++++++++---------------- src/guide/ssr/universal.md | 30 ++++++++-------- 8 files changed, 151 insertions(+), 151 deletions(-) diff --git a/src/guide/ssr/build-config.md b/src/guide/ssr/build-config.md index 343609423e..c10c4e63aa 100644 --- a/src/guide/ssr/build-config.md +++ b/src/guide/ssr/build-config.md @@ -1,16 +1,16 @@ -# Build Configuration +# Configuração da Compilação -The webpack config for an SSR project will be similar to a client-only project. If you're not familiar with configuring webpack, you can find more information in the documentation for [Vue CLI](https://cli.vuejs.org/guide/webpack.html#working-with-webpack) or [configuring Vue Loader manually](https://vue-loader.vuejs.org/guide/#manual-setup). +A configuração do webpack para um projeto SSR será semelhante a um projeto _client-only_. Se você não estiver familiarizado com a configuração do webpack, poderá encontrar mais informações na documentação do [Vue CLI](https://cli.vuejs.org/guide/webpack.html#working-with-webpack) ou [configurando o Vue Loader manualmente](https://vue-loader.vuejs.org/guide/#manual-setup). -## Key Differences with Client-Only Builds +## Principais Diferenças com Compilações _Client-Only_ -1. We need to create a [webpack manifest](https://webpack.js.org/concepts/manifest/) for our server-side code. This is a JSON file that webpack keeps to track how all the modules map to the output bundles. +1. Precisamos criar um [_manifest_ do webpack](https://webpack.js.org/concepts/manifest/) para nosso código do lado do servidor. Este é um arquivo JSON que o webpack mantém para rastrear como todos os módulos são mapeados para os pacotes finais. -2. We should [externalize application dependencies](https://webpack.js.org/configuration/externals/). This makes the server build much faster and generates a smaller bundle file. When doing this, we have to exclude dependencies that need to be processed by webpack (like `.css`. or `.vue` files). +2. Devemos [externalizar dependências de aplicativos](https://webpack.js.org/configuration/externals/). Isso torna a compilação do servidor muito mais rápida e gera um arquivo de pacote menor. Ao fazer isso, temos que excluir dependências que precisam ser processadas pelo webpack (como arquivos `.css`. ou `.vue`). -3. We need to change webpack [target](https://webpack.js.org/concepts/targets/) to Node.js. This allows webpack to handle dynamic imports in a Node-appropriate fashion, and also tells `vue-loader` to emit server-oriented code when compiling Vue components. +3. Precisamos alterar o [_target_](https://webpack.js.org/concepts/targets/) do webpack para Node.js. Isso permite que o webpack lide com importações dinâmicas de maneira apropriada ao Node, e também diz ao `vue-loader` para emitir código orientado ao servidor ao compilar componentes Vue. -4. When building a server entry, we would need to define an environment variable to indicate we are working with SSR. It might be helpful to add a few `scripts` to the project's `package.json`: +4. Ao construir uma entrada de servidor, precisaríamos definir uma variável de ambiente para indicar que estamos trabalhando com SSR. Pode ser útil adicionar alguns `scripts` ao `package.json` do projeto: ```json "scripts": { @@ -20,9 +20,9 @@ The webpack config for an SSR project will be similar to a client-only project. } ``` -## Example Configuration +## Exemplo de Configuração -Below is a sample `vue.config.js` that adds SSR rendering to a Vue CLI project, but it can be adapted for any webpack build. +Abaixo está um `vue.config.js` de exemplo que adiciona renderização SSR a um projeto Vue CLI, mas pode ser adaptado para qualquer compilação com webpack. ```js const { WebpackManifestPlugin } = require('webpack-manifest-plugin') @@ -31,15 +31,15 @@ const webpack = require('webpack') module.exports = { chainWebpack: webpackConfig => { - // We need to disable cache loader, otherwise the client build - // will used cached components from the server build + // Precisamos desabilitar o cache loader, caso contrário a compilação do cliente + // usará componentes em cache da compilação do servidor webpackConfig.module.rule('vue').uses.delete('cache-loader') webpackConfig.module.rule('js').uses.delete('cache-loader') webpackConfig.module.rule('ts').uses.delete('cache-loader') webpackConfig.module.rule('tsx').uses.delete('cache-loader') if (!process.env.SSR) { - // Point entry to your app's client entry file + // Aponta a entrada para o arquivo de entrada do cliente do seu aplicativo webpackConfig .entry('app') .clear() @@ -47,17 +47,17 @@ module.exports = { return } - // Point entry to your app's server entry file + // Aponta a entrada para o arquivo de entrada do servidor do seu aplicativo webpackConfig .entry('app') .clear() .add('./src/entry-server.js') - // This allows webpack to handle dynamic imports in a Node-appropriate - // fashion, and also tells `vue-loader` to emit server-oriented code when - // compiling Vue components. + // Permite que o webpack lide com importações dinâmicas ao estilo Node + // e também diz ao `vue-loader` para emitir código orientado ao servidor ao + // compilar componentes Vue. webpackConfig.target('node') - // This tells the server bundle to use Node-style exports + // Isso diz ao pacote do servidor para usar exportações no estilo Node webpackConfig.output.libraryTarget('commonjs2') webpackConfig @@ -66,11 +66,11 @@ module.exports = { // https://webpack.js.org/configuration/externals/#function // https://github.com/liady/webpack-node-externals - // Externalize app dependencies. This makes the server build much faster - // and generates a smaller bundle file. + // Externaliza dependências do app. Compila a parte do servidor mais rápido + // e gera um arquivo de pacote menor. - // Do not externalize dependencies that need to be processed by webpack. - // You should also whitelist deps that modify `global` (e.g. polyfills) + // Não externalize dependências que precisam ser processadas pelo webpack. + // Você deve permitir deps que modificam o `global` (ex.: polyfills) webpackConfig.externals(nodeExternals({ allowlist: /\.(css|vue)$/ })) webpackConfig.optimization.splitChunks(false).minimize(false) @@ -89,18 +89,18 @@ module.exports = { } ``` -## Externals Caveats +## Limitações do _Externals_ -Notice that in the `externals` option we are whitelisting CSS files. This is because CSS imported from dependencies should still be handled by webpack. If you are importing any other types of files that also rely on webpack (e.g. `*.vue`, `*.sass`), you should add them to the whitelist as well. +Observe que na opção `externals` estamos permitindo arquivos CSS. Isso ocorre porque o CSS importado das dependências ainda deve ser tratado pelo webpack. Se estiver importando qualquer outro tipo de arquivo que também dependa do webpack (ex.: `*.vue`, `*.sass`), você deve adicioná-los à lista de permissões também. -If you are using `runInNewContext: 'once'` or `runInNewContext: true`, then you also need to whitelist polyfills that modify `global`, e.g. `babel-polyfill`. This is because when using the new context mode, **code inside a server bundle has its own `global` object.** Since you don't really need it on the server, it's actually easier to just import it in the client entry. +Se estiver usando `runInNewContext: 'once'` ou `runInNewContext: true`, então você também precisa colocar _polyfills_ na lista de permissões que modificam `global`, ex.: `babel-polyfill`. Isso ocorre porque ao usar o novo modo de contexto, **o código dentro de um pacote de servidor tem seu próprio objeto `global`.** Como você realmente não precisa disso no servidor, é mais fácil importá-lo na entrada do cliente. -## Generating `clientManifest` +## Gerando `clientManifest` -In addition to the server bundle, we can also generate a client build manifest. With the client manifest and the server bundle, the renderer now has information of both the server _and_ client builds. This way it can automatically infer and inject [preload / prefetch directives](https://css-tricks.com/prefetching-preloading-prebrowsing/), `` and ` ``` -The code inside is compiled as the content of the component's `setup()` function. This means that unlike normal ` ``` -## Reactivity +## Reatividade -Reactive state needs to be explicitly created using [Reactivity APIs](/api/basic-reactivity.html). Similar to values returned from a `setup()` function, refs are automatically unwrapped when referenced in templates: +O estado reativo precisa ser criado explicitamente usando [APIs de Reatividade](/api/basic-reactivity.html). Semelhante aos valores retornados de uma função `setup()`, refs são automaticamente desempacotados quando referenciados em _templates_: ```vue ``` ```html ``` -## `defineProps` and `defineEmits` +## `defineProps` e `defineEmits` -To declare `props` and `emits` in ` ``` -- `defineProps` and `defineEmits` are **compiler macros** only usable inside ` ``` -When a parent gets an instance of this component via template refs, the retrieved instance will be of the shape `{ a: number, b: number }` (refs are automatically unwrapped just like on normal instances). +Quando um pai obtém uma instância deste componente via refs de _template_, a instância recuperada terá a forma `{ a: number, b: number }` (refs são automaticamente desempacotadas como em instâncias normais). -## `useSlots` and `useAttrs` +## `useSlots` e `useAttrs` -Usage of `slots` and `attrs` inside ` ``` -`useSlots` and `useAttrs` are actual runtime functions that return the equivalent of `setupContext.slots` and `setupContext.attrs`. They can be used in normal composition API functions as well. +`useSlots` e `useAttrs` são funções de tempo de execução reais que retornam o equivalente de `setupContext.slots` e `setupContext.attrs`. Eles também podem ser usados ​​em funções de API de composição normal. -## Usage alongside normal ` ``` -:::warning -`render` function is not supported in this scenario. Please use one normal ` ``` -In addition, the awaited expression will be automatically compiled in a format that preserves the current component instance context after the `await`. +Além disso, a expressão aguardada será compilada automaticamente em um formato que preserva o contexto da instância do componente atual após o `await`. -:::warning Note -`async setup()` must be used in combination with `Suspense`, which is currently still an experimental feature. We plan to finalize and document it in a future release - but if you are curious now, you can refer to its [tests](https://github.com/vuejs/vue-next/blob/master/packages/runtime-core/__tests__/components/Suspense.spec.ts) to see how it works. +:::warning Nota +`async setup()` deve ser usado em combinação com `Suspense`, que atualmente ainda é um recurso experimental. Planejamos finalizá-lo e documentá-lo em uma versão futura - mas se você estiver curioso agora, pode consultar seus [testes](https://github.com/vuejs/vue-next/blob/master/packages/runtime-core/__tests__/components/Suspense.spec.ts) para ver como funciona. ::: -## TypeScript-only Features +## Recursos somente do TypeScript -### Additional type exports +### Exportações de tipos adicionais -As noted above, in order to export additional types from an SFC, they must be moved to an additional ` ``` -### Type-only props/emit declarations +### Declarando somente o tipo de props/emits -Props and emits can also be declared using pure-type syntax by passing a literal type argument to `defineProps` or `defineEmits`: +Props e emits também podem ser declarados usando sintaxe de tipo puro passando um argumento de tipo literal para `defineProps` ou `defineEmits`: ```ts const props = defineProps<{ @@ -298,26 +298,26 @@ const emit = defineEmits<{ }>() ``` -- `defineProps` or `defineEmits` can only use either runtime declaration OR type declaration. Using both at the same time will result in a compile error. +- `defineProps` ou `defineEmits` só podem usar declaração de tempo de execução OU declaração de tipo. Usar ambos ao mesmo tempo resultará em um erro de compilação. -- When using type declaration, the equivalent runtime declaration is automatically generated from static analysis to remove the need for double declaration and still ensure correct runtime behavior. +- Ao usar a declaração de tipo, a declaração de tempo de execução equivalente é gerada automaticamente a partir da análise estática para eliminar a necessidade de declaração dupla e ainda garantir o comportamento correto em tempo de execução. - - In dev mode, the compiler will try to infer corresponding runtime validation from the types. For example here `foo: String` is inferred from the `foo: string` type. If the type is a reference to an imported type, the inferred result will be `foo: null` (equal to `any` type) since the compiler does not have information of external files. + - No modo dev, o compilador tentará inferir a validação em tempo de execução correspondente dos tipos. Por exemplo, aqui `foo: String` é inferido do tipo `foo: string`. Se o tipo for uma referência a um tipo importado, o resultado inferido será `foo: null` (igual ao tipo `any`) já que o compilador não possui informações de arquivos externos. - - In prod mode, the compiler will generate the array format declaration to reduce bundle size (the props here will be compiled into `['foo', 'bar']`) + - No modo de produção, o compilador gerará a declaração de formato de array para reduzir o tamanho do pacote (as props aqui serão compiladas em `['foo', 'bar']`) - - The emitted code is still TypeScript with valid typing, which can be further processed by other tools. + - O código emitido ainda é TypeScript com tipagem válida, podendo ser posteriormente processado por outras ferramentas. -- As of now, the type declaration argument must be one of the following to ensure correct static analysis: +- A partir de agora, o argumento de declaração de tipo deve ser um dos seguintes para garantir a análise estática correta: - - A type literal - - A reference to an interface or a type literal in the same file + - Um literal de tipo + - Uma referência a uma interface ou um literal de tipo no mesmo arquivo - Currently complex types and type imports from other files are not supported. It is theoretically possible to support type imports in the future. + Atualmente, tipos complexos e importações de tipos de outros arquivos não são suportados. É teoricamente possível suportar importações de tipo no futuro. -### Default props values when using type declaration +### Valores padrão de props ao usar declaração de tipo -One drawback of the type-only `defineProps` declaration is that it doesn't have a way to provide default values for the props. To resolve this problem, a `withDefaults` compiler macro is also provided: +Uma desvantagem da declaração `defineProps` somente de tipo é que ela não tem uma maneira de fornecer valores padrão para as props. Para resolver este problema, uma macro do compilador `withDefaults` também é fornecida: ```ts interface Props { @@ -326,13 +326,13 @@ interface Props { } const props = withDefaults(defineProps(), { - msg: 'hello', - labels: () => ['one', 'two'] + msg: 'olá', + labels: () => ['um', 'dois'] }) ``` -This will be compiled to equivalent runtime props `default` options. In addition, the `withDefaults` helper provides type checks for the default values, and ensures the returned `props` type has the optional flags removed for properties that do have default values declared. +Isso será compilado para as opções `default` de props equivalentes em tempo de execução. Além disso, o auxiliar `withDefaults` fornece verificações de tipo para os valores padrão e garante que o tipo `props` retornado tenha os sinalizadores opcionais removidos para propriedades que possuem valores padrão declarados. -## Restriction: No Src Imports +## Restrição: Nenhuma Importação Src -Due to the difference in module execution semantics, code inside ` ``` -`lang` can be applied to any block - for example we can use ` ``` -Note the intergration with pre-processors may differ based on the toolchain. Check out the respective documentations for examples: +Observe que a integração com pré-processadores pode diferir com base na cadeia de ferramentas. Confira as respectivas documentações para exemplos: - [Vite](https://vitejs.dev/guide/features.html#css-pre-processors) - [Vue CLI](https://cli.vuejs.org/guide/css.html#pre-processors) - [webpack + vue-loader](https://vue-loader.vuejs.org/guide/pre-processors.html#using-pre-processors) -## Src Imports +## Importações Src -If you prefer splitting up your `*.vue` components into multiple files, you can use the `src` attribute to import an external file for a language block: +Se preferir dividir seus componentes `*.vue` em vários arquivos, você pode usar o atributo `src` para importar um arquivo externo para um bloco de languagem: ```vue @@ -117,23 +117,23 @@ If you prefer splitting up your `*.vue` components into multiple files, you can ``` -Beware that `src` imports follow the same path resolution rules as webpack module requests, which means: +Esteja ciente de que as importações `src` seguem as mesmas regras de resolução de caminho que as solicitações do módulo webpack, o que significa: -- Relative paths need to start with `./` -- You can import resources from npm dependencies: +- Caminhos relativos precisam começar com `./` +- Você pode importar recursos das dependências npm: ```vue - + ``` -Into the following: +No seguinte: ```vue ``` -### Child Component Root Elements +### Elementos-raiz de Componente Filho -With `scoped`, the parent component's styles will not leak into child components. However, a child component's root node will be affected by both the parent's scoped CSS and the child's scoped CSS. This is by design so that the parent can style the child root element for layout purposes. +Com `scoped`, os estilos do componente pai não vazarão para os componentes filhos. No entanto, o nó raiz de um componente filho será afetado pelo CSS com escopo do pai e pelo CSS com escopo do filho. Isso ocorre por design para que o pai possa estilizar o elemento raiz filho para fins de layout. -### Deep Selectors +### Seletores Profundos -If you want a selector in `scoped` styles to be "deep", i.e. affecting child components, you can use the `:deep()` pseudo-class: +Se você quiser que um seletor em estilos `scoped` seja "profundo", ou seja, afetando componentes filhos, você pode usar a pseudo-classe `:deep()`: ```vue ``` -The above will be compiled into: +O acima será compilado em: ```css .a[data-v-f3f3eg9] .b { @@ -58,13 +58,13 @@ The above will be compiled into: } ``` -:::tip -DOM content created with `v-html` are not affected by scoped styles, but you can still style them using deep selectors. +:::tip Dica +O conteúdo do DOM criado com `v-html` não é afetado por estilos com escopo, mas você ainda pode estilizá-los usando seletores profundos. ::: -### Slotted Selectors +### Seletores _Slotted_ -By default, scoped styles do not affect contents rendered by ``, as they are considered to be owned by the parent component passing them in. To explicitly target slot content, use the `:slotted` pseudo-class: +Por padrão, os estilos com escopo não afetam o conteúdo renderizado por ``, pois são considerados de propriedade do componente pai que os transmite. Para mirar explicitamente o conteúdo do slot, use a pseudoclasse `:slotted`: ```vue ``` -### Global Selectors +### Seletores Globais -If you want just one rule to apply globally, you can use the `:global` pseudo-class rather than creating another ` ``` -### Mixing Local and Global Styles +### Misturando Estilos Locais e Globais -You can also include both scoped and non-scoped styles in the same component: +Você também pode incluir estilos com e sem escopo no mesmo componente: ```vue ``` -### Scoped Style Tips +### Dicas para Estilo com Escopo -- **Scoped styles do not eliminate the need for classes**. Due to the way browsers render various CSS selectors, `p { color: red }` will be many times slower when scoped (i.e. when combined with an attribute selector). If you use classes or ids instead, such as in `.example { color: red }`, then you virtually eliminate that performance hit. +- **Estilos com escopo não eliminam a necessidade de classes**. Devido à maneira como os navegadores renderizam vários seletores CSS, `p { color: red }` será muitas vezes mais lento quando com escopo (ou seja, quando combinado com um seletor de atributo). Se você usar classes ou ids, como em `.example { color: red }`, você praticamente elimina esse impacto no desempenho. -- **Be careful with descendant selectors in recursive components!** For a CSS rule with the selector `.a .b`, if the element that matches `.a` contains a recursive child component, then all `.b` in that child component will be matched by the rule. +- **Tenha cuidado com seletores descendentes em componentes recursivos!** Para uma regra CSS com o seletor `.a .b`, se o elemento que corresponde a `.a` contiver um componente filho recursivo, então todos os `.b` deste componente filho serão mirados pela regra. ## ` ``` -The resulting classes are hashed to avoid collision, achieving the same effect of scoping the CSS to the current component only. +As classes resultantes recebem _hash_ para evitar colisões, alcançando o mesmo efeito de definir o escopo do CSS apenas para o componente atual. -Refer to the [CSS Modules spec](https://github.com/css-modules/css-modules) for more details such as [global exceptions](https://github.com/css-modules/css-modules#exceptions) and [composition](https://github.com/css-modules/css-modules#composition). +Consulte a [especificação de Módulos CSS](https://github.com/css-modules/css-modules) para obter mais detalhes, como [exceções globais](https://github.com/css-modules/css-modules#exceptions) e [composição](https://github.com/css-modules/css-modules#composition). -### Custom Inject Name +### Nome de Injeção Customizado -You can customize the property key of the injected classes object by giving the `module` attribute a value: +Você pode personalizar a chave de propriedade do objeto de classes injetado dando um valor ao atributo `module`: ```vue ``` -### Usage with Composition API +### Uso com API de Composição -The injected classes can be accessed in `setup()` and ` ``` -The actual value will be compiled into a hashed CSS custom property, so the CSS is still static. The custom property will be applied to the component's root element via inline styles and reactively updated if the source value changes. +O valor real será compilado em uma propriedade CSS customizada com _hash_, portanto, o CSS ainda é estático. A propriedade customizada será aplicada ao elemento raiz do componente por meio de estilos _inline_ e atualizada de forma reativa se o valor de origem for alterado. diff --git a/src/api/sfc-tooling.md b/src/api/sfc-tooling.md index bd5bdf7c72..f2d56516d0 100644 --- a/src/api/sfc-tooling.md +++ b/src/api/sfc-tooling.md @@ -1,96 +1,96 @@ -# SFC Tooling +# Ferramentas para SFC -## Online Playgrounds +## Playgrounds Online -You don't need to install anything on your machine to try out Vue SFCs - there are many online playgrounds that allow you to do so right in the browser: +Você não precisa instalar nada em sua máquina para experimentar SFCs do Vue - existem muitos playgrounds online que permitem que você faça isso diretamente no navegador: -- [Vue SFC Playground](https://sfc.vuejs.org) (official, deployed from latest commit) +- [Vue SFC Playground](https://sfc.vuejs.org) (oficial, implantado a partir do último commit) - [VueUse Playground](https://play.vueuse.org) -- [Vue on CodeSandbox](https://codesandbox.io/s/vue-3) -- [Vue on Repl.it](https://replit.com/@templates/VueJS-with-Vite) -- [Vue on Codepen](https://codepen.io/pen/editor/vue) -- [Vue on StackBlitz](https://stackblitz.com/fork/vue) -- [Vue on Components.studio](https://components.studio/create/vue3) -- [Vue on WebComponents.dev](https://webcomponents.dev/create/cevue) +- [Vue no CodeSandbox](https://codesandbox.io/s/vue-3) +- [Vue no Repl.it](https://replit.com/@templates/VueJS-with-Vite) +- [Vue no Codepen](https://codepen.io/pen/editor/vue) +- [Vue no StackBlitz](https://stackblitz.com/fork/vue) +- [Vue em Components.studio](https://components.studio/create/vue3) +- [Vue em WebComponents.dev](https://webcomponents.dev/create/cevue) -It is also recommended to use these online playgrounds to provide reproductions when reporting bugs. +Também é recomendável usar esses playgrounds online para fornecer reproduções ao relatar bugs. -## Project Scaffolding +## Andaimes de Projeto ### Vite -[Vite](https://vitejs.dev/) is a lightweight and fast build tool with first-class Vue SFC support. It is created by Evan You, who is also the author of Vue itself! To get started with Vite + Vue, simply run: +[Vite](https://vitejs.dev/) é uma ferramenta de compilação leve e rápida com suporte a Vue SFC de primeira classe. Ele foi criado por Evan You, que também é o autor do próprio Vue! Para começar com o Vite + Vue, basta executar: ```sh npm init vite@latest ``` -Then select the Vue template and follow the instructions. +Em seguida, selecione o _template_ Vue e siga as instruções. -- To learn more about Vite, check out the [Vite docs](https://vitejs.dev/guide/). -- To configure Vue-specific behavior in a Vite project, for example passing options to the Vue compiler, check out the docs for [@vitejs/plugin-vue](https://github.com/vitejs/vite/tree/main/packages/plugin-vue#readme). +- Para saber mais sobre o Vite, confira a [documentação do Vite](https://vitejs.dev/guide/). +- Para configurar o comportamento específico do Vue em um projeto Vite, por exemplo, passando opções para o compilador Vue, confira a documentação do [@vitejs/plugin-vue](https://github.com/vitejs/vite/tree/main/packages/plugin-vue#readme). -The [SFC Playground](https://sfc.vuejs.org/) also supports downloading the files as a Vite project. +O [SFC Playground](https://sfc.vuejs.org/) também suporta o download dos arquivos como um projeto Vite. ### Vue CLI -[Vue CLI](https://cli.vuejs.org/) is the official webpack-based build tool for Vue projects. To get started with Vue CLI: +[Vue CLI](https://cli.vuejs.org/) é a ferramenta oficial de compilação baseada em webpack para projetos Vue. Para começar com Vue CLI: ```sh npm install -g @vue/cli vue create hello-vue ``` -- To learn more about Vue CLI, check out [Vue CLI docs](https://cli.vuejs.org/guide/installation.html). +- Para saber mais sobre Vue CLI, confira a [documentação do Vue CLI](https://cli.vuejs.org/guide/installation.html). -### Vite or Vue CLI? +### Vite ou Vue CLI? -We recommend starting new projects with Vite as it offers significantly better development experience in terms of dev server startup and HMR update performance ([details](https://vitejs.dev/guide/why.html)). Only go with Vue CLI if you rely on specific webpack features (e.g. Module Federation). +Recomendamos iniciar novos projetos com o Vite, pois oferece uma experiência de desenvolvimento significativamente melhor em termos de inicialização do servidor dev e desempenho de atualização em HMR ([detalhes](https://vitejs.dev/guide/why.html)). Use o Vue CLI apenas se você confiar em recursos específicos do webpack (ex.: Federação de Módulos). -If you are a [Rollup](https://rollupjs.org/) user, you can safely adopt Vite as it uses Rollup for production builds and supports a Rollup-compatible plugin system. [Even Rollup's maintainer recommends Vite as THE web development wrapper for Rollup](https://twitter.com/lukastaegert/status/1412119729431584774). +Se você é um usuário do [Rollup](https://rollupjs.org/), pode adotar o Vite com segurança, pois ele usa o Rollup para compilações de produção e oferece suporte a um sistema de plug-ins compatível com Rollup. [Até o mantenedor do Rollup recomenda o Vite como O _wrapper_ de desenvolvimento web para o Rollup](https://twitter.com/lukastaegert/status/1412119729431584774). -## IDE Support +## Suporte de IDE -The recommended IDE setup is [VSCode](https://code.visualstudio.com/) + the [Volar](https://github.com/johnsoncodehk/volar) extension. Volar provides syntax highlighting and advanced IntelliSense for template expressions, component props and even slots validation. We strongly recommend this setup if you want to get the best possible experience with Vue SFCs, especially if you are also using TypeScript. +A configuração de IDE recomendada é [VSCode](https://code.visualstudio.com/) + a extensão [Volar](https://github.com/johnsoncodehk/volar). O Volar fornece realce de sintaxe e IntelliSense avançado para expressões de _template_, props de componentes e até validação de slots. Recomendamos fortemente esta configuração se você deseja obter a melhor experiência possível com Vue SFCs, especialmente se você também estiver usando TypeScript. -[WebStorm](https://www.jetbrains.com/webstorm/) also provides decent support for Vue SFCs. However, do note as of now its support for ` ``` -## Acknowledgements +## Reconhecimentos -This recipe was based on a contribution from [Kenneth Auchenberg](https://twitter.com/auchenberg), [available here](https://github.com/Microsoft/VSCode-recipes/tree/master/vuejs-cli). +Esta receita foi baseada em uma contribuição de [Kenneth Auchenberg](https://twitter.com/auchenberg), [disponível aqui](https://github.com/Microsoft/VSCode-recipes/tree/master/vuejs-cli). diff --git a/src/guide/composition-api-setup.md b/src/guide/composition-api-setup.md index 56be22e784..6ce076eefb 100644 --- a/src/guide/composition-api-setup.md +++ b/src/guide/composition-api-setup.md @@ -47,7 +47,7 @@ setup(props) { } ``` -If `title` is an optional prop, it could be missing from `props`. In that case, `toRefs` won't create a ref for `title`. Instead you'd need to use `toRef`: +Se `title` for um prop opcional, ele pode estar faltando em `props`. Nesse caso, `toRefs` não criará uma referência para `title`. Em vez disso, você precisaria usar `toRef`: ```js // MyBook.vue diff --git a/src/guide/security.md b/src/guide/security.md index 5f7813e00a..8a1316ac64 100644 --- a/src/guide/security.md +++ b/src/guide/security.md @@ -1,88 +1,88 @@ -# Security +# Segurança -## Reporting Vulnerabilities +## Reportando Vulnerabilidades -When a vulnerability is reported, it immediately becomes our top concern, with a full-time contributor dropping everything to work on it. To report a vulnerability, please email [security@vuejs.org](mailto:security@vuejs.org). +Quando uma vulnerabilidade é reportada, ela imediatamente se torna nossa principal preocupação, com um contribuidor em tempo integral largando tudo para trabalhar nela. Para reportar uma vulnerabilidade, envie um e-mail para [security@vuejs.org](mailto:security@vuejs.org). -While the discovery of new vulnerabilities is rare, we also recommend always using the latest versions of Vue and its official companion libraries to ensure your application remains as secure as possible. +Embora a descoberta de novas vulnerabilidades seja rara, também recomendamos sempre usar as versões mais recentes do Vue e suas bibliotecas complementares oficiais para garantir que seu aplicativo permaneça o mais seguro possível. -## Rule No.1: Never Use Non-trusted Templates +## Regra nº 1: Nunca Use Templates Não Confiáveis -The most fundamental security rule when using Vue is **never use non-trusted content as your component template**. Doing so is equivalent to allowing arbitrary JavaScript execution in your application - and worse, could lead to server breaches if the code is executed during server-side rendering. An example of such usage: +A regra de segurança mais fundamental ao usar o Vue é **nunca use conteúdo não confiável como seu _template_ de componente**. Fazer isso é equivalente a permitir a execução arbitrária de JavaScript em seu aplicativo - e pior, pode levar a violações do servidor se o código for executado durante a renderização do lado do servidor. Um exemplo desse uso: ```js Vue.createApp({ - template: `
` + userProvidedString + `
` // NEVER DO THIS + template: `
` + userProvidedString + `
` // NUNCA FAÇA ISSO }).mount('#app') ``` -Vue templates are compiled into JavaScript, and expressions inside templates will be executed as part of the rendering process. Although the expressions are evaluated against a specific rendering context, due to the complexity of potential global execution environments, it is impractical for a framework like Vue to completely shield you from potential malicious code execution without incurring unrealistic performance overhead. The most straightforward way to avoid this category of problems altogether is to make sure the contents of your Vue templates are always trusted and entirely controlled by you. +Os _templates_ Vue são compilados em JavaScript, e as expressões dentro dos _templates_ serão executadas como parte do processo de renderização. Embora as expressões sejam avaliadas em um contexto de renderização específico, devido à complexidade de ambientes de execução global em potencial, é impraticável para um _framework_ como o Vue protegê-lo completamente de uma possível execução de código malicioso sem incorrer em sobrecarga de desempenho irreal. A maneira mais direta de evitar essa categoria de problemas é garantir que o conteúdo de seus _templates_ Vue seja sempre confiável e totalmente controlado por você. -## What Vue Does to Protect You +## Ações do Vue Para Te Proteger -### HTML content +### conteúdo HTML -Whether using templates or render functions, content is automatically escaped. That means in this template: +Seja usando _templates_ ou funções de renderização, o conteúdo é tratado automaticamente. Isso significa que neste _template_: ```html

{{ userProvidedString }}

``` -if `userProvidedString` contained: +se `userProvidedString` continha: ```js -'' +'' ``` -then it would be escaped to the following HTML: +então seria tratado para o seguinte HTML: ```html -<script>alert("hi")</script> +<script>alert("oi")</script> ``` -thus preventing the script injection. This escaping is done using native browser APIs, like `textContent`, so a vulnerability can only exist if the browser itself is vulnerable. +evitando assim a injeção de script. Esse tratamento é feito usando APIs nativas do navegador, como `textContent`, portanto, uma vulnerabilidade só pode existir se o próprio navegador for vulnerável. -### Attribute bindings +### Vínculos de atributo -Similarly, dynamic attribute bindings are also automatically escaped. That means in this template: +Da mesma forma, os vínculos dinâmicos de atributos também são tratados automaticamente. Isso significa que neste _template_: ```html

- hello + Olá

``` -if `userProvidedString` contained: +se `userProvidedString` continha: ```js -'" onclick="alert(\'hi\')' +'" onclick="alert(\'oi\')' ``` -then it would be escaped to the following HTML: +então seria tratado para o seguinte HTML: ```html -" onclick="alert('hi') +" onclick="alert('oi') ``` -thus preventing the close of the `title` attribute to inject new, arbitrary HTML. This escaping is done using native browser APIs, like `setAttribute`, so a vulnerability can only exist if the browser itself is vulnerable. +evitando assim o fechamento do atributo `title` para injetar um novo HTML arbitrário. Esse tratamento é feito usando APIs nativas do navegador, como `setAttribute`, portanto, uma vulnerabilidade só pode existir se o próprio navegador for vulnerável. -## Potential Dangers +## Potenciais Perigos -In any web application, allowing unsanitized, user-provided content to be executed as HTML, CSS, or JavaScript is potentially dangerous, so should be avoided wherever possible. There are times when some risk may be acceptable though. +Em qualquer aplicativo Web, permitir que conteúdo não sanitizado fornecido pelo usuário seja executado como HTML, CSS ou JavaScript é potencialmente perigoso, portanto, deve ser evitado sempre que possível. Há momentos em que algum risco pode ser aceitável. -For example, services like CodePen and JSFiddle allow user-provided content to be executed, but it's in a context where this is expected and sandboxed to some extent inside iframes. In the cases when an important feature inherently requires some level of vulnerability, it's up to your team to weigh the importance of the feature against the worst-case scenarios the vulnerability enables. +Por exemplo, serviços como CodePen e JSFiddle permitem que o conteúdo fornecido pelo usuário seja executado, mas é em um contexto em que isso é esperado e protegido até certo ponto dentro de iframes. Nos casos em que um recurso importante requer inerentemente algum nível de vulnerabilidade, cabe à sua equipe avaliar a importância do recurso em relação aos piores cenários que a vulnerabilidade permite. -### Injecting HTML +### Injetando HTML -As you learned earlier, Vue automatically escapes HTML content, preventing you from accidentally injecting executable HTML into your application. However, in cases where you know the HTML is safe, you can explicitly render HTML content: +Como aprendeu anteriormente, o Vue trata automaticamente o conteúdo HTML, evitando que você injete acidentalmente HTML executável em seu aplicativo. No entanto, nos casos em que sabe que o HTML é seguro, você pode renderizar explicitamente o conteúdo HTML: -- Using a template: +- Usando um _template_: ```html
``` -- Using a render function: +- Usando uma função de renderização: ```js h('div', { @@ -90,54 +90,54 @@ As you learned earlier, Vue automatically escapes HTML content, preventing you f }) ``` -- Using a render function with JSX: +- Usando uma função de renderização com JSX: ```jsx
``` -:::tip -Note that user-provided HTML can never be considered 100% safe unless it's in a sandboxed iframe or in a part of the app where only the user who wrote that HTML can ever be exposed to it. Additionally, allowing users to write their own Vue templates brings similar dangers. +:::tip Nota +Observe que o HTML fornecido pelo usuário nunca pode ser considerado 100% seguro, a menos que esteja em um iframe em área restrita ou em uma parte do aplicativo em que apenas o usuário que escreveu esse HTML possa ser exposto a ele. Além disso, permitir que os usuários escrevam seus próprios _templates_ Vue traz perigos semelhantes. ::: -### Injecting URLs +### Injetando URLs -In a URL like this: +Em uma URL como esta: ```html - click me + clique em mim ``` -There's a potential security issue if the URL has not been "sanitized" to prevent JavaScript execution using `javascript:`. There are libraries such as [sanitize-url](https://www.npmjs.com/package/@braintree/sanitize-url) to help with this, but note: +Há um possível problema de segurança se o URL não tiver sido "sanitizado" para impedir a execução de JavaScript usando `javascript:`. Existem bibliotecas como [sanitize-url](https://www.npmjs.com/package/@braintree/sanitize-url) para ajudar com isso, mas observe: -:::tip -If you're ever doing URL sanitization on the frontend, you already have a security issue. User-provided URLs should always be sanitized by your backend before even being saved to a database. Then the problem is avoided for _every_ client connecting to your API, including native mobile apps. Also note that even with sanitized URLs, Vue cannot help you guarantee that they lead to safe destinations. +:::tip Nota +Se você está fazendo limpeza de URL no frontend, já tem um problema de segurança. Os URLs fornecidos pelo usuário devem sempre ser sanitizados pelo seu back-end antes mesmo de serem salvos em um banco de dados. Assim, o problema é evitado para _todos_ os clientes que se conectam à sua API, incluindo aplicativos móveis nativos. Observe também que, mesmo com URLs sanitizadas, o Vue não pode ajudá-lo a garantir que elas levem a destinos seguros. ::: -### Injecting Styles +### Injetando Estilos -Looking at this example: +Olhando para este exemplo: ```html - click me + clique em mim ``` -let's assume that `sanitizedUrl` has been sanitized, so that it's definitely a real URL and not JavaScript. With the `userProvidedStyles`, malicious users could still provide CSS to "click jack", e.g. styling the link into a transparent box over the "Log in" button. Then if `https://user-controlled-website.com/` is built to resemble the login page of your application, they might have just captured a user's real login information. +vamos supor que `sanitizedUrl` tenha sido sanitizado, então é definitivamente uma URL real e não JavaScript. Com o `userProvidedStyles`, usuários mal-intencionados ainda podem fornecer CSS para "_click jack_", por exemplo. estilizando o link em uma caixa transparente sobre o botão "Log in". Então, se `https://user-control-website.com/` for construído para se parecer com a página de login do seu aplicativo, eles podem ter capturado as informações de login reais de um usuário. -You may be able to imagine how allowing user-provided content for a ` ``` -To keep your users fully safe from click jacking, we recommend only allowing full control over CSS inside a sandboxed iframe. Alternatively, when providing user control through a style binding, we recommend using its [object syntax](class-and-style.html#object-syntax-2) and only allowing users to provide values for specific properties it's safe for them to control, like this: +Para manter seus usuários totalmente protegidos contra o _click jacking_, recomendamos permitir apenas o controle total sobre o CSS dentro de um iframe em área restrita. Como alternativa, ao fornecer controle ao usuário por meio de um estilo com vínculo, recomendamos usar sua [sintaxe de objeto](class-and-style.html#sintaxe-de-objeto-2) e permitir que os usuários forneçam apenas valores para propriedades específicas que sejam seguras para eles controlarem , assim: ```html - click me + clique em mim ``` -### Injecting JavaScript +### Injetando JavaScript -We strongly discourage ever rendering a ` ``` -when used like this: +quando usado assim: ```html ``` -...will generate this HTML: +...irá gerar este HTML: ```html ``` -## 3.x Behavior +## Comportamento v3.x -`$attrs` contains _all_ attributes, which makes it easier to apply all of them to a different element. The example from above now generates the following HTML: +`$attrs` contém _todos_ atributos, o que facilita a aplicação de todos eles a um elemento diferente. O exemplo acima agora gera o seguinte HTML: ```html