Merge branch 'master' of https://github.com/vuejs/docs-next

ErickPetru · ErickPetru · commit 4d1fdd395037 · 2020-09-22T20:05:55.000-03:00
diff --git a/README.md b/README.md
@@ -8,7 +8,7 @@ Este é o repositório oficial da tradução para português brasileiro da docum
 
 Se você quer participar da tradução, ajudando a traduzir conteúdos que ainda permanecem em inglês e/ou ajudando a revisar conteúdos já traduzidos, sinta-se em casa. Para entender como tudo funciona e saber por onde começar, leia nosso guia de [Contribuição com a Documentação](https://vuejsbr-docs-next.netlify.app/guide/contributing/translations.html).
 
-> O _workflow_ para a realização da tradução está detalhadamente descrito em [Como colaborar com a versão em português?](https://vuejsbr-docs-next.netlify.app/guide/contributing/translations.html#como-colaborar-com-a-versao-em-portugues). Ler é o primeiro passo para todo colaborador em potencial.
+> O _workflow_ para a realização da tradução está detalhadamente descrito em [Como colaborar com a versão em português?](https://vuejsbr-docs-next.netlify.app/guide/contributing/translations.html#como-colaborar-com-a-versao-em-portugues) Ler é o primeiro passo para todo colaborador em potencial.
 
 ## Escrevendo
 
diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js
@@ -110,38 +110,38 @@ const sidebar = {
       title: 'Migration Guide',
       collapsable: true,
       children: [
-        'migration/introduction',
-        'migration/array-refs',
-        'migration/async-components',
-        'migration/attribute-coercion',
-        'migration/custom-directives',
-        'migration/custom-elements-interop',
-        'migration/data-option',
-        'migration/events-api',
-        'migration/filters',
-        'migration/fragments',
-        'migration/functional-components',
-        'migration/global-api',
-        'migration/global-api-treeshaking',
-        'migration/inline-template-attribute',
-        'migration/key-attribute',
-        'migration/keycode-modifiers',
-        'migration/props-default-this',
-        'migration/render-function-api',
-        'migration/slots-unification',
-        'migration/transition',
-        'migration/v-model',
-        'migration/v-if-v-for',
-        'migration/v-bind'
+        '/guide/migration/introduction',
+        '/guide/migration/array-refs',
+        '/guide/migration/async-components',
+        '/guide/migration/attribute-coercion',
+        '/guide/migration/custom-directives',
+        '/guide/migration/custom-elements-interop',
+        '/guide/migration/data-option',
+        '/guide/migration/events-api',
+        '/guide/migration/filters',
+        '/guide/migration/fragments',
+        '/guide/migration/functional-components',
+        '/guide/migration/global-api',
+        '/guide/migration/global-api-treeshaking',
+        '/guide/migration/inline-template-attribute',
+        '/guide/migration/key-attribute',
+        '/guide/migration/keycode-modifiers',
+        '/guide/migration/props-default-this',
+        '/guide/migration/render-function-api',
+        '/guide/migration/slots-unification',
+        '/guide/migration/transition',
+        '/guide/migration/v-model',
+        '/guide/migration/v-if-v-for',
+        '/guide/migration/v-bind'
       ]
     },
     {
       title: 'Contribute to the Docs',
       collapsable: true,
       children: [
-        'contributing/writing-guide',
-        'contributing/doc-style-guide',
-        'contributing/translations'
+        '/guide/contributing/writing-guide',
+        '/guide/contributing/doc-style-guide',
+        '/guide/contributing/translations'
       ]
     }
   ],
diff --git a/src/.vuepress/theme/components/Navbar.vue b/src/.vuepress/theme/components/Navbar.vue
@@ -26,7 +26,7 @@
       <SearchBox
         v-if="
           isAlgoliaSearch === false &&
-            !(
+            (
               $site.themeConfig.search !== false &&
               $page.frontmatter.search !== false
             )
@@ -68,7 +68,7 @@ export default {
     },
 
     isAlgoliaSearch() {
-      return this.algolia && this.algolia.apiKey && this.algolia.indexName
+      return !!(this.algolia && this.algolia.apiKey && this.algolia.indexName)
     }
   },
 
diff --git a/src/api/application-config.md b/src/api/application-config.md
@@ -8,20 +8,6 @@ const app = Vue.createApp({})
 app.config = {...}
 ```
 
-## devtools
-
-- **Type:** `boolean`
-
-- **Default:** `true` (`false` in production builds)
-
-- **Usage:**
-
-```js
-app.config.devtools = true
-```
-
-Configure whether to allow [vue-devtools](https://github.com/vuejs/vue-devtools) inspection. This option's default value is `true` in development builds and `false` in production builds. You can set it to `true` to enable inspection for production builds.
-
 ## errorHandler
 
 - **Type:** `Function`
diff --git a/src/api/computed-watch-api.md b/src/api/computed-watch-api.md
@@ -132,7 +132,7 @@ watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => {
 **Typing:**
 
 ```ts
-// wacthing single source
+// watching single source
 function watch<T>(
   source: WatcherSource<T>,
   callback: (
diff --git a/src/api/global-api.md b/src/api/global-api.md
@@ -192,7 +192,7 @@ const AsyncComp = defineAsyncComponent({
   // The error component will be displayed if a timeout is
   // provided and exceeded. Default: Infinity.
   timeout: 3000,
-  // Defining if component is suspensible
+  // Defining if component is suspensible. Default: true.
   suspensible: false,
   /**
    *
@@ -201,7 +201,16 @@ const AsyncComp = defineAsyncComponent({
    * @param {*} fail  End of failure
    * @param {*} attempts Maximum allowed retries number
    */
-  onError(error, retry, fail, attempts) {},
+  onError(error, retry, fail, attempts) {
+    if (error.message.match(/fetch/) && attempts <= 3) {
+      // retry on fetch errors, 3 max attempts
+      retry()
+    } else {
+      // Note that retry/fail are like resolve/reject of a promise:
+      // one of them must be called for the error handling to continue.
+      fail()
+    }
+  },
 })
 ```
 
@@ -233,9 +242,9 @@ render() {
 
 ### Arguments
 
-Accepts one argument: `component`
+Accepts one argument: `name`
 
-#### component
+#### name
 
 - **Type:** `String`
 
diff --git a/src/api/options-misc.md b/src/api/options-misc.md
@@ -4,14 +4,35 @@
 
 - **Type:** `string`
 
-- **Restriction:** only respected when used as a component option.
-
 - **Details:**
 
   Allow the component to recursively invoke itself in its template. Note that when a component is registered globally with `Vue.createApp({}).component({})`, the global ID is automatically set as its name.
 
   Another benefit of specifying a `name` option is debugging. Named components result in more helpful warning messages. Also, when inspecting an app in the [vue-devtools](https://github.com/vuejs/vue-devtools), unnamed components will show up as `<AnonymousComponent>`, which isn't very informative. By providing the `name` option, you will get a much more informative component tree.
 
+## delimiters
+
+- **Type:** `Array<string>`
+
+- **Default:** `{{ "['\u007b\u007b', '\u007d\u007d']" }}` 
+
+- **Restrictions:** This option is only available in the full build, with in-browser template compilation.
+
+- **Details:**
+
+  Sets the delimiters used for text interpolation within the template.
+
+  Typically this is used to avoid conflicting with server-side frameworks that also use mustache syntax.
+
+- **Example:**
+
+  ```js
+  Vue.createApp({
+    // Delimiters changed to ES6 template string style
+    delimiters: ['${', '}']
+  })
+  ```
+
 ## inheritAttrs
 
 - **Type:** `boolean`
@@ -22,14 +43,13 @@
 
   By default, parent scope attribute bindings that are not recognized as props will "fallthrough". This means that when we have a single-root component, these bindings will be applied to the root element of the child component as normal HTML attributes. When authoring a component that wraps a target element or another component, this may not always be the desired behavior. By setting `inheritAttrs` to `false`, this default behavior can be disabled. The attributes are available via the `$attrs` instance property and can be explicitly bound to a non-root element using `v-bind`.
 
-  Note: this option does **not** affect `class` and `style` bindings.
-
 - **Usage:**
 
   ```js
   app.component('base-input', {
     inheritAttrs: false,
     props: ['label', 'value'],
+    emits: ['input'],
     template: `
       <label>
         {{ label }}
diff --git a/src/guide/a11y-resources.md b/src/guide/a11y-resources.md
@@ -24,18 +24,13 @@
 - Automated Tools
   - [Lighthouse](https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk)
   - [WAVE](https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh)
-
 - Color Tools
   - [WebAim Color Contrast](https://webaim.org/resources/contrastchecker/)
   - [WebAim Link Color Contrast](https://webaim.org/resources/linkcontrastchecker)
-
 - Other Helpful Tools
   - [HeadingMap](https://chrome.google.com/webstore/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi?hl=en…)
-  
   - [Color Oracle](https://colororacle.org)
-  
   - [Focus Indicator](https://chrome.google.com/webstore/detail/focus-indicator/heeoeadndnhebmfebjccbhmccmaoedlf?hl=en-US…)
-  
   - [NerdeFocus](https://chrome.google.com/webstore/detail/nerdefocus/lpfiljldhgjecfepfljnbjnbjfhennpd?hl=en-US…)
 
 ## Users
@@ -45,11 +40,8 @@ The World Health Organization estimates that 15% of the world's population has s
 There are a huge range of disabilities, which can be divided roughly into four categories:
 
 - _[Visual](https://webaim.org/articles/visual/)_ - These users can benefit from the use of screen readers, screen magnification, controlling screen contrast, or braille display.
-
 - _[Auditory](https://webaim.org/articles/auditory/)_ - These users can benefit from captioning, transcripts or sign   language video.
-
-- _[Motor](https://webaim.org/articles/motor/)_ - These users can benefit from a range of [assistive technologies for motor impairments](https://webaim.org/articles/motor/assistive): voice recognition software, eye tracking, single-switch access, head wand, single-switch access, sip and puff switch, oversized trackball mouse, adaptive keyboard or other assistive technologies.
-
+- _[Motor](https://webaim.org/articles/motor/)_ - These users can benefit from a range of [assistive technologies for motor impairments](https://webaim.org/articles/motor/assistive): voice recognition software, eye tracking, single-switch access, head wand, sip and puff switch, oversized trackball mouse, adaptive keyboard or other assistive technologies.
 - _[Cognitive](https://webaim.org/articles/cognitive/)_ - These users can benefit from supplemental media, structural organization of content, clear and simple writing.
 
 Check out the following links from WebAim to understand from users:
diff --git a/src/guide/a11y-semantics.md b/src/guide/a11y-semantics.md
@@ -60,7 +60,7 @@ Though you might have seen labels wrapping the input fields like this:
 </label>
 ```
 
-Explicitly setting the labels with an matching id is better supported by assistive technology.
+Explicitly setting the labels with a matching id is better supported by assistive technology.
 :::
 
 #### aria-label
diff --git a/src/guide/component-slots.md b/src/guide/component-slots.md
@@ -274,7 +274,7 @@ Attributes bound to a `<slot>` element are called **slot props**. Now, in the pa
 <todo-list>
   <template v-slot:default="slotProps">
     <i class="fas fa-check"></i>
-    <span class="green">{{ slotProps.item }}<span>
+    <span class="green">{{ slotProps.item }}</span>
   </template>
 </todo-list>
 ```
@@ -290,7 +290,7 @@ In cases like above, when _only_ the default slot is provided content, the compo
 ```html
 <todo-list v-slot:default="slotProps">
   <i class="fas fa-check"></i>
-  <span class="green">{{ slotProps.item }}<span>
+  <span class="green">{{ slotProps.item }}</span>
 </todo-list>
 ```
 
@@ -299,7 +299,7 @@ This can be shortened even further. Just as non-specified content is assumed to
 ```html
 <todo-list v-slot="slotProps">
   <i class="fas fa-check"></i>
-  <span class="green">{{ slotProps.item }}<span>
+  <span class="green">{{ slotProps.item }}</span>
 </todo-list>
 ```
 
@@ -310,7 +310,7 @@ Note that the abbreviated syntax for default slot **cannot** be mixed with named
 <todo-list v-slot="slotProps">
   <todo-list v-slot:default="slotProps">
     <i class="fas fa-check"></i>
-    <span class="green">{{ slotProps.item }}<span>
+    <span class="green">{{ slotProps.item }}</span>
   </todo-list>
   <template v-slot:other="otherSlotProps">
     slotProps is NOT available here
@@ -324,7 +324,7 @@ Whenever there are multiple slots, use the full `<template>` based syntax for _a
 <todo-list>
   <template v-slot:default="slotProps">
     <i class="fas fa-check"></i>
-    <span class="green">{{ slotProps.item }}<span>
+    <span class="green">{{ slotProps.item }}</span>
   </template>
 
   <template v-slot:other="otherSlotProps">
@@ -357,7 +357,7 @@ This can make the template much cleaner, especially when the slot provides many
 ```html
 <todo-list v-slot="{ item: todo }">
   <i class="fas fa-check"></i>
-  <span class="green">{{ todo }}<span>
+  <span class="green">{{ todo }}</span>
 </todo-list>
 ```
 
diff --git a/src/guide/composition-api-setup.md b/src/guide/composition-api-setup.md
@@ -104,13 +104,16 @@ If `setup` returns an object, the properties on the object can be accessed in th
 ```vue-html
 <!-- MyBook.vue -->
 <template>
-  <div>{{ props.collectionName }}: {{ readersNumber }} {{ book.title }}</div>
+  <div>{{ collectionName }}: {{ readersNumber }} {{ book.title }}</div>
 </template>
 
 <script>
   import { ref, reactive } from 'vue'
 
   export default {
+    props: {
+      collectionName: String
+    },
     setup(props) {
       const readersNumber = ref(0)
       const book = reactive({ title: 'Vue 3 Guide' })
diff --git a/src/guide/installation.md b/src/guide/installation.md
@@ -30,7 +30,7 @@ Para produção, recomendamos vinculá-lo a uma versão e uma distribuição _(b
 
 ## NPM
 
-NPM é o método de instalação que recomendamos ao construir aplicações de larga escala com o Vue. Ele combina perfeitamente com empacotadores de módulos _(module bundlers)_, como o [Webpack](https://webpack.js.org/) ou o [Browserify](http://browserify.org/). Vue também oferece ferramentas que auxiliam na criação de [Componentes Single File](../guide/single-file-component.html).
+NPM é o método de instalação que recomendamos ao construir aplicações de larga escala com o Vue. Ele combina perfeitamente com empacotadores de módulos _(module bundlers)_, como o [Webpack](https://webpack.js.org/) ou o [Rollup](https://rollupjs.org/). Vue também oferece ferramentas que auxiliam na criação de [Componentes Single File](../guide/single-file-component.html).
 
 ```bash
 # última versão estável
@@ -45,12 +45,12 @@ Vue oferece uma [CLI oficial](https://github.com/vuejs/vue-cli) para projetar, r
 A CLI pressupõe que você já possui conhecimento prévio em Node.js e das ferramentas de distribuição _(build tools)_ associadas. Se Vue ou as ferramentas de distribuição _frontend_ associadas são assuntos novos para você, recomendamos fortemente que você passe por todo <a href="./">o guia</a> antes de utilizar a CLI.
 :::
 
-Para o Vue 3, você deve utilizar, no mínimo, a Vue CLI v4.5, disponível no `npm` através do `@vue/cli@next`. Para atualizar sua Vue CLI, você deve reinstalar o pacote `@vue/cli` globalmente, em sua última versão:
+Para o Vue 3, você deve utilizar, no mínimo, a Vue CLI v4.5, disponível no `npm` como `@vue/cli`. Para atualizá-lo, você deve reinstalar o pacote `@vue/cli` globalmente, em sua última versão:
 
 ```bash
-yarn global add @vue/cli@next
+yarn global add @vue/cli
 # OU
-npm install -g @vue/cli@next
+npm install -g @vue/cli
 ```
 
 Logo em seguida, em seus projetos Vue, execute:
diff --git a/src/guide/migration/filters.md b/src/guide/migration/filters.md
@@ -7,7 +7,7 @@ badges:
 
 ## Overview
 
-Filters are removed from Vue 3.0 and no longer be supported.
+Filters are removed from Vue 3.0 and no longer supported.
 
 ## 2.x Syntax
 
diff --git a/src/guide/migration/introduction.md b/src/guide/migration/introduction.md
@@ -1,6 +1,10 @@
 # Introduction
 
-This guide is primarily for users with prior Vue 2 experience who want to learn about the new features and changes in Vue 3. The lists may look long, but it is because we want to be as thorough as possible and provide detailed examples for every documented change. **This is not something you have to read from top to bottom before trying out Vue 3.**
+::: info 
+New to Vue.js? Check out our [Essentials Guide](/guide/introduction.html) to get started. 
+:::
+
+This guide is primarily for users with prior Vue 2 experience who want to learn about the new features and changes in Vue 3. **This is not something you have to read from top to bottom before trying out Vue 3.** While it looks like a lot has changed, a lot of what you know and love about Vue is still the same; but we wanted to be as thorough as possible and provide detailed explanations and examples for every documented change. 
 
 - [Quickstart](#quickstart)
 - [Notable New Features](#notable-new-features)
@@ -92,7 +96,7 @@ The following consists a list of breaking changes from 2.x:
 - [The `data` option from mixins is now merged shallowly](/guide/migration/data-option.html#mixin-merge-behavior-change)
 - [Attributes coercion strategy changed](/guide/migration/attribute-coercion.html)
 - [Some transition classes got a rename](/guide/migration/transition.html)
-- [When watching an array, the callback will only trigger when the array is replaced. If you need to to trigger on mutation, the `deep` option must be specified.](/guide/migration/watch.html)
+- [When watching an array, the callback will only trigger when the array is replaced. If you need to trigger on mutation, the `deep` option must be specified.](/guide/migration/watch.html)
 - `<template>` tags with no special directives (`v-if/else-if/else`, `v-for`, or `v-slot`) are now treated as plain elements and will result in a native `<template>` element instead of rendering its inner content.
 - In Vue 2.x, application root container's `outerHTML` is replaced with root component template (or eventually compiled to a template, if root component has no template/render option). Vue 3.x now uses application container's `innerHTML` instead - this means the container itself is no longer considered part of the template.
 
diff --git a/src/guide/mixins.md b/src/guide/mixins.md
diff --git a/src/guide/testing.md b/src/guide/testing.md
diff --git a/src/guide/typescript-support.md b/src/guide/typescript-support.md
diff --git a/src/style-guide/README.md b/src/style-guide/README.md
