Merge branch 'master' of https://github.com/vuejs/vuejs.org

Author: NataliaTepluhina

.github/pull_request_template.md

@@ -1,3 +1,3 @@
 Note
 ====
-We're currently in the process of migrating Vue's documentation to v3. To ensure smooth progress, only PR's that fix critical bugs and/or misinformation will be accepted. If yours is not one of them, consider [creating an issue](https://github.com/vuejs/vuejs.org/issues/new) instead and we will label it as `post-3.0` for later tackling.
+This repository is for Vue 1.x and 2.x only. Issues and pull requests related to 3.x are managed in the v3 doc repo: https://github.com/vuejs/docs-next.

README.md

@@ -1,5 +1,7 @@
 # vuejs.org
 
+> Important: This repository is for Vue 1.x and 2.x only. Issues and pull requests related to 3.x are managed in the [v3 doc repo](https://github.com/vuejs/docs-next).
+
 This site is built with [hexo](http://hexo.io/). Site content is written in Markdown format located in `src`. Pull requests welcome!
 
 ## Writing

src/v2/api/index.md

@@ -1382,10 +1382,14 @@ type: api
 
 - **Read only**
 
+- **Reactive?** No
+
 - **Details:**
 
   Used to programmatically access content [distributed by slots](../guide/components.html#Content-Distribution-with-Slots). Each [named slot](../guide/components.html#Named-Slots) has its own corresponding property (e.g. the contents of `v-slot:foo` will be found at `vm.$slots.foo`). The `default` property contains either nodes not included in a named slot or contents of `v-slot:default`.
 
+  Please note that slots are **not** reactive. If you need a component to re-render based on changes to data passed to a slot, we suggest considering a different strategy that relies on a reactive instance option, such as `props` or `data`.
+
   **Note:** `v-slot:foo` is supported in v2.6+. For older versions, you can use the [deprecated syntax](../guide/components-slots.html#Deprecated-Syntax).
 
   Accessing `vm.$slots` is most useful when writing a component with a [render function](../guide/render-function.html).

src/v2/guide/comparison.md

@@ -111,7 +111,7 @@ React is renowned for its steep learning curve. Before you can really get starte
 While Vue scales up just as well as React, it also scales down just as well as jQuery. That's right - to get started, all you have to do is drop a single script tag into the page:
 
 ``` html
-<script src="https://cdn.jsdelivr.net/npm/vue"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
 ```
 
 Then you can start writing Vue code and even ship the minified version to production without feeling guilty or having to worry about performance problems.

src/v2/guide/components-dynamic-async.md

@@ -106,6 +106,7 @@ new Vue({
   background: #f0f0f0;
   margin-bottom: -1px;
   margin-right: -1px;
+  overflow-anchor: none;
 }
 .dynamic-component-demo-tab-button:hover {
   background: #e0e0e0;

src/v2/guide/components-props.md

@@ -347,6 +347,7 @@ This pattern allows you to use base components more like raw HTML elements, with
 
 ```html
 <base-input
+  label="Username:"
   v-model="username"
   required
   placeholder="Enter your username"

src/v2/guide/index.md

@@ -24,14 +24,14 @@ The easiest way to try out Vue.js is using the [Hello World example](https://cod
 
 ``` html
 <!-- development version, includes helpful console warnings -->
-<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
 ```
 
 or:
 
 ``` html
 <!-- production version, optimized for size and speed -->
-<script src="https://cdn.jsdelivr.net/npm/vue"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
 ```
 
 The [Installation](installation.html) page provides more options of installing Vue. Note: We **do not** recommend that beginners start with `vue-cli`, especially if you are not yet familiar with Node.js-based build tools.

src/v2/guide/installation.md

@@ -41,7 +41,7 @@ Simply download and include with a script tag. `Vue` will be registered as a glo
 For prototyping or learning purposes, you can use the latest version with:
 
 ``` html
-<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
 ```
 
 For production, we recommend linking to a specific version number and build to avoid unexpected breakage from newer versions:
@@ -84,7 +84,7 @@ Vue provides an [official CLI](https://github.com/vuejs/vue-cli) for quickly sca
 
 ## Explanation of Different Builds
 
-In the [`dist/` directory of the NPM package](https://cdn.jsdelivr.net/npm/vue/dist/) you will find many different builds of Vue.js. Here's an overview of the difference between them:
+In the [`dist/` directory of the NPM package](https://cdn.jsdelivr.net/npm/vue@2/dist/) you will find many different builds of Vue.js. Here's an overview of the difference between them:
 
 | | UMD | CommonJS | ES Module (for bundlers) | ES Module (for browsers) |
 | --- | --- | --- | --- | --- |
@@ -101,7 +101,7 @@ In the [`dist/` directory of the NPM package](https://cdn.jsdelivr.net/npm/vue/d
 
 - **Runtime**: code that is responsible for creating Vue instances, rendering and patching virtual DOM, etc. Basically everything minus the compiler.
 
-- **[UMD](https://github.com/umdjs/umd)**: UMD builds can be used directly in the browser via a `<script>` tag. The default file from jsDelivr CDN at [https://cdn.jsdelivr.net/npm/vue](https://cdn.jsdelivr.net/npm/vue) is the Runtime + Compiler UMD build (`vue.js`).
+- **[UMD](https://github.com/umdjs/umd)**: UMD builds can be used directly in the browser via a `<script>` tag. The default file from jsDelivr CDN at [https://cdn.jsdelivr.net/npm/vue@2](https://cdn.jsdelivr.net/npm/vue@2) is the Runtime + Compiler UMD build (`vue.js`).
 
 - **[CommonJS](http://wiki.commonjs.org/wiki/Modules/1.1)**: CommonJS builds are intended for use with older bundlers like [browserify](http://browserify.org/) or [webpack 1](https://webpack.github.io). The default file for these bundlers (`pkg.main`) is the Runtime only CommonJS build (`vue.runtime.common.js`).
 

src/v2/guide/instance.md

@@ -24,10 +24,10 @@ A Vue application consists of a **root Vue instance** created with `new Vue`, op
 Root Instance
 └─ TodoList
    ├─ TodoItem
-   │  ├─ DeleteTodoButton
-   │  └─ EditTodoButton
+   │  ├─ TodoButtonDelete
+   │  └─ TodoButtonEdit
    └─ TodoListFooter
-      ├─ ClearTodosButton
+      ├─ TodosButtonClear
       └─ TodoListStatistics
 ```
 

src/v2/guide/syntax.md

@@ -98,7 +98,7 @@ These expressions will be evaluated as JavaScript in the data scope of the owner
 {{ if (ok) { return message } }}
 ```
 
-<p class="tip">Template expressions are sandboxed and only have access to a [whitelist of globals](https://github.com/vuejs/vue/blob/v2.6.10/src/core/instance/proxy.js#L9) such as `Math` and `Date`. You should not attempt to access user defined globals in template expressions.</p>
+<p class="tip">Template expressions are sandboxed and only have access to a [whitelist of globals](https://github.com/vuejs/vue/blob/v2.6.10/src/core/instance/proxy.js#L9) such as `Math` and `Date`. You should not attempt to access user-defined globals in template expressions.</p>
 
 ## Directives
 
@@ -167,7 +167,7 @@ Dynamic argument expressions have some syntax constraints because certain charac
 
 The workaround is to either use expressions without spaces or quotes, or replace the complex expression with a computed property.
 
-When using in-DOM templates (templates directly written in an HTML file), you should also avoid naming keys with uppercase characters, as browsers will coerce attribute names into lowercase:
+When using in-DOM templates (i.e., templates written directly in an HTML file), you should also avoid naming keys with uppercase characters, as browsers will coerce attribute names into lowercase:
 
 ``` html
 <!--

src/v2/guide/team.md

@@ -412,19 +412,19 @@ order: 803
       languages: ['hi', 'en'],
       work: {
         role: 'Software Engineer',
-        org: 'Myntra',
-        orgUrl: 'https://www.myntra.com/'
+        org: 'Grammarly',
+        orgUrl: 'https://grammarly.com/'
       },
       github: 'znck',
       twitter: 'znck0',
       reposOfficial: [
         'rollup-plugin-vue', 'vue-issue-helper'
       ],
       reposPersonal: [
-        'keynote', 'bootstrap-for-vue', 'vue-interop'
+        'vue-developer-experience', 'prop-types', 'grammarly'
       ],
       links: [
-        'https://znck.me', 'https://www.codementor.io/znck'
+        'https://znck.me'
       ]
     },
     {
@@ -795,6 +795,7 @@ order: 803
         role: 'Organizer',
         org: 'VueConf US'
       },
+      imageUrl:'https://pbs.twimg.com/profile_images/1541624512/profile-pic-09-11-2011_400x400.png',
       twitter: 'prpatel',
       links: [
         'https://us.vuejs.org/'
@@ -809,6 +810,7 @@ order: 803
         role: 'Organizer',
         org: 'VueConf US'
       },
+      imageUrl:'https://pbs.twimg.com/profile_images/916531463905992706/MNvTkO5K_400x400.jpg',
       twitter: 'vincentmayers',
       links: [
         'https://us.vuejs.org/'
@@ -823,6 +825,7 @@ order: 803
         role: 'Creator',
         org: 'Vue.js Amsterdam'
       },
+      imageUrl: 'https://pbs.twimg.com/profile_images/1123492769299877888/aviXE_M5_400x400.jpg',
       twitter: 'lukevscostas',
       linkedin: 'luke-kenneth-thomas-578b3916a',
       links: [
@@ -838,6 +841,7 @@ order: 803
         role: 'Event Manager',
         org: 'Vue.js Amsterdam'
       },
+      imageUrl:'https://pbs.twimg.com/profile_images/1110510517951627269/LDzDyd4N_400x400.jpg',
       twitter: 'josgerards88',
       linkedin: 'josgerards',
       links: [

src/v2/guide/testing.md

@@ -0,0 +1,168 @@
+---
+title: Testing
+type: guide
+order: 402
+---
+
+## Introduction
+
+When it comes to building reliable applications, tests can play a critical role in an individual or team's ability to build new features, refactor code, fix bugs, etc. While there are many schools of thought with testing, there are three categories often discussed in the context of web applications:
+
+- Unit Testing
+- Component Testing
+- End-To-End (E2E) Testing
+
+This section aims to provide guidance to navigating the testing ecosystem and choosing the right tools for your Vue application or component library.
+
+## Unit Testing
+
+### Introduction
+
+Unit tests allow you to test individual units of code in isolation. The purpose of unit testing is to provide developers with confidence in their code. By writing thorough, meaningful tests, you achieve the confidence that as new features are built or your code is refactored your application will remain functional and stable.
+
+Unit testing a Vue application does not significantly differ from testing other types of applications.
+
+### Choosing Your Framework
+
+Since unit testing advice is often framework-agnostic, here are some basic guidelines to keep in mind when evaluating which unit testing tool is best for your application.
+
+#### First-class error reporting
+
+When tests fail, it is critical that your unit testing framework provides useful errors. This is the job of the assertion library. An assertion with high-quality error messages helps minimize the amount of time it takes to debug the problem. In addition to simply telling you what test is failing, assertion libraries provide context for why a test fails, e.g., what is expected vs what was received.
+
+Some unit testing frameworks, like Jest, include assertion libraries. Others, like Mocha, require you to install assertion libraries separately (usually Chai).
+
+#### Active community and team
+
+Since the majority of unit testing frameworks are open-source, having a community that is active can be critical to some teams that will be maintaining their tests for a long period of time and needs to ensure that a project will be actively maintained. In addition, having an active community has the benefit of providing more support whenever you run into issues.
+
+### Frameworks
+
+While there are many tools in the ecosystem, here are some common unit testing tools that are being used in the Vue.js ecosystem.
+
+#### Jest
+
+Jest is a JavaScript test framework that is focused on simplicity. One of its unique features is the ability to take snapshots of tests in order to provide an alternative means of verifying units of your application.
+
+**Resources:**
+
+- [Official Jest Website](https://jestjs.io)
+- [Official Vue 2 CLI Plugin - Jest](https://cli.vuejs.org/core-plugins/unit-jest.html)
+
+#### Mocha
+
+Mocha is a JavaScript test framework that is focused on being flexible. Because of this flexibility, it allows you to choose different libraries to fulfill other common features such as spying (e.g., Sinon) and assertions (e.g., Chai). Another unique feature of Mocha is that it can also execute tests in the browser in addition to Node.js.
+
+**Resources:**
+
+- [Official Mocha Website](https://mochajs.org)
+- [Official Vue CLI Plugin - Mocha](https://cli.vuejs.org/core-plugins/unit-mocha.html)
+
+## Component Testing
+
+### Introduction
+
+To test most Vue components, they must be mounted to the DOM (either virtual or real) in order to fully assert that they are working. This is another framework-agnostic concept. As a result, component testing frameworks were created to give users the ability to do this in a reliable way while also providing Vue-specific conveniences such as integrations for Vuex, Vue Router, and other Vue plugins.
+
+### Choosing Your Framework
+
+The following section provides guidelines on things to keep in mind when evaluating which component testing framework is best for your application.
+
+#### Optimal compatibility with the Vue ecosystem
+
+It should be no surprise that one of the first criteria is that a component testing library should have is being as compatible with the Vue ecosystem as possible. While this may seem comprehensive, some key integration areas to keep in mind include single file components (SFCs), Vuex, Vue Router, and any other Vue specific plugins that your application relies on.
+
+#### First-class error reporting
+
+When tests fail, it is critical that your component testing framework provides useful error logs that help to minimize the amount of time it takes to debug the problem. In addition to simply telling you what test fails, they should also provides context for why a test fails, e.g., what is expected vs what was received.
+
+### Recommendations
+
+#### Vue Testing Library (@testing-library/vue)
+
+Vue Testing Library is a set of tools focused on testing components without relying on implementation details. Built with accessibility in mind, its approach also makes refactoring a breeze.
+
+Its guiding principle is that the more tests resemble the way software is used, the more confidence they can provide.
+
+**Resources:**
+
+- [Official Vue Testing Library Website](https://testing-library.com/docs/vue-testing-library/intro)
+
+#### Vue Test Utils
+
+Vue Test Utils is the official low-level component testing library that was written to provide users access to Vue specific APIs. If you are new to testing Vue applications, we would recommend using Vue Testing Library, which is an abstraction over Vue Test Utils.
+
+**Resources**
+
+- [Official Vue Test Utils Documentation](https://vue-test-utils.vuejs.org)
+- [Vue Testing Handbook](https://lmiller1990.github.io/vue-testing-handbook/#what-is-this-guide) by Lachlan Miller
+- [Cookbook: Unit Testing Vue Components](https://vuejs.org/v2/cookbook/unit-testing-vue-components.html)
+
+## End-to-End (E2E) Testing
+
+### Introduction
+
+While unit tests provide developers with some degree of confidence, unit and component tests are limited in their abilities to provide holistic coverage of an application when deployed to production. As a result, end-to-end (E2E) tests provide coverage on what is arguably the most important aspect of an application: what happens when users actually use your applications.
+
+In other words, E2E tests validate all of the layers in your application. This not only includes your frontend code, but all associated backend services and infrastructure that are more representative of the environment that your users will be in. By testing how user actions impact your application, E2E tests are often the key to higher confidence in whether an application is functioning properly or not.
+
+### Choosing Your Framework
+
+While end-to-end (E2E) testing on the web has gained a negative reputation for unreliable (flaky) tests and slowing down development processes, modern E2E tools have made strides forward to create more reliable, interactive, and useful tests. When choosing an E2E testing framework, the following sections provide some guidance on things to keep in mind when choosing a testing framework for your application.
+
+#### Cross-browser testing
+
+One of the primary benefits that end-to-end (E2E) testing is known for is its ability to test your application across multiple browsers. While it may seem desirable to have 100% cross-browser coverage, it is important to note that cross browser testing has diminishing returns on a team's resources due the additional time and machine power required to run them consistently. As a result, it is important to be mindful of this trade-off when choosing the amount of cross-browser testing your application needs.
+
+<p class="tip">A recent development in E2E for catching browser-specific issues is using application monitoring and error reporting tools (e.g., Sentry, LogRocket, etc.) for browsers that are not as commonly used (e.g., < IE11, older Safari versions, etc.).</p>
+
+#### Faster feedback loops
+
+One of the primary problems with end-to-end (E2E) tests and development is that running the entire suite takes a long time. Typically, this is only done in continuous integration and deployment (CI/CD) pipelines. Modern E2E testing frameworks have helped to solve this by adding features like parallelization, which allows for CI/CD pipelines to often run magnitudes faster than before. In addition, when developing locally, the ability to selectively run a single test for the page you are working on while also providing hot reloading of tests can help to boost a developer's workflow and productivity.
+
+#### First class debugging experience
+
+While developers have traditionally relied on scanning logs in a terminal window to help determine what went wrong in a test, modern end-to-end (E2E) test frameworks allow developers to leverage tools that they are already familiar with, e.g. browser developer tools.
+
+#### Visibility in headless mode
+
+When end-to-end (E2E) tests are run in continuous integration / deployment pipelines, they are often run in headless browsers (i.e., no visible browser is opened for the user to watch). As a result, when errors occur, a critical feature that modern E2E testing frameworks provide 1st class support for is the ability to see snapshots and/or videos of your applications during various testing stages in order to provide insight into why errors are happening. Historically, it was tedious to maintain these integrations.
+
+### Recommendations
+
+While there are many tools in the ecosystem, here are some common end-to-end (E2E) testing frameworks that are being used in the Vue.js ecosystem.
+
+#### Cypress.io
+
+Cypress.io is a testing framework that aims to enhance developer productivity by enabling developers to reliably test their applications while providing a first class developer experience.
+
+**Resources**
+
+- [Cypress' Official Website](https://www.cypress.io)
+- [Official Vue CLI Cypress Plugin](https://cli.vuejs.org/core-plugins/e2e-cypress.html)
+- [Cypress Testing Library](https://github.com/testing-library/cypress-testing-library)
+
+#### Nightwatch.js
+
+Nightwatch.js is an end-to-end testing framework that can be used to test web applications and websites, as well as Node.js unit and integration testing.
+
+**Resources:**
+
+- [Nightwatch's Official Website](https://nightwatchjs.org)
+- [Official Vue CLI Nightwatch Plugin](https://cli.vuejs.org/core-plugins/e2e-nightwatch.html)
+
+#### Puppeteer
+
+Puppeteer is a Node library that provides a high-level API to control the browser and can pair with other test runners (e.g., Jest) to test your application.
+
+**Resources:**
+
+- [Puppeteer's Official Website](https://pptr.dev)
+
+#### TestCafe
+
+TestCafe is a Node.js based end-to-end framework that aims to provide easy setup so that developers can focus on creating tests that are easy to write and reliable.
+
+**Resources:**
+
+- [TestCafe's Official Website](https://devexpress.github.io/testcafe/)