diff --git a/src/api/application-api.md b/src/api/application-api.md index 63a7597eb6..2dd0d7b498 100644 --- a/src/api/application-api.md +++ b/src/api/application-api.md @@ -329,14 +329,14 @@ setTimeout(() => app.unmount(), 5000) export default { install(app) { const version = Number(app.version.split('.')[0]) - + if (version < 3) { console.warn('This plugin requires Vue 3') } - + // ... } } ``` - + - **See also**: [Global API - version](/api/global-api.html#version) diff --git a/src/api/built-in-components.md b/src/api/built-in-components.md index 62e75b394f..23ec5f2578 100644 --- a/src/api/built-in-components.md +++ b/src/api/built-in-components.md @@ -14,7 +14,7 @@ const { KeepAlive, Teleport, Transition, TransitionGroup } = Vue import { KeepAlive, Teleport, Transition, TransitionGroup } from 'vue' ``` -`` and `` are component-like features of template syntax. They are not true components and they can't be imported like the components shown above. +`` and `` are component-like features of template syntax. They are not true components and they can't be imported like the components shown above. ## component @@ -45,13 +45,13 @@ import { KeepAlive, Teleport, Transition, TransitionGroup } from 'vue' ```js const { Transition, TransitionGroup } = Vue - + const Component = { components: { Transition, TransitionGroup }, - + template: ` ... @@ -60,7 +60,7 @@ import { KeepAlive, Teleport, Transition, TransitionGroup } from 'vue' } ``` - Registration is not required if you pass the component itself to `is` rather than its name. + Registration is not required if you pass the component itself to `is` rather than its name. - **See also:** [Dynamic Components](../guide/component-dynamic-async.html) diff --git a/src/api/instance-methods.md b/src/api/instance-methods.md index ef09dce96f..df06546416 100644 --- a/src/api/instance-methods.md +++ b/src/api/instance-methods.md @@ -122,7 +122,7 @@ - **Option: deep** To also detect nested value changes inside Objects, you need to pass in `deep: true` in the options argument. This option also can be used to watch array mutations. - + > Note: when mutating (rather than replacing) an Object or an Array and watch with deep option, the old value will be the same as new value because they reference the same Object/Array. Vue doesn't keep a copy of the pre-mutate value. ```js diff --git a/src/api/options-assets.md b/src/api/options-assets.md index 3627123872..e19d43629f 100644 --- a/src/api/options-assets.md +++ b/src/api/options-assets.md @@ -9,6 +9,7 @@ A hash of directives to be made available to the component instance. - **Usage:** + ```js const app = createApp({}) @@ -35,6 +36,7 @@ A hash of components to be made available to the component instance. - **Usage:** + ```js const Foo = { template: `
Foo
` diff --git a/src/api/options-misc.md b/src/api/options-misc.md index d1da6800cd..1f5243ae7f 100644 --- a/src/api/options-misc.md +++ b/src/api/options-misc.md @@ -14,7 +14,7 @@ - **Type:** `Array` -- **Default:** `{{ "['\u007b\u007b', '\u007d\u007d']" }}` +- **Default:** `{{ "['\u007b\u007b', '\u007d\u007d']" }}` - **Restrictions:** This option is only available in the full build, with in-browser template compilation. diff --git a/src/api/refs-api.md b/src/api/refs-api.md index b87fd8f215..6fcdbb67fc 100644 --- a/src/api/refs-api.md +++ b/src/api/refs-api.md @@ -217,7 +217,7 @@ isReactive(foo.value) // false ## `triggerRef` -Execute any effects tied to a [`shallowRef`](#shallowref) manually. +Execute any effects tied to a [`shallowRef`](#shallowref) manually. ```js const shallow = shallowRef({ diff --git a/src/coc/index.md b/src/coc/index.md index 3447052cdc..fd53230a08 100644 --- a/src/coc/index.md +++ b/src/coc/index.md @@ -1,45 +1,45 @@ -# Code Of Conduct - -## Our Pledge - -In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, political party, or sexual identity and orientation. Note, however, that religion, political party, or other ideological affiliation provide no exemptions for the behavior we outline as unacceptable in this Code of Conduct. - -## Our Standards - -Examples of behavior that contributes to creating a positive environment include: - -- Using welcoming and inclusive language -- Being respectful of differing viewpoints and experiences -- Gracefully accepting constructive criticism -- Focusing on what is best for the community -- Showing empathy towards other community members - -Examples of unacceptable behavior by participants include: - -- The use of sexualized language or imagery and unwelcome sexual attention or advances -- Trolling, insulting/derogatory comments, and personal or political attacks -- Public or private harassment -- Publishing others' private information, such as a physical or electronic address, without explicit permission -- Other conduct which could reasonably be considered inappropriate in a professional setting - -## Our Responsibilities - -Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. - -Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. - -## Scope - -This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. - -## Enforcement - -Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at community@vuejs.org. All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. - -Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. - -## Attribution - -This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html - -[homepage]: https://www.contributor-covenant.org \ No newline at end of file +# Code Of Conduct + +## Our Pledge + +In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, political party, or sexual identity and orientation. Note, however, that religion, political party, or other ideological affiliation provide no exemptions for the behavior we outline as unacceptable in this Code of Conduct. + +## Our Standards + +Examples of behavior that contributes to creating a positive environment include: + +- Using welcoming and inclusive language +- Being respectful of differing viewpoints and experiences +- Gracefully accepting constructive criticism +- Focusing on what is best for the community +- Showing empathy towards other community members + +Examples of unacceptable behavior by participants include: + +- The use of sexualized language or imagery and unwelcome sexual attention or advances +- Trolling, insulting/derogatory comments, and personal or political attacks +- Public or private harassment +- Publishing others' private information, such as a physical or electronic address, without explicit permission +- Other conduct which could reasonably be considered inappropriate in a professional setting + +## Our Responsibilities + +Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. + +Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. + +## Scope + +This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. + +## Enforcement + +Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at community@vuejs.org. All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. + +Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. + +## Attribution + +This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html + +[homepage]: https://www.contributor-covenant.org diff --git a/src/community/partners.md b/src/community/partners.md index 4211020288..84b90487e3 100644 --- a/src/community/partners.md +++ b/src/community/partners.md @@ -4,4 +4,4 @@ Vue Partners are premium shops that provide first-class Vue consulting and devel ## Active Partners - \ No newline at end of file + diff --git a/src/community/team.md b/src/community/team.md index 78fd051c9d..8350415de3 100644 --- a/src/community/team.md +++ b/src/community/team.md @@ -1,3 +1,3 @@ # Meet the Team - \ No newline at end of file + diff --git a/src/community/themes.md b/src/community/themes.md index 0dafd6ee00..e8c1aeb1a9 100644 --- a/src/community/themes.md +++ b/src/community/themes.md @@ -1,3 +1,3 @@ # Themes - \ No newline at end of file + diff --git a/src/guide/a11y-resources.md b/src/guide/a11y-resources.md index 23d3bb45ba..b8c5922124 100644 --- a/src/guide/a11y-resources.md +++ b/src/guide/a11y-resources.md @@ -40,7 +40,7 @@ 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. +- _[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, 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. diff --git a/src/guide/composition-api-template-refs.md b/src/guide/composition-api-template-refs.md index 45fe8aec12..681fbeb761 100644 --- a/src/guide/composition-api-template-refs.md +++ b/src/guide/composition-api-template-refs.md @@ -105,7 +105,7 @@ But a key difference to lifecycle hooks is that `watch()` and `watchEffect()` ef const root = ref(null) watchEffect(() => { - // This effect runs before the DOM is updated, and consequently, + // This effect runs before the DOM is updated, and consequently, // the template ref does not hold a reference to the element yet. console.log(root.value) // => null }) diff --git a/src/guide/contributing/doc-style-guide.md b/src/guide/contributing/doc-style-guide.md index a465d866aa..27e6b0f2c8 100644 --- a/src/guide/contributing/doc-style-guide.md +++ b/src/guide/contributing/doc-style-guide.md @@ -64,6 +64,7 @@ export default { ```` **Rendered Output** + ```js export default { name: 'MyComponent' diff --git a/src/guide/migration/array-refs.md b/src/guide/migration/array-refs.md index 5a0ab6fe88..d55f8ecd62 100644 --- a/src/guide/migration/array-refs.md +++ b/src/guide/migration/array-refs.md @@ -1,7 +1,7 @@ --- title: v-for Array Refs badges: -- breaking + - breaking --- # {{ $frontmatter.title }} diff --git a/src/guide/migration/v-bind.md b/src/guide/migration/v-bind.md index b5d97fa7ec..9a56f52d31 100644 --- a/src/guide/migration/v-bind.md +++ b/src/guide/migration/v-bind.md @@ -16,7 +16,7 @@ When dynamically binding attributes on an element, a common scenario involves us ## 2.x Syntax -In 2.x, if an element has both `v-bind="object"` and an identical individual property defined, the individual property would always overwrite bindings in the `object`. +In 2.x, if an element has both `v-bind="object"` and an identical individual property defined, the individual property would always overwrite bindings in the `object`. ```html diff --git a/src/guide/reactivity.md b/src/guide/reactivity.md index 437f7bb78c..ba6ce6c3ee 100644 --- a/src/guide/reactivity.md +++ b/src/guide/reactivity.md @@ -98,7 +98,7 @@ But knowing what code is running is just one part of the puzzle. How does Vue kn We can't track reassignments of local variables like those in our earlier examples, there's just no mechanism for doing that in JavaScript. What we can track are changes to object properties. -When we return a plain JavaScript object from a component's `data` function, Vue will wrap that object in a [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) with handlers for `get` and `set`. Proxies were introduced in ES6 and allow Vue 3 to avoid some of the reactivity caveats that existed in earlier versions of Vue. +When we return a plain JavaScript object from a component's `data` function, Vue will wrap that object in a [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) with handlers for `get` and `set`. Proxies were introduced in ES6 and allow Vue 3 to avoid some of the reactivity caveats that existed in earlier versions of Vue.
diff --git a/src/guide/single-file-component.md b/src/guide/single-file-component.md index a92b709130..df5927be3a 100644 --- a/src/guide/single-file-component.md +++ b/src/guide/single-file-component.md @@ -75,7 +75,7 @@ Most of the time when developing a third-party library we want to build it in a We will need to install Rollup and a few dependencies: ```bash -npm install --save-dev rollup @rollup/plugin-commonjs rollup-plugin-vue +npm install --save-dev rollup @rollup/plugin-commonjs rollup-plugin-vue ``` These are the minimal amount of rollup plugins that we need to use to compile the code in an `esm` module. We may want to also add [rollup-plugin-babel](https://github.com/rollup/plugins/tree/master/packages/babel) to transpile their code and [node-resolve](https://github.com/rollup/plugins/tree/master/packages/node-resolve) if we use dependencies that we want to bundle with our library. @@ -100,7 +100,7 @@ export default { // this is the file containing all our exported components/functions input: 'src/index.js', // this is an array of outputted formats - output: [ + output: [ { file: pkg.module, // the name of our esm library format: 'esm', // the format of choice @@ -143,7 +143,8 @@ Here we are specifying: To also build `umd` and `cjs` modules we can simply add a few lines of configuration to our `rollup.config.js` and `package.json` -##### rollup.config.js +##### rollup.config.js + ```js output: [ ... @@ -163,7 +164,9 @@ output: [ }, ] ``` + ##### package.json + ```json "module": "dist/my-library-name.esm.js", "main": "dist/my-library-name.cjs.js", diff --git a/src/guide/teleport.md b/src/guide/teleport.md index 5e65865271..c47ff0c571 100644 --- a/src/guide/teleport.md +++ b/src/guide/teleport.md @@ -4,7 +4,7 @@ Vue encourages us to build our UIs by encapsulating UI and related behavior into components. We can nest them inside one another to build a tree that makes up an application UI. -However, sometimes a part of a component's template belongs to this component logically, while from a technical point of view, it would be preferable to move this part of the template somewhere else in the DOM, outside of the Vue app. +However, sometimes a part of a component's template belongs to this component logically, while from a technical point of view, it would be preferable to move this part of the template somewhere else in the DOM, outside of the Vue app. A common scenario for this is creating a component that includes a full-screen modal. In most cases, you'd want the modal's logic to live within the component, but the positioning of the modal quickly becomes difficult to solve through CSS, or requires a change in component composition. @@ -21,7 +21,7 @@ Consider the following HTML structure. ``` -Let's take a look at `modal-button`. +Let's take a look at `modal-button`. The component will have a `button` element to trigger the opening of the modal, and a `div` element with a class of `.modal`, which will contain the modal's content and a button to self-close. @@ -44,7 +44,7 @@ app.component('modal-button', {
`, data() { - return { + return { modalOpen: false } } @@ -55,7 +55,7 @@ When using this component inside the initial HTML structure, we can see a proble Teleport provides a clean way to allow us to control under which parent in our DOM we want a piece of HTML to be rendered, without having to resort to global state or splitting this into two components. -Let's modify our `modal-button` to use `` and tell Vue "**teleport** this HTML **to** the "**body**" tag". +Let's modify our `modal-button` to use `` and tell Vue "**teleport** this HTML **to** the "**body**" tag". ```js app.component('modal-button', { @@ -77,7 +77,7 @@ app.component('modal-button', { `, data() { - return { + return { modalOpen: false } } diff --git a/src/guide/testing.md b/src/guide/testing.md index 71e8843a0b..ade7ba4910 100644 --- a/src/guide/testing.md +++ b/src/guide/testing.md @@ -38,7 +38,7 @@ While there are many tools in the ecosystem, here are some common unit testing t #### 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. +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:** @@ -66,7 +66,7 @@ The following section provides guidelines on things to keep in mind when evaluat #### 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. +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 @@ -86,7 +86,7 @@ Its guiding principle is that the more tests resemble the way software is used, #### 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. +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:** @@ -107,10 +107,10 @@ While end-to-end (E2E) testing on the web has gained a negative reputation for u #### 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. +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. ::: tip -A recent development in 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.). +A recent development in 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.). ::: #### Faster feedback loops @@ -119,7 +119,7 @@ One of the primary problems with end-to-end (E2E) tests and development is that #### 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. +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 diff --git a/src/style-guide/README.md b/src/style-guide/README.md index 28820749b2..e233abfbdf 100644 --- a/src/style-guide/README.md +++ b/src/style-guide/README.md @@ -1257,7 +1257,6 @@ While attribute values without any spaces are not required to have quotes in HTM ``` - ## Priority C Rules: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead) ### Component/instance options order recommended