├── .editorconfig ├── .github ├── pull_request_template.md └── workflows │ └── pr.yaml ├── .gitignore ├── .prettierrc ├── LICENSE ├── README.md ├── assets ├── diagrams.sketch ├── lifecycle-diagram.svg ├── scoped-slot-diagram.svg ├── slot-render-diagram.svg └── transitions-diagram.ai.zip ├── netlify.toml ├── package.json ├── scripts └── tag-alert-blocks.js ├── src ├── .vuepress │ ├── components │ │ ├── AppBanner.vue │ │ ├── FirstExample.vue │ │ ├── MigrationBadges.vue │ │ ├── VideoLesson.vue │ │ ├── common │ │ │ ├── codepen-snippet.vue │ │ │ └── vuemastery-video-modal.vue │ │ ├── community │ │ │ ├── partners │ │ │ │ ├── index.vue │ │ │ │ ├── partner-item.vue │ │ │ │ └── partners.js │ │ │ ├── team │ │ │ │ ├── emeriti.js │ │ │ │ ├── get-position-button.vue │ │ │ │ ├── index.vue │ │ │ │ ├── members.js │ │ │ │ ├── partners.js │ │ │ │ ├── utils.js │ │ │ │ ├── vuer-language.vue │ │ │ │ └── vuer-profile.vue │ │ │ └── themes │ │ │ │ ├── index.vue │ │ │ │ ├── theme-data.js │ │ │ │ ├── theme-item.vue │ │ │ │ └── theme-provider.vue │ │ ├── guide │ │ │ └── contributing │ │ │ │ ├── translations-data.js │ │ │ │ └── translations.vue │ │ ├── search │ │ │ └── index.vue │ │ └── support │ │ │ ├── Coins.vue │ │ │ ├── OpenCollectiveGroup.vue │ │ │ ├── SponsorGroup.vue │ │ │ └── SponsorImageLink.vue │ ├── config.js │ ├── markdown │ │ └── highlight.js │ ├── public │ │ ├── images │ │ │ ├── AccessibilityChromeDeveloperTools.png │ │ │ ├── AccessibleARIAdescribedby.png │ │ │ ├── AccessibleARIAlabelDevTools.png │ │ │ ├── AccessibleARIAlabelledbyDevTools.png │ │ │ ├── AccessibleLabelChromeDevTools.png │ │ │ ├── breakpoint_hit.png │ │ │ ├── breakpoint_set.png │ │ │ ├── coin-bch.png │ │ │ ├── coin-btc.png │ │ │ ├── coin-eth.png │ │ │ ├── coin-ltc.png │ │ │ ├── components.png │ │ │ ├── components_provide.png │ │ │ ├── config_add.png │ │ │ ├── css-vs-js-ease.svg │ │ │ ├── devtools-timetravel.gif │ │ │ ├── dom-tree.png │ │ │ ├── editable-svg-icons-sizes.png │ │ │ ├── editable-svg-icons.jpg │ │ │ ├── icons │ │ │ │ ├── android-icon-144x144.png │ │ │ │ ├── android-icon-192x192.png │ │ │ │ ├── android-icon-36x36.png │ │ │ │ ├── android-icon-48x48.png │ │ │ │ ├── android-icon-72x72.png │ │ │ │ ├── android-icon-96x96.png │ │ │ │ ├── apple-icon-114x114.png │ │ │ │ ├── apple-icon-120x120.png │ │ │ │ ├── apple-icon-144x144.png │ │ │ │ ├── apple-icon-152x152.png │ │ │ │ ├── apple-icon-180x180.png │ │ │ │ ├── apple-icon-57x57.png │ │ │ │ ├── apple-icon-60x60.png │ │ │ │ ├── apple-icon-72x72.png │ │ │ │ ├── apple-icon-76x76.png │ │ │ │ ├── apple-icon-precomposed.png │ │ │ │ ├── apple-icon.png │ │ │ │ ├── bacancy_technology.png │ │ │ │ ├── bulb.svg │ │ │ │ ├── danger.svg │ │ │ │ ├── favicon-16x16.png │ │ │ │ ├── favicon-32x32.png │ │ │ │ ├── favicon-96x96.png │ │ │ │ ├── favicon.ico │ │ │ │ ├── info.svg │ │ │ │ ├── ms-icon-144x144.png │ │ │ │ ├── ms-icon-150x150.png │ │ │ │ ├── ms-icon-310x310.png │ │ │ │ ├── ms-icon-70x70.png │ │ │ │ └── stop.svg │ │ │ ├── lifecycle.svg │ │ │ ├── options-api.png │ │ │ ├── oxford-comma.jpg │ │ │ ├── partners │ │ │ │ ├── monterail.png │ │ │ │ └── vehikl.png │ │ │ ├── paypal.png │ │ │ ├── reactivity-spreadsheet.mp4 │ │ │ ├── scoped-slot.png │ │ │ ├── sfc-with-preprocessors.png │ │ │ ├── sfc.png │ │ │ ├── slot.png │ │ │ ├── sponsors │ │ │ │ ├── .gitkeep │ │ │ │ ├── Monterail.png │ │ │ │ ├── autocode.svg │ │ │ │ ├── bacancy_technology.png │ │ │ │ ├── bestvpn_co.png │ │ │ │ ├── bit.png │ │ │ │ ├── chaitin.png │ │ │ │ ├── cloudstudio.png │ │ │ │ ├── dcloud.gif │ │ │ │ ├── devexpress.png │ │ │ │ ├── devsquad.png │ │ │ │ ├── fastcoding_inc.png │ │ │ │ ├── fastcoding_inc.svg │ │ │ │ ├── firestick_tricks.png │ │ │ │ ├── flatlogic_templates.svg │ │ │ │ ├── foo.png │ │ │ │ ├── frontend_love.png │ │ │ │ ├── frontendlove.png │ │ │ │ ├── gridsome.png │ │ │ │ ├── happy_programmer_llc.png │ │ │ │ ├── html_burger.png │ │ │ │ ├── icons.png │ │ │ │ ├── icons_8.png │ │ │ │ ├── inkoop.png │ │ │ │ ├── intygrate.png │ │ │ │ ├── isolutions_uk_limited.png │ │ │ │ ├── laravel.png │ │ │ │ ├── modus.png │ │ │ │ ├── moovweb.png │ │ │ │ ├── neds.png │ │ │ │ ├── onsen_ui.png │ │ │ │ ├── passionate_people.png │ │ │ │ ├── primevue copy.png │ │ │ │ ├── primevue.png │ │ │ │ ├── programmers_io.png │ │ │ │ ├── pullrequest.svg │ │ │ │ ├── retool.png │ │ │ │ ├── roadster.png │ │ │ │ ├── shopware_ag.png │ │ │ │ ├── storekit.png │ │ │ │ ├── storyblok.png │ │ │ │ ├── tidelift.png │ │ │ │ ├── tighten_co.png │ │ │ │ ├── tooltwist.png │ │ │ │ ├── unicorn.png │ │ │ │ ├── usave.png │ │ │ │ ├── valuecoders.png │ │ │ │ ├── vehikl.png │ │ │ │ ├── vpnranks.png │ │ │ │ ├── vuejobs.png │ │ │ │ ├── vuemastery.png │ │ │ │ ├── vueschool.png │ │ │ │ ├── vuetify.png │ │ │ │ ├── watchcartoononline.png │ │ │ │ ├── webdock.png │ │ │ │ ├── webucator.png │ │ │ │ ├── wilderminds.png │ │ │ │ ├── writers_per_hour.jpg │ │ │ │ ├── x_team.png │ │ │ │ ├── y8.png │ │ │ │ └── yakaz.png │ │ │ ├── state.png │ │ │ ├── transition.png │ │ │ ├── transitions.svg │ │ │ └── v-bind-instead-of-sync.png │ │ ├── logo.png │ │ └── manifest.json │ ├── styles │ │ └── index.styl │ └── theme │ │ ├── LICENSE │ │ ├── README.md │ │ ├── components │ │ ├── AlgoliaSearchBox.vue │ │ ├── BuySellAds.vue │ │ ├── CarbonAds.vue │ │ ├── DropdownLink.vue │ │ ├── DropdownTransition.vue │ │ ├── Home.vue │ │ ├── NavLink.vue │ │ ├── NavLinks.vue │ │ ├── Navbar.vue │ │ ├── Newsletter.vue │ │ ├── Page.vue │ │ ├── PageEdit.vue │ │ ├── PageNav.vue │ │ ├── Sidebar.vue │ │ ├── SidebarButton.vue │ │ ├── SidebarGroup.vue │ │ ├── SidebarLink.vue │ │ ├── SidebarLinks.vue │ │ ├── sponsors │ │ │ ├── OpenCollectiveSponsors.vue │ │ │ ├── PatreonSponsors.vue │ │ │ ├── SpecialSponsorBlock.vue │ │ │ ├── SpecialSponsors.vue │ │ │ └── SponsorsLayout.vue │ │ └── ui │ │ │ ├── HomeActionLink.vue │ │ │ ├── RoundedButton.vue │ │ │ └── SocialIcon.vue │ │ ├── data │ │ └── patreon-sponsors.js │ │ ├── global-components │ │ ├── ActionLink.vue │ │ ├── Badge.vue │ │ └── VideoBanner.vue │ │ ├── index.js │ │ ├── layouts │ │ ├── 404.vue │ │ └── Layout.vue │ │ ├── noopModule.js │ │ ├── package.json │ │ ├── styles │ │ ├── _settings.scss │ │ ├── arrow.styl │ │ ├── code.styl │ │ ├── config.styl │ │ ├── custom-blocks.styl │ │ ├── index.styl │ │ ├── mixins.scss │ │ ├── mobile.styl │ │ ├── toc.styl │ │ └── wrapper.styl │ │ └── util │ │ └── index.js ├── README.md ├── api │ ├── application-api.md │ ├── application-config.md │ ├── basic-reactivity.md │ ├── built-in-components.md │ ├── composition-api.md │ ├── computed-watch-api.md │ ├── directives.md │ ├── global-api.md │ ├── index.md │ ├── instance-methods.md │ ├── instance-properties.md │ ├── options-api.md │ ├── options-assets.md │ ├── options-composition.md │ ├── options-data.md │ ├── options-dom.md │ ├── options-lifecycle-hooks.md │ ├── options-misc.md │ ├── reactivity-api.md │ ├── refs-api.md │ └── special-attributes.md ├── coc │ └── index.md ├── community │ ├── join.md │ ├── partners.md │ ├── team.md │ └── themes.md ├── cookbook │ ├── automatic-global-registration-of-base-components.md │ ├── debugging-in-vscode.md │ ├── editable-svg-icons.md │ └── index.md ├── examples │ ├── commits.md │ ├── dynamic-components │ │ ├── index.html │ │ ├── package.json │ │ ├── sandbox.config.json │ │ └── style.css │ ├── elastic-header.md │ ├── grid-component.md │ ├── markdown.md │ ├── modal.md │ ├── select2.md │ ├── svg.md │ ├── todomvc.md │ └── tree-view.md ├── guide │ ├── a11y-basics.md │ ├── a11y-resources.md │ ├── a11y-semantics.md │ ├── a11y-standards.md │ ├── change-detection.md │ ├── class-and-style.md │ ├── component-attrs.md │ ├── component-basics.md │ ├── component-custom-events.md │ ├── component-dynamic-async.md │ ├── component-edge-cases.md │ ├── component-props.md │ ├── component-provide-inject.md │ ├── component-registration.md │ ├── component-slots.md │ ├── component-template-refs.md │ ├── composition-api-introduction.md │ ├── composition-api-lifecycle-hooks.md │ ├── composition-api-provide-inject.md │ ├── composition-api-setup.md │ ├── composition-api-template-refs.md │ ├── computed.md │ ├── conditional.md │ ├── contributing │ │ ├── doc-style-guide.md │ │ ├── translations.md │ │ └── writing-guide.md │ ├── custom-directive.md │ ├── data-methods.md │ ├── events.md │ ├── forms.md │ ├── installation.md │ ├── instance.md │ ├── introduction.md │ ├── list.md │ ├── migration │ │ ├── array-refs.md │ │ ├── async-components.md │ │ ├── attribute-coercion.md │ │ ├── attrs-includes-class-style.md │ │ ├── children.md │ │ ├── custom-directives.md │ │ ├── custom-elements-interop.md │ │ ├── data-option.md │ │ ├── emits-option.md │ │ ├── events-api.md │ │ ├── filters.md │ │ ├── fragments.md │ │ ├── functional-components.md │ │ ├── global-api-treeshaking.md │ │ ├── global-api.md │ │ ├── inline-template-attribute.md │ │ ├── introduction.md │ │ ├── key-attribute.md │ │ ├── keycode-modifiers.md │ │ ├── listeners-removed.md │ │ ├── mount-changes.md │ │ ├── props-data.md │ │ ├── props-default-this.md │ │ ├── render-function-api.md │ │ ├── slots-unification.md │ │ ├── suspense.md │ │ ├── transition-group.md │ │ ├── transition.md │ │ ├── v-bind.md │ │ ├── v-if-v-for.md │ │ ├── v-model.md │ │ ├── v-on-native-modifier-removed.md │ │ ├── vnode-lifecycle-events.md │ │ └── watch.md │ ├── mixins.md │ ├── mobile.md │ ├── optimizations.md │ ├── plugins.md │ ├── reactivity-computed-watchers.md │ ├── reactivity-fundamentals.md │ ├── reactivity.md │ ├── render-function.md │ ├── routing.md │ ├── single-file-component.md │ ├── ssr.md │ ├── ssr │ │ ├── build-config.md │ │ ├── getting-started.md │ │ ├── hydration.md │ │ ├── introduction.md │ │ ├── routing.md │ │ ├── server.md │ │ ├── structure.md │ │ └── universal.md │ ├── state-management.md │ ├── teleport.md │ ├── template-syntax.md │ ├── testing.md │ ├── tooling │ │ └── deployment.md │ ├── transitions-enterleave.md │ ├── transitions-list.md │ ├── transitions-overview.md │ ├── transitions-state.md │ └── typescript-support.md ├── search │ └── README.md ├── style-guide │ └── README.md └── support-vuejs │ └── README.md └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | [*] 2 | charset = utf-8 3 | indent_style = space 4 | indent_size = 2 5 | end_of_line = lf 6 | insert_final_newline = true 7 | trim_trailing_whitespace = true 8 | 9 | [*.md] 10 | trim_trailing_whitespace = false 11 | -------------------------------------------------------------------------------- /.github/pull_request_template.md: -------------------------------------------------------------------------------- 1 | ## Description of Problem 2 | 3 | ## Proposed Solution 4 | 5 | ## Additional Information 6 | -------------------------------------------------------------------------------- /.github/workflows/pr.yaml: -------------------------------------------------------------------------------- 1 | name: CI 2 | 3 | on: [pull_request] 4 | 5 | defaults: 6 | run: 7 | shell: bash 8 | 9 | jobs: 10 | tag-alert-blocks: 11 | name: Tag alert blocks 12 | runs-on: ubuntu-latest 13 | steps: 14 | - uses: actions/checkout@v2 15 | - run: | 16 | git fetch --no-tags --prune --depth=1 origin +refs/heads/master:refs/remotes/origin/master 17 | - uses: actions/github-script@v1 18 | with: 19 | github-token: ${{secrets.GITHUB_TOKEN}} 20 | script: | 21 | const path = require('path') 22 | const { isUsingAlertBlock } = require(path.resolve(process.cwd(), 'scripts/tag-alert-blocks.js')) 23 | 24 | isUsingAlertBlock().then(ok => { 25 | if (ok) { 26 | github.issues.addLabels({ 27 | issue_number: context.issue.number, 28 | owner: context.repo.owner, 29 | repo: context.repo.repo, 30 | labels: ['review-alert-box'] 31 | }) 32 | } 33 | }) 34 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | ### OSX ### 2 | # General 3 | .DS_Store 4 | .AppleDouble 5 | .LSOverride 6 | 7 | # Thumbnails 8 | ._* 9 | 10 | # Files that might appear in the root of a volume 11 | .DocumentRevisions-V100 12 | .fseventsd 13 | .Spotlight-V100 14 | .TemporaryItems 15 | .Trashes 16 | .VolumeIcon.icns 17 | .com.apple.timemachine.donotpresent 18 | 19 | # Directories potentially created on remote AFP share 20 | .AppleDB 21 | .AppleDesktop 22 | Network Trash Folder 23 | Temporary Items 24 | .apdisk 25 | 26 | ### Node ### 27 | # Logs 28 | logs 29 | *.log 30 | npm-debug.log* 31 | yarn-debug.log* 32 | yarn-error.log* 33 | lerna-debug.log* 34 | 35 | # Diagnostic reports (https://nodejs.org/api/report.html) 36 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 37 | 38 | # Runtime data 39 | pids 40 | *.pid 41 | *.seed 42 | *.pid.lock 43 | 44 | # Directory for instrumented libs generated by jscoverage/JSCover 45 | lib-cov 46 | 47 | # Coverage directory used by tools like istanbul 48 | coverage 49 | *.lcov 50 | 51 | # nyc test coverage 52 | .nyc_output 53 | 54 | # node-waf configuration 55 | .lock-wscript 56 | 57 | # Compiled binary addons (https://nodejs.org/api/addons.html) 58 | build/Release 59 | 60 | # Dependency directories 61 | node_modules/ 62 | jspm_packages/ 63 | 64 | # TypeScript v1 declaration files 65 | typings/ 66 | 67 | # TypeScript cache 68 | *.tsbuildinfo 69 | 70 | # Optional npm cache directory 71 | .npm 72 | 73 | # Optional eslint cache 74 | .eslintcache 75 | 76 | # Optional REPL history 77 | .node_repl_history 78 | 79 | # Output of 'npm pack' 80 | *.tgz 81 | 82 | # Yarn Integrity file 83 | .yarn-integrity 84 | 85 | # dotenv environment variables file 86 | .env 87 | .env.test 88 | 89 | # parcel-bundler cache (https://parceljs.org/) 90 | .cache 91 | 92 | # rollup.js default build output 93 | dist/ 94 | 95 | # vuepress build output 96 | .vuepress/dist 97 | 98 | # Serverless directories 99 | .serverless/ 100 | 101 | # Temporary folders 102 | tmp/ 103 | temp/ 104 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "singleQuote": true 4 | } 5 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 vuejs 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # v3.vuejs.org 2 | 3 | This site is built with [VuePress](https://vuepress.vuejs.org/). Site content is written in Markdown format located in `src`. 4 | 5 | ## Writing 6 | 7 | See the [Vue Docs Writing Guide](https://v3.vuejs.org/guide/writing-guide.html) for our rules and recommendations on writing and maintaining documentation. 8 | 9 | ## Developing 10 | 11 | 1. Clone repository 12 | 13 | ```bash 14 | git clone git@github.com:vuejs/docs-next.git 15 | ``` 16 | 17 | 2. Install dependencies 18 | 19 | ```bash 20 | yarn # or npm install 21 | ``` 22 | 23 | 3. Start local development environment 24 | 25 | ```bash 26 | yarn serve # or npm run serve 27 | ``` 28 | 29 | ## Deploying 30 | 31 | The site is automatically deployed when commits land in `master`, via [Netlify](https://www.netlify.com/). 32 | -------------------------------------------------------------------------------- /assets/diagrams.sketch: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/assets/diagrams.sketch -------------------------------------------------------------------------------- /assets/transitions-diagram.ai.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/assets/transitions-diagram.ai.zip -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | [[redirects]] 2 | from = "/guide/" 3 | to = "/guide/introduction.html" 4 | 5 | [[redirects]] 6 | from = "guide/doc-style-guide.html" 7 | to = "/guide/contributing/doc-style-guide.html" 8 | 9 | [[redirects]] 10 | from = "/guide/writing-guide.html" 11 | to = "/guide/contributing/writing-guide.html" 12 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "devDependencies": { 3 | "@vuepress/plugin-pwa": "^1.5.4", 4 | "sass": "^1.32.0", 5 | "sass-loader": "^8.0.2", 6 | "vuepress": "^1.5.4" 7 | }, 8 | "scripts": { 9 | "dev": "yarn serve", 10 | "serve": "vuepress dev src", 11 | "build": "vuepress build src" 12 | }, 13 | "dependencies": { 14 | "@docsearch/css": "^1.0.0-alpha.27", 15 | "@docsearch/js": "^1.0.0-alpha.27", 16 | "algoliasearch": "^4.4.0", 17 | "axios": "^0.21.1", 18 | "intersection-observer": "^0.11.0", 19 | "showdown": "^1.9.1" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /scripts/tag-alert-blocks.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | const { exec } = require('child_process') 4 | 5 | /** 6 | * Execute a command and return stdout as string. 7 | * @param {string} command 8 | * @returns {Promise} 9 | */ 10 | function run(command) { 11 | return new Promise((resolve, reject) => { 12 | exec(command, { encoding: 'utf-8' }, (error, stdout) => 13 | error ? reject(error) : resolve(stdout) 14 | ) 15 | }) 16 | } 17 | 18 | const ALERT_BLOCK = /^\+\s*:::\s?(\w+)/m 19 | 20 | async function isUsingAlertBlock(base = 'origin/master') { 21 | const result = await run(`git diff --name-only ${base}`) 22 | const files = ( 23 | await Promise.all( 24 | result 25 | .trim() 26 | .split(/\r?\n/) 27 | .map(file => 28 | run(`git diff ${base} -- ${file}`) 29 | .then(diff => ALERT_BLOCK.test(diff)) 30 | .then(usesAlertBlock => (usesAlertBlock ? file : '')) 31 | ) 32 | ) 33 | ).filter(Boolean) 34 | 35 | if (files.length) { 36 | return true 37 | } 38 | 39 | return false 40 | } 41 | 42 | module.exports = { isUsingAlertBlock } 43 | -------------------------------------------------------------------------------- /src/.vuepress/components/AppBanner.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 34 | 35 | 99 | -------------------------------------------------------------------------------- /src/.vuepress/components/FirstExample.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 28 | 29 | 41 | -------------------------------------------------------------------------------- /src/.vuepress/components/MigrationBadges.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 38 | 39 | 85 | -------------------------------------------------------------------------------- /src/.vuepress/components/VideoLesson.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 23 | 24 | 51 | -------------------------------------------------------------------------------- /src/.vuepress/components/common/codepen-snippet.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 93 | 94 | 105 | -------------------------------------------------------------------------------- /src/.vuepress/components/community/partners/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | -------------------------------------------------------------------------------- /src/.vuepress/components/community/team/emeriti.js: -------------------------------------------------------------------------------- 1 | import { shuffle } from 'lodash' 2 | 3 | export default shuffle([ 4 | { 5 | name: 'Chris Fritz', 6 | title: 'Good Word Putter-Togetherer', 7 | city: 'Durham, NC, USA', 8 | languages: ['en', 'de'], 9 | github: 'chrisvfritz', 10 | twitter: 'chrisvfritz', 11 | work: { 12 | role: 'Educator & Consultant' 13 | }, 14 | reposPersonal: [ 15 | 'vue-enterprise-boilerplate' 16 | ] 17 | }, 18 | { 19 | name: 'Blake Newman', 20 | title: 'Performance Specializer & Code Deleter', 21 | city: 'London, UK', 22 | languages: ['en'], 23 | work: { 24 | role: 'Software Engineer', 25 | org: 'Attest', 26 | orgUrl: 'https://www.askattest.com/' 27 | }, 28 | github: 'blake-newman', 29 | twitter: 'blakenewman' 30 | }, 31 | { 32 | name: 'kingwl', 33 | title: 'New Bee', 34 | city: 'Beijing, China', 35 | languages: ['zh'], 36 | work: { 37 | role: 'Software Development Engineer', 38 | org: 'Chaitin', 39 | orgUrl: 'https://chaitin.cn/' 40 | }, 41 | github: 'kingwl', 42 | reposOfficial: [ 43 | 'vue' 44 | ] 45 | }, 46 | { 47 | name: 'Alan Song', 48 | title: 'Regent of Routing', 49 | city: 'Hangzhou, China', 50 | languages: ['zh', 'en'], 51 | work: { 52 | role: 'Cofounder', 53 | org: 'Futurenda', 54 | orgUrl: 'https://www.futurenda.com/' 55 | }, 56 | github: 'fnlctrl', 57 | reposOfficial: [ 58 | 'vue-router' 59 | ] 60 | }, 61 | { 62 | name: 'defcc', 63 | title: 'Details Deity & Bug Surgeon', 64 | city: 'Chongqing, China', 65 | languages: ['zh', 'en'], 66 | github: 'defcc', 67 | work: { 68 | org: 'zbj.com', 69 | orgUrl: 'http://www.zbj.com/' 70 | } 71 | }, 72 | { 73 | name: 'gebilaoxiong', 74 | title: 'Issue Annihilator', 75 | city: 'Chongqing, China', 76 | languages: ['zh', 'en'], 77 | github: 'gebilaoxiong', 78 | work: { 79 | org: 'zbj.com', 80 | orgUrl: 'http://www.zbj.com/' 81 | } 82 | }, 83 | { 84 | name: 'Denis Karabaza', 85 | title: 'Director of Directives (Emoji-Human Hybrid)', 86 | city: 'Dubna, Russia', 87 | languages: ['ru', 'en'], 88 | github: 'simplesmiler', 89 | twitter: 'simplesmiler', 90 | work: { 91 | role: 'Software Engineer', 92 | org: 'Neolant', 93 | orgUrl: 'http://neolant.ru/' 94 | } 95 | }, 96 | { 97 | name: 'Edd Yerburgh', 98 | title: 'Testatron Alpha 9000', 99 | city: 'London, UK', 100 | languages: ['en'], 101 | github: 'eddyerburgh', 102 | twitter: 'EddYerburgh', 103 | work: { 104 | role: 'Full Stack Developer' 105 | }, 106 | reposOfficial: [ 107 | 'vue-test-utils' 108 | ], 109 | reposPersonal: [ 110 | 'avoriaz' 111 | ], 112 | links: [ 113 | 'https://www.eddyerburgh.me' 114 | ] 115 | } 116 | ]) 117 | -------------------------------------------------------------------------------- /src/.vuepress/components/community/team/get-position-button.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 52 | 53 | 69 | -------------------------------------------------------------------------------- /src/.vuepress/components/community/team/utils.js: -------------------------------------------------------------------------------- 1 | export const minimizeLink = link => { 2 | return link 3 | .replace(/^https?:\/\/(www\.)?/, '') 4 | .replace(/\/$/, '') 5 | .replace(/^mailto:/, '') 6 | } 7 | 8 | export const generateGithubUrl = (handle, repo) => { 9 | if (repo && repo.url) { 10 | return repo.url 11 | } 12 | 13 | if (repo && repo.includes('/')) { 14 | // If the repo name has a slash, it must be an organization repo. 15 | // In such a case, we discard the (personal) handle. 16 | return `https://github.com/${repo.replace(/\/\*$/, '')}` 17 | } 18 | 19 | return `https://github.com/${handle}/${repo || ''}` 20 | } 21 | 22 | export const getPreferredLanguageCode = () => { 23 | const nav = window.navigator 24 | 25 | return nav.languages 26 | // The preferred language set in the browser 27 | ? nav.languages[0] 28 | : ( 29 | // The system language in IE 30 | nav.userLanguage || 31 | // The language in the current page 32 | nav.language 33 | ) 34 | } 35 | 36 | /** 37 | * Calculates great-circle distances between the two points – that is, the shortest distance over the earth’s surface – using the Haversine formula. 38 | * @param {Number} lat1 The latitude of the 1st location. 39 | * @param {Number} lon1 The longitude of the 1st location. 40 | * @param {Number} lat2 The latitude of the 2nd location. 41 | * @param {Number} lon2 The longitude of the 2nd location. 42 | */ 43 | export const getDistanceFromLatLonInKm = (lat1, lon1, lat2, lon2) => { 44 | const R = 6371 // Radius of the earth in km 45 | const dLat = deg2rad(lat2 - lat1) // deg2rad below 46 | const dLon = deg2rad(lon2 - lon1) 47 | const a = 48 | Math.sin(dLat / 2) * Math.sin(dLat / 2) + 49 | Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) * 50 | Math.sin(dLon / 2) * Math.sin(dLon / 2) 51 | const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)) 52 | 53 | return R * c // Distance in km 54 | } 55 | 56 | function deg2rad(deg) { 57 | return deg * (Math.PI/180) 58 | } 59 | 60 | export const kmToMi = km => km * 0.62137 61 | 62 | export const roundDistance = num => Number(Math.ceil(num).toPrecision(2)) 63 | -------------------------------------------------------------------------------- /src/.vuepress/components/community/team/vuer-language.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 71 | -------------------------------------------------------------------------------- /src/.vuepress/components/community/themes/index.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 25 | -------------------------------------------------------------------------------- /src/.vuepress/components/community/themes/theme-item.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 26 | 27 | 98 | -------------------------------------------------------------------------------- /src/.vuepress/components/community/themes/theme-provider.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 42 | 43 | 67 | -------------------------------------------------------------------------------- /src/.vuepress/components/guide/contributing/translations-data.js: -------------------------------------------------------------------------------- 1 | export const labels = { 2 | language: 'Language', 3 | github: 'GitHub', 4 | lastCommit: 'Last commit', 5 | last90Days: 'Last 90 days', 6 | loadDetails: 'Load Details', 7 | commits: 'commits', 8 | loading: 'Loading...' 9 | } 10 | 11 | // Repos are in alphabetical order by the language code 12 | // You may need to clear your sessionStorage when adding a new item to this list 13 | export const repos = [ 14 | { lang: 'en-us', owner: 'vuejs', repo: 'docs-next', branch: 'master', url: 'https://v3.vuejs.org/' }, 15 | { lang: 'fr', owner: 'demahom18', repo: 'docs-next', branch: 'master', url: 'https://vue3-fr.netlify.app' }, 16 | { lang: 'id', owner: 'vuejs-id', repo: 'docs-next', branch: 'indonesian' }, 17 | { lang: 'ja', owner: 'vuejs-jp', repo: 'ja.vuejs.org', branch: 'lang-ja', url: 'https://v3.ja.vuejs.org/' }, 18 | { lang: 'ko', owner: 'vuejs-kr', repo: 'docs-next', branch: 'rootKoKr', url: 'https://v3.ko.vuejs.org/' }, 19 | { lang: 'pt-br', owner: 'vuejs-br', repo: 'docs-next', branch: 'master', url: 'https://vuejsbr-docs-next.netlify.app/' }, 20 | { lang: 'ru', owner: 'translation-gang', repo: 'docs-next', branch: 'master', url: 'https://v3.ru.vuejs.org/' }, 21 | { lang: 'zh-cn', owner: 'vuejs', repo: 'docs-next-zh-cn', branch: 'master', url: 'https://v3.cn.vuejs.org/' } 22 | ] 23 | -------------------------------------------------------------------------------- /src/.vuepress/components/support/OpenCollectiveGroup.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 27 | -------------------------------------------------------------------------------- /src/.vuepress/components/support/SponsorGroup.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 25 | -------------------------------------------------------------------------------- /src/.vuepress/components/support/SponsorImageLink.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 32 | -------------------------------------------------------------------------------- /src/.vuepress/public/images/AccessibilityChromeDeveloperTools.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/AccessibilityChromeDeveloperTools.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/AccessibleARIAdescribedby.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/AccessibleARIAdescribedby.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/AccessibleARIAlabelDevTools.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/AccessibleARIAlabelDevTools.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/AccessibleARIAlabelledbyDevTools.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/AccessibleARIAlabelledbyDevTools.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/AccessibleLabelChromeDevTools.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/AccessibleLabelChromeDevTools.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/breakpoint_hit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/breakpoint_hit.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/breakpoint_set.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/breakpoint_set.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/coin-bch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/coin-bch.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/coin-btc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/coin-btc.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/coin-eth.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/coin-eth.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/coin-ltc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/coin-ltc.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/components.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/components.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/components_provide.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/components_provide.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/config_add.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/config_add.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/devtools-timetravel.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/devtools-timetravel.gif -------------------------------------------------------------------------------- /src/.vuepress/public/images/dom-tree.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/dom-tree.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/editable-svg-icons-sizes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/editable-svg-icons-sizes.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/editable-svg-icons.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/editable-svg-icons.jpg -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/android-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/icons/android-icon-144x144.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/android-icon-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/icons/android-icon-192x192.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/android-icon-36x36.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/icons/android-icon-36x36.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/android-icon-48x48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/icons/android-icon-48x48.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/android-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/icons/android-icon-72x72.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/android-icon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/icons/android-icon-96x96.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/apple-icon-114x114.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/icons/apple-icon-114x114.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/apple-icon-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/icons/apple-icon-120x120.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/apple-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/icons/apple-icon-144x144.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/apple-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/icons/apple-icon-152x152.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/apple-icon-180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/icons/apple-icon-180x180.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/apple-icon-57x57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/icons/apple-icon-57x57.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/apple-icon-60x60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/icons/apple-icon-60x60.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/apple-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/icons/apple-icon-72x72.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/apple-icon-76x76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/icons/apple-icon-76x76.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/apple-icon-precomposed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/icons/apple-icon-precomposed.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/icons/apple-icon.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/bacancy_technology.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/icons/bacancy_technology.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/bulb.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | bulb 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/danger.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | danger 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/icons/favicon-16x16.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/icons/favicon-32x32.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/favicon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/icons/favicon-96x96.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/icons/favicon.ico -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/info.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | info 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/ms-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/icons/ms-icon-144x144.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/ms-icon-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/icons/ms-icon-150x150.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/ms-icon-310x310.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/icons/ms-icon-310x310.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/ms-icon-70x70.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/icons/ms-icon-70x70.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/stop.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | stop 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/.vuepress/public/images/options-api.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/options-api.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/oxford-comma.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/oxford-comma.jpg -------------------------------------------------------------------------------- /src/.vuepress/public/images/partners/monterail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/partners/monterail.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/partners/vehikl.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/partners/vehikl.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/paypal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/paypal.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/reactivity-spreadsheet.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/reactivity-spreadsheet.mp4 -------------------------------------------------------------------------------- /src/.vuepress/public/images/scoped-slot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/scoped-slot.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sfc-with-preprocessors.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/sfc-with-preprocessors.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sfc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/sfc.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/slot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/slot.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/sponsors/.gitkeep -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/Monterail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/sponsors/Monterail.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/bacancy_technology.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/sponsors/bacancy_technology.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/bestvpn_co.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/sponsors/bestvpn_co.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/bit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/sponsors/bit.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/chaitin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/sponsors/chaitin.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/cloudstudio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/sponsors/cloudstudio.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/dcloud.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/sponsors/dcloud.gif -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/devexpress.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/sponsors/devexpress.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/devsquad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/sponsors/devsquad.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/fastcoding_inc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/sponsors/fastcoding_inc.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/firestick_tricks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/sponsors/firestick_tricks.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/foo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/sponsors/foo.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/frontend_love.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/sponsors/frontend_love.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/frontendlove.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/sponsors/frontendlove.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/gridsome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/sponsors/gridsome.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/happy_programmer_llc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/sponsors/happy_programmer_llc.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/html_burger.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/sponsors/html_burger.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/sponsors/icons.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/icons_8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/sponsors/icons_8.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/inkoop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/sponsors/inkoop.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/intygrate.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/sponsors/intygrate.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/isolutions_uk_limited.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/sponsors/isolutions_uk_limited.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/laravel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/sponsors/laravel.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/modus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/sponsors/modus.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/moovweb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/sponsors/moovweb.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/neds.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/sponsors/neds.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/onsen_ui.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/sponsors/onsen_ui.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/passionate_people.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/sponsors/passionate_people.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/primevue copy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/sponsors/primevue copy.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/primevue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/sponsors/primevue.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/programmers_io.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/sponsors/programmers_io.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/pullrequest.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/retool.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/sponsors/retool.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/roadster.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/sponsors/roadster.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/shopware_ag.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/sponsors/shopware_ag.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/storekit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/sponsors/storekit.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/storyblok.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/sponsors/storyblok.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/tidelift.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/sponsors/tidelift.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/tighten_co.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/sponsors/tighten_co.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/tooltwist.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/sponsors/tooltwist.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/unicorn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/sponsors/unicorn.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/usave.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/sponsors/usave.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/valuecoders.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/sponsors/valuecoders.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/vehikl.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/sponsors/vehikl.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/vpnranks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/sponsors/vpnranks.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/vuejobs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/sponsors/vuejobs.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/vuemastery.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/sponsors/vuemastery.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/vueschool.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/sponsors/vueschool.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/vuetify.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/sponsors/vuetify.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/watchcartoononline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/sponsors/watchcartoononline.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/webdock.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/sponsors/webdock.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/webucator.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/sponsors/webucator.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/wilderminds.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/sponsors/wilderminds.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/writers_per_hour.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/sponsors/writers_per_hour.jpg -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/x_team.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/sponsors/x_team.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/y8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/sponsors/y8.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/yakaz.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/sponsors/yakaz.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/state.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/state.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/transition.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/transition.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/v-bind-instead-of-sync.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/images/v-bind-instead-of-sync.png -------------------------------------------------------------------------------- /src/.vuepress/public/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/docs-next/3d4a101ca71f6d8776230aa494b0c6da18e27736/src/.vuepress/public/logo.png -------------------------------------------------------------------------------- /src/.vuepress/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Vue.js", 3 | "short_name": "Vue.js", 4 | "start_url": ".", 5 | "display": "standalone", 6 | "background_color": "#3eaf7c", 7 | "description": "Vue.js framework documentation", 8 | "icons": [ 9 | { 10 | "src": "images/icons/android-icon-48x48.png", 11 | "sizes": "48x48", 12 | "type": "image/png" 13 | }, 14 | { 15 | "src": "images/icons/android-icon-72x72.png", 16 | "sizes": "72x72", 17 | "type": "image/png" 18 | }, 19 | { 20 | "src": "images/icons/android-icon-96x96.png", 21 | "sizes": "96x96", 22 | "type": "image/png" 23 | }, 24 | { 25 | "src": "images/icons/apple-icon-144x144.png", 26 | "sizes": "144x144", 27 | "type": "image/png" 28 | }, 29 | { 30 | "src": "images/icons/android-icon-192x192.png", 31 | "sizes": "192x192", 32 | "type": "image/png" 33 | } 34 | ] 35 | } 36 | -------------------------------------------------------------------------------- /src/.vuepress/theme/LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2018-present, Yuxi (Evan) You 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/.vuepress/theme/README.md: -------------------------------------------------------------------------------- 1 | # @vuepress/theme-default 2 | 3 | > theme-default for VuePress 4 | 5 | ## Plugins 6 | 7 | The default theme has the following plugin built in: 8 | 9 | - [@vuepress/plugin-active-header-links](https://github.com/vuejs/vuepress/tree/master/packages/@vuepress/plugin-active-header-links) 10 | - [@vuepress/plugin-google-analytics](https://github.com/vuejs/vuepress/tree/master/packages/%40vuepress/plugin-google-analytics) 11 | - [@vuepress/plugin-search](https://github.com/vuejs/vuepress/tree/master/packages/%40vuepress/plugin-search) 12 | -------------------------------------------------------------------------------- /src/.vuepress/theme/components/BuySellAds.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 51 | 52 | 116 | -------------------------------------------------------------------------------- /src/.vuepress/theme/components/CarbonAds.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 27 | 28 | 80 | -------------------------------------------------------------------------------- /src/.vuepress/theme/components/DropdownTransition.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 28 | 29 | 34 | -------------------------------------------------------------------------------- /src/.vuepress/theme/components/NavLink.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 88 | -------------------------------------------------------------------------------- /src/.vuepress/theme/components/Newsletter.vue: -------------------------------------------------------------------------------- 1 | 36 | 37 | 91 | -------------------------------------------------------------------------------- /src/.vuepress/theme/components/Page.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 23 | 24 | 32 | -------------------------------------------------------------------------------- /src/.vuepress/theme/components/Sidebar.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 24 | 25 | 62 | -------------------------------------------------------------------------------- /src/.vuepress/theme/components/SidebarButton.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 41 | -------------------------------------------------------------------------------- /src/.vuepress/theme/components/SidebarLinks.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 103 | -------------------------------------------------------------------------------- /src/.vuepress/theme/components/sponsors/OpenCollectiveSponsors.vue: -------------------------------------------------------------------------------- 1 | 34 | 35 | 51 | 52 | 59 | -------------------------------------------------------------------------------- /src/.vuepress/theme/components/sponsors/PatreonSponsors.vue: -------------------------------------------------------------------------------- 1 | 33 | 34 | 52 | -------------------------------------------------------------------------------- /src/.vuepress/theme/components/sponsors/SpecialSponsorBlock.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 18 | 19 | 35 | -------------------------------------------------------------------------------- /src/.vuepress/theme/components/sponsors/SpecialSponsors.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 34 | 35 | 66 | -------------------------------------------------------------------------------- /src/.vuepress/theme/components/sponsors/SponsorsLayout.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 24 | -------------------------------------------------------------------------------- /src/.vuepress/theme/components/ui/RoundedButton.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | 18 | 37 | -------------------------------------------------------------------------------- /src/.vuepress/theme/components/ui/SocialIcon.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 46 | 47 | 85 | -------------------------------------------------------------------------------- /src/.vuepress/theme/global-components/ActionLink.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 91 | 92 | 119 | -------------------------------------------------------------------------------- /src/.vuepress/theme/global-components/Badge.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 52 | -------------------------------------------------------------------------------- /src/.vuepress/theme/global-components/VideoBanner.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 28 | 29 | 69 | -------------------------------------------------------------------------------- /src/.vuepress/theme/index.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | 3 | // Theme API. 4 | module.exports = (options, ctx) => { 5 | const { themeConfig, siteConfig } = ctx 6 | 7 | // resolve algolia 8 | const isAlgoliaSearch = 9 | themeConfig.algolia || 10 | Object.keys((siteConfig.locales && themeConfig.locales) || {}).some( 11 | base => themeConfig.locales[base].algolia 12 | ) 13 | 14 | const enableSmoothScroll = themeConfig.smoothScroll === true 15 | 16 | return { 17 | alias() { 18 | return { 19 | '@AlgoliaSearchBox': isAlgoliaSearch 20 | ? path.resolve(__dirname, 'components/AlgoliaSearchBox.vue') 21 | : path.resolve(__dirname, 'noopModule.js') 22 | } 23 | }, 24 | 25 | plugins: [ 26 | ['@vuepress/active-header-links', options.activeHeaderLinks], 27 | '@vuepress/search', 28 | '@vuepress/plugin-nprogress', 29 | [ 30 | 'container', 31 | { 32 | type: 'tip', 33 | defaultTitle: { 34 | '/': 'TIP', 35 | '/zh/': '提示' 36 | } 37 | } 38 | ], 39 | [ 40 | 'container', 41 | { 42 | type: 'warning', 43 | defaultTitle: { 44 | '/': 'WARNING', 45 | '/zh/': '注意' 46 | } 47 | } 48 | ], 49 | [ 50 | 'container', 51 | { 52 | type: 'danger', 53 | defaultTitle: { 54 | '/': 'WARNING', 55 | '/zh/': '警告' 56 | } 57 | } 58 | ], 59 | [ 60 | 'container', 61 | { 62 | type: 'details', 63 | before: info => 64 | `
${ 65 | info ? `${info}` : '' 66 | }\n`, 67 | after: () => '
\n' 68 | } 69 | ], 70 | ['smooth-scroll', enableSmoothScroll] 71 | ] 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /src/.vuepress/theme/layouts/404.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 31 | -------------------------------------------------------------------------------- /src/.vuepress/theme/noopModule.js: -------------------------------------------------------------------------------- 1 | export default {} 2 | -------------------------------------------------------------------------------- /src/.vuepress/theme/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vuejs-org-theme", 3 | "version": "0.1.0-alpha", 4 | "description": "Vuejs.org v2.0 VuePress Theme", 5 | "keywords": [ 6 | "documentation", 7 | "generator", 8 | "vue", 9 | "vuepress" 10 | ], 11 | "homepage": "https://github.com/vuejs/vuepress/packages/@vuepress/theme-default#readme", 12 | "bugs": { 13 | "url": "https://github.com/vuejs/vuepress/issues" 14 | }, 15 | "repository": { 16 | "type": "git", 17 | "url": "git+https://github.com/vuejs/vuepress.git", 18 | "directory": "packages/@vuepress/theme-default" 19 | }, 20 | "license": "MIT", 21 | "author": "Ben Hong", 22 | "main": "index.js", 23 | "dependencies": { 24 | "@vuepress/plugin-active-header-links": "^1.3.1", 25 | "@vuepress/plugin-nprogress": "^1.3.1", 26 | "@vuepress/plugin-search": "^1.3.1", 27 | "docsearch.js": "^2.5.2", 28 | "lodash": "^4.17.15", 29 | "stylus": "^0.54.5", 30 | "stylus-loader": "^3.0.2", 31 | "vuepress-plugin-container": "^2.0.2", 32 | "vuepress-plugin-smooth-scroll": "^0.0.3" 33 | }, 34 | "publishConfig": { 35 | "access": "public" 36 | }, 37 | "maintainers": [ 38 | { 39 | "name": "Ben Hong", 40 | "email": "ben@bencodezen.io" 41 | } 42 | ] 43 | } 44 | -------------------------------------------------------------------------------- /src/.vuepress/theme/styles/_settings.scss: -------------------------------------------------------------------------------- 1 | // colors 2 | 3 | $dark: #273849; 4 | $medium: #304455; 5 | $light: #4f5959; 6 | $green: #42b983; 7 | $border: #dddddd; 8 | $codebg: #f8f8f8; 9 | $red: #f66; 10 | $info: #1c90f3; 11 | 12 | $MQNarrow: 959px; 13 | $MQMobile: 719px; 14 | $MQMobileNarrow: 419px; 15 | 16 | $fontHome: 'Open Sans', 'Inter', Roboto, Oxygen, Fira Sans, Helvetica Neue, 17 | sans-serif; 18 | -------------------------------------------------------------------------------- /src/.vuepress/theme/styles/arrow.styl: -------------------------------------------------------------------------------- 1 | @require './config' 2 | 3 | .arrow 4 | display inline-block 5 | width 0 6 | height 0 7 | &.up 8 | border-left 4px solid transparent 9 | border-right 4px solid transparent 10 | border-bottom 6px solid $arrowBgColor 11 | &.down 12 | border-left 4px solid transparent 13 | border-right 4px solid transparent 14 | border-top 6px solid $arrowBgColor 15 | &.right 16 | border-top 4px solid transparent 17 | border-bottom 4px solid transparent 18 | border-left 6px solid $arrowBgColor 19 | &.left 20 | border-top 4px solid transparent 21 | border-bottom 4px solid transparent 22 | border-right 6px solid $arrowBgColor 23 | -------------------------------------------------------------------------------- /src/.vuepress/theme/styles/config.styl: -------------------------------------------------------------------------------- 1 | $contentClass = '.theme-default-content' 2 | $fontPrimary = 'Inter', Roboto, Oxygen, Fira Sans,Helvetica Neue, sans-serif; 3 | -------------------------------------------------------------------------------- /src/.vuepress/theme/styles/custom-blocks.styl: -------------------------------------------------------------------------------- 1 | .custom-block 2 | .custom-block-title 3 | font-weight 600 4 | margin-bottom -0.4rem 5 | &.tip, &.warning, &.danger 6 | padding .1rem 1.5rem 7 | border-left-width .5rem 8 | border-left-style solid 9 | margin 1rem 0 10 | &.tip 11 | background-color #f3f5f7 12 | border-color #42b983 13 | &.warning 14 | background-color rgba(255,229,100,.3) 15 | border-color darken(#ffe564, 35%) 16 | color darken(#ffe564, 70%) 17 | .custom-block-title 18 | color darken(#ffe564, 50%) 19 | &.danger 20 | background-color #ffe6e6 21 | border-color darken(red, 20%) 22 | color darken(red, 70%) 23 | .custom-block-title 24 | color darken(red, 40%) 25 | &.details 26 | display block 27 | position relative 28 | border-radius 2px 29 | margin 1.6em 0 30 | padding 1.6em 31 | background-color #eee 32 | h4 33 | margin-top 0 34 | figure, p 35 | &:last-child 36 | margin-bottom 0 37 | padding-bottom 0 38 | summary 39 | outline none 40 | cursor pointer 41 | -------------------------------------------------------------------------------- /src/.vuepress/theme/styles/mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin breakpoint($breakpoint) { 2 | @media (min-width: $breakpoint) { 3 | @content; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /src/.vuepress/theme/styles/mobile.styl: -------------------------------------------------------------------------------- 1 | @require './config' 2 | 3 | $mobileSidebarWidth = $sidebarWidth * 0.82 4 | 5 | // narrow desktop / iPad 6 | @media (max-width: $MQNarrow) 7 | .sidebar 8 | font-size 15px 9 | width $mobileSidebarWidth 10 | .page 11 | padding-left $mobileSidebarWidth 12 | 13 | // wide mobile 14 | @media (max-width: $MQMobile) 15 | .sidebar 16 | transform translateX(-100%) 17 | transition transform .2s ease 18 | .page 19 | padding-left 0 20 | .theme-container 21 | &.sidebar-open 22 | .sidebar 23 | transform translateX(0) 24 | &.no-navbar 25 | .sidebar 26 | padding-top: 0 27 | 28 | // narrow mobile 29 | @media (max-width: $MQMobileNarrow) 30 | h1 31 | font-size 1.9rem 32 | {$contentClass} 33 | div[class*="language-"] 34 | margin 0.85rem -1.5rem 35 | border-radius 0 36 | -------------------------------------------------------------------------------- /src/.vuepress/theme/styles/toc.styl: -------------------------------------------------------------------------------- 1 | .table-of-contents 2 | .badge 3 | vertical-align middle 4 | -------------------------------------------------------------------------------- /src/.vuepress/theme/styles/wrapper.styl: -------------------------------------------------------------------------------- 1 | $wrapper 2 | max-width $contentWidth 3 | margin 0 auto 4 | padding 2rem 2.5rem 5 | @media (max-width: $MQNarrow) 6 | padding 2rem 2rem 7 | @media (max-width: $MQMobileNarrow) 8 | padding 2rem 1.5rem 9 | 10 | html.with-beta-banner & 11 | padding-top calc(2rem + 3rem) 12 | 13 | -------------------------------------------------------------------------------- /src/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | home: true 3 | heroImage: /logo.png 4 | heroText: Vue.js 5 | tagline: The Progressive
JavaScript Framework 6 | actionButtons: 7 | - text: Why Vue.js? 8 | link: / 9 | extraClass: vuemastery-trigger primary 10 | icon: fa fa-play-circle 11 | - text: Get Started 12 | link: /guide/introduction 13 | - text: GitHub 14 | link: https://github.com/vuejs/vue-next 15 | extraClass: github grey 16 | icon: fa fa-github 17 | target: _blank 18 | features: 19 | - title: Approachable 20 | details: Already know HTML, CSS and JavaScript? Read the guide and start building things in no time! 21 | - title: Versatile 22 | details: An incrementally adoptable ecosystem that scales between a library and a full-featured framework. 23 | - title: Performant 24 | details: | 25 | 20KB min+gzip Runtime
26 | Blazing Fast Virtual DOM
27 | Minimal Optimization Efforts 28 | footer: | 29 | Released under the MIT License
30 | Copyright © 2014-2021 Evan You 31 | socialIcons: 32 | - type: GitHub 33 | link: https://github.com/vuejs/vue-next 34 | - type: Twitter 35 | link: https://twitter.com/vuejs 36 | - type: Medium 37 | link: https://medium.com/the-vue-point 38 | --- 39 | 40 | 41 | -------------------------------------------------------------------------------- /src/api/index.md: -------------------------------------------------------------------------------- 1 | # API 2 | 3 | The Vue.js API contains the following categories: 4 | 5 | - [Application Config](/api/application-config.html) 6 | - [Application API](/api/application-api.html) 7 | - [Global API](/api/global-api.html) 8 | - [Options API](/api/options-api.html) 9 | - [Instance Properties](/api/instance-properties.html) 10 | - [Instance Methods](/api/instance-methods.html) 11 | - [Directives](/api/directives.html) 12 | - [Special Attributes](/api/special-attributes.html) 13 | - [Built-in Components](/api/built-in-components.html) 14 | - [Reactivity API](/api/reactivity-api.html) 15 | - [Composition API](/api/composition-api.html) 16 | -------------------------------------------------------------------------------- /src/api/options-api.md: -------------------------------------------------------------------------------- 1 | # Options API 2 | 3 | The Options API contains the following sections: 4 | 5 | - [Data](/api/options-data.html) 6 | - [DOM](/api/options-dom.html) 7 | - [Lifecycle Hooks](/api/options-lifecycle-hooks.html) 8 | - [Assets](/api/options-assets.html) 9 | - [Composition](/api/options-composition.html) 10 | - [Miscellaneous](/api/options-misc.html) 11 | -------------------------------------------------------------------------------- /src/api/options-assets.md: -------------------------------------------------------------------------------- 1 | # Assets 2 | 3 | ## directives 4 | 5 | - **Type:** `Object` 6 | 7 | - **Details:** 8 | 9 | A hash of directives to be made available to the component instance. 10 | 11 | - **Usage:** 12 | 13 | ```js 14 | const app = createApp({}) 15 | 16 | app.component('focused-input', { 17 | directives: { 18 | focus: { 19 | mounted(el) { 20 | el.focus() 21 | } 22 | } 23 | }, 24 | template: `` 25 | }) 26 | ``` 27 | 28 | - **See also:** [Custom Directives](../guide/custom-directive.html) 29 | 30 | ## components 31 | 32 | - **Type:** `Object` 33 | 34 | - **Details:** 35 | 36 | A hash of components to be made available to the component instance. 37 | 38 | - **Usage:** 39 | 40 | ```js 41 | const Foo = { 42 | template: `
Foo
` 43 | } 44 | 45 | const app = createApp({ 46 | components: { 47 | Foo 48 | }, 49 | template: `` 50 | }) 51 | ``` 52 | 53 | - **See also:** [Components](../guide/component-basics.html) 54 | -------------------------------------------------------------------------------- /src/api/options-dom.md: -------------------------------------------------------------------------------- 1 | # DOM 2 | 3 | ## template 4 | 5 | - **Type:** `string` 6 | 7 | - **Details:** 8 | 9 | A string template to be used as the markup for the component instance. The template will **replace** the `innerHTML` of mounted element. Any existing markup inside the mounted element will be ignored, unless content distribution slots are present in the template. 10 | 11 | If the string starts with `#` it will be used as a `querySelector` and use the selected element's innerHTML as the template string. This allows the use of the common ` 11 | Vue classes 12 | 13 | 14 | 15 |
16 | 24 | 25 | 26 |
27 | 28 | 55 | 56 | -------------------------------------------------------------------------------- /src/examples/dynamic-components/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dynamic-components", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.html", 6 | "scripts": { 7 | "start": "serve" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/codesandbox-app/static-template.git" 12 | }, 13 | "keywords": [], 14 | "author": "Ives van Hoorne", 15 | "license": "MIT", 16 | "bugs": { 17 | "url": "https://github.com/codesandbox-app/static-template/issues" 18 | }, 19 | "homepage": "https://github.com/codesandbox-app/static-template#readme", 20 | "devDependencies": { 21 | "serve": "^11.2.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/examples/dynamic-components/sandbox.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "template": "static" 3 | } 4 | -------------------------------------------------------------------------------- /src/examples/dynamic-components/style.css: -------------------------------------------------------------------------------- 1 | .tab-button { 2 | padding: 6px 10px; 3 | border-top-left-radius: 3px; 4 | border-top-right-radius: 3px; 5 | border: 1px solid #ccc; 6 | cursor: pointer; 7 | background: #f0f0f0; 8 | margin-bottom: -1px; 9 | margin-right: -1px; 10 | } 11 | .tab-button:hover { 12 | background: #e0e0e0; 13 | } 14 | .tab-button.active { 15 | background: #e0e0e0; 16 | } 17 | .tab { 18 | border: 1px solid #ccc; 19 | padding: 10px; 20 | } 21 | -------------------------------------------------------------------------------- /src/examples/elastic-header.md: -------------------------------------------------------------------------------- 1 | # Elastic Header Example 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/examples/grid-component.md: -------------------------------------------------------------------------------- 1 | # Grid Component 2 | 3 | > This is an example of creating a reusable grid component and using it with external data. 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/examples/markdown.md: -------------------------------------------------------------------------------- 1 | # Markdown Editor 2 | 3 | > A simple Markdown editor 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/examples/modal.md: -------------------------------------------------------------------------------- 1 | # Modal Component 2 | 3 | > Features used: component, prop passing, content insertion, transitions. 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/examples/select2.md: -------------------------------------------------------------------------------- 1 | # Wrapper Component Example 2 | 3 | > In this example we are integrating a 3rd party jQuery plugin (select2) by wrapping it inside a custom component. 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/examples/svg.md: -------------------------------------------------------------------------------- 1 | # SVG Graph 2 | 3 | > This example showcases a combination of custom component, computed property, two-way binding and SVG support. 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/examples/todomvc.md: -------------------------------------------------------------------------------- 1 | # TodoMVC 2 | 3 | > This is a fully spec-compliant TodoMVC implementation in under 120 effective lines of JavaScript (excluding comments and blank lines). 4 | 5 | :::warning 6 | Note that if your web browser is configured to block 3rd-party data/cookies, the example below will not work, as the **localStorage** data will fail to be saved. 7 | ::: 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/examples/tree-view.md: -------------------------------------------------------------------------------- 1 | # Tree View 2 | 3 | > Example of a tree view implementation showcasing recursive usage of components. 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/guide/a11y-standards.md: -------------------------------------------------------------------------------- 1 | # Standards 2 | 3 | The World Wide Web Consortium (W3C) Web Accessibility Initiative (WAI) develops web accessibility standards for the different components: 4 | 5 | - [User Agent Accessibility Guidelines (UAAG)](https://www.w3.org/WAI/standards-guidelines/uaag/) 6 | - web browsers and media players, including some aspects of assistive technologies 7 | - [Authoring Tool Accessibility Guidelines (ATAG)](https://www.w3.org/WAI/standards-guidelines/atag/) 8 | - authoring tools 9 | - [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/standards-guidelines/wcag/) 10 | - web content - used by developers, authoring tools, and accessibility evaluation tools 11 | 12 | ## Web Content Accessibility Guidelines (WCAG) 13 | 14 | [WCAG 2.1](https://www.w3.org/TR/WCAG21/) extends on [WCAG 2.0](https://www.w3.org/TR/WCAG20/) and allows implementation of new technologies by addressing changes to the web. The W3C encourages use of the most current version of WCAG when developing or updating Web accessibility policies. 15 | 16 | ### WCAG 2.1 Four Main Guiding Principles (abbreviated as POUR): 17 | 18 | - [Perceivable](https://www.w3.org/TR/WCAG21/#perceivable) 19 | - Users must be able to perceive the information being presented 20 | - [Operable](https://www.w3.org/TR/WCAG21/#operable) 21 | - Interface forms, controls, and navigation are operable 22 | - [Understandable](https://www.w3.org/TR/WCAG21/#understandable) 23 | - Information and the operation of user interface must be understandable to all users 24 | - [Robust](https://www.w3.org/TR/WCAG21/#robust) 25 | - Users must be able to access the content as technologies advance 26 | 27 | ### Web Accessibility Initiative – Accessible Rich Internet Applications (WAI-ARIA) 28 | 29 | W3C's WAI-ARIA provides guidance on how to build dynamic content and advanced user interface controls. 30 | 31 | - [Accessible Rich Internet Applications (WAI-ARIA) 1.2](https://www.w3.org/TR/wai-aria-1.2/) 32 | - [WAI-ARIA Authoring Practices 1.2](https://www.w3.org/TR/wai-aria-practices-1.2/) 33 | -------------------------------------------------------------------------------- /src/guide/component-edge-cases.md: -------------------------------------------------------------------------------- 1 | # Handling Edge Cases 2 | 3 | > This page assumes you've already read the [Components Basics](component-basics.md). Read that first if you are new to components. 4 | 5 | :::tip Note 6 | All the features on this page document the handling of edge cases, meaning unusual situations that sometimes require bending Vue's rules a little. Note however, that they all have disadvantages or situations where they could be dangerous. These are noted in each case, so keep them in mind when deciding to use each feature. 7 | ::: 8 | 9 | ## Controlling Updates 10 | 11 | Thanks to Vue's Reactivity system, it always knows when to update (if you use it correctly). There are edge cases, however, when you might want to force an update, despite the fact that no reactive data has changed. Then there are other cases when you might want to prevent unnecessary updates. 12 | 13 | ### Forcing an Update 14 | 15 | If you find yourself needing to force an update in Vue, in 99.99% of cases, you've made a mistake somewhere. For example, you may be relying on state that isn't tracked by Vue's reactivity system, e.g. with `data` property added after component creation. 16 | 17 | However, if you've ruled out the above and find yourself in this extremely rare situation of having to manually force an update, you can do so with [`$forceUpdate`](../api/instance-methods.html#forceupdate). 18 | 19 | ### Cheap Static Components with `v-once` 20 | 21 | Rendering plain HTML elements is very fast in Vue, but sometimes you might have a component that contains **a lot** of static content. In these cases, you can ensure that it's only evaluated once and then cached by adding the `v-once` directive to the root element, like this: 22 | 23 | ```js 24 | app.component('terms-of-service', { 25 | template: ` 26 |
27 |

Terms of Service

28 | ... a lot of static content ... 29 |
30 | ` 31 | }) 32 | ``` 33 | 34 | :::tip 35 | Once again, try not to overuse this pattern. While convenient in those rare cases when you have to render a lot of static content, it's simply not necessary unless you actually notice slow rendering - plus, it could cause a lot of confusion later. For example, imagine another developer who's not familiar with `v-once` or simply misses it in the template. They might spend hours trying to figure out why the template isn't updating correctly. 36 | ::: 37 | -------------------------------------------------------------------------------- /src/guide/component-template-refs.md: -------------------------------------------------------------------------------- 1 | # Template refs 2 | 3 | > This page assumes you've already read the [Components Basics](component-basics.md). Read that first if you are new to components. 4 | 5 | Despite the existence of props and events, sometimes you might still need to directly access a child component in JavaScript. To achieve this you can assign a reference ID to the child component or HTML element using the `ref` attribute. For example: 6 | 7 | ```html 8 | 9 | ``` 10 | 11 | This may be useful when you want to, for example, programmatically focus this input on component mount: 12 | 13 | ```js 14 | const app = Vue.createApp({}) 15 | 16 | app.component('base-input', { 17 | template: ` 18 | 19 | `, 20 | methods: { 21 | focusInput() { 22 | this.$refs.input.focus() 23 | } 24 | }, 25 | mounted() { 26 | this.focusInput() 27 | } 28 | }) 29 | ``` 30 | 31 | Also, you can add another `ref` to the component itself and use it to trigger `focusInput` event from the parent component: 32 | 33 | ```html 34 | 35 | ``` 36 | 37 | ```js 38 | this.$refs.usernameInput.focusInput() 39 | ``` 40 | 41 | ::: warning 42 | `$refs` are only populated after the component has been rendered. It is only meant as an escape hatch for direct child manipulation - you should avoid accessing `$refs` from within templates or computed properties. 43 | ::: 44 | 45 | **See also**: [Using template refs in Composition API](/guide/composition-api-template-refs.html#template-refs) 46 | -------------------------------------------------------------------------------- /src/guide/composition-api-lifecycle-hooks.md: -------------------------------------------------------------------------------- 1 | # Lifecycle Hooks 2 | 3 | > This guide assumes that you have already read the [Composition API Introduction](composition-api-introduction.html) and [Reactivity Fundamentals](reactivity-fundamentals.html). Read that first if you are new to Composition API. 4 | 5 | Watch a free video about Lifecycle Hooks on Vue Mastery 6 | 7 | You can access a component's lifecycle hook by prefixing the lifecycle hook with "on". 8 | 9 | The following table contains how the lifecycle hooks are invoked inside of [setup()](composition-api-setup.html): 10 | 11 | | Options API | Hook inside `setup` | 12 | | ----------------- | ------------------- | 13 | | `beforeCreate` | Not needed\* | 14 | | `created` | Not needed\* | 15 | | `beforeMount` | `onBeforeMount` | 16 | | `mounted` | `onMounted` | 17 | | `beforeUpdate` | `onBeforeUpdate` | 18 | | `updated` | `onUpdated` | 19 | | `beforeUnmount` | `onBeforeUnmount` | 20 | | `unmounted` | `onUnmounted` | 21 | | `errorCaptured` | `onErrorCaptured` | 22 | | `renderTracked` | `onRenderTracked` | 23 | | `renderTriggered` | `onRenderTriggered` | 24 | | `activated` | `onActivated` | 25 | | `deactivated` | `onDeactivated` | 26 | 27 | 28 | :::tip 29 | Because `setup` is run around the `beforeCreate` and `created` lifecycle hooks, you do not need to explicitly define them. In other words, any code that would be written inside those hooks should be written directly in the `setup` function. 30 | ::: 31 | 32 | These functions accept a callback that will be executed when the hook is called by the component: 33 | 34 | ```js 35 | // MyBook.vue 36 | 37 | export default { 38 | setup() { 39 | // mounted 40 | onMounted(() => { 41 | console.log('Component is mounted!') 42 | }) 43 | } 44 | } 45 | ``` 46 | -------------------------------------------------------------------------------- /src/guide/contributing/doc-style-guide.md: -------------------------------------------------------------------------------- 1 | # Documentation Style Guide 2 | 3 | This guide will provide an overview of different design elements that are available for your use in creating documentation. 4 | 5 | ## Alerts 6 | 7 | VuePress provides a custom container plugin to create alert boxes. There are four types: 8 | 9 | - **Info**: Provide information that is neutral 10 | - **Tip**: Provide information that is positive and encouraged 11 | - **Warning**: Provide information that users should be aware of as there is a low to moderate 12 | - **Danger**: Provide information that is negative and has a high risk to the user 13 | 14 | **Markdown Examples** 15 | 16 | ``` 17 | ::: info 18 | You can find more information at this site. 19 | ::: 20 | 21 | ::: tip 22 | This is a great tip to remember! 23 | ::: 24 | 25 | ::: warning 26 | This is something to be cautious of. 27 | ::: 28 | 29 | ::: danger DANGER 30 | This is something we do not recommend. Use at your own risk. 31 | ::: 32 | ``` 33 | 34 | **Rendered Markdown** 35 | 36 | ::: info 37 | You can find more information at this site. 38 | ::: 39 | 40 | ::: tip 41 | This is a great tip to remember! 42 | ::: 43 | 44 | ::: warning 45 | This is something to be cautious of. 46 | ::: 47 | 48 | ::: danger DANGER 49 | This is something we do not recommend. Use at your own risk. 50 | ::: 51 | 52 | ## Code Blocks 53 | 54 | VuePress uses Prism to provide language syntax highlighting by appending the language to the beginning backticks of a code block: 55 | 56 | **Markdown Example** 57 | 58 | ```` 59 | ```js 60 | export default { 61 | name: 'MyComponent' 62 | } 63 | ``` 64 | ```` 65 | 66 | **Rendered Output** 67 | 68 | ```js 69 | export default { 70 | name: 'MyComponent' 71 | } 72 | ``` 73 | 74 | ### Line Highlighting 75 | 76 | To add line highlighting to your code blocks, you need to append the line number in curly braces. 77 | 78 | #### Single Line 79 | 80 | **Markdown Example** 81 | 82 | ```` 83 | ```js{2} 84 | export default { 85 | name: 'MyComponent', 86 | props: { 87 | type: String, 88 | item: Object 89 | } 90 | } 91 | ``` 92 | ```` 93 | 94 | **Rendered Markdown** 95 | 96 | ```js{2} 97 | export default { 98 | name: 'MyComponent', 99 | props: { 100 | type: String, 101 | item: Object 102 | } 103 | } 104 | ``` 105 | 106 | #### Group of Lines 107 | 108 | ```` 109 | ```js{4-5} 110 | export default { 111 | name: 'MyComponent', 112 | props: { 113 | type: String, 114 | item: Object 115 | } 116 | } 117 | ``` 118 | ```` 119 | 120 | ```js{4-5} 121 | export default { 122 | name: 'MyComponent', 123 | props: { 124 | type: String, 125 | item: Object 126 | } 127 | } 128 | ``` 129 | 130 | #### Multiple Sections 131 | 132 | ```` 133 | ```js{2,4-5} 134 | export default { 135 | name: 'MyComponent', 136 | props: { 137 | type: String, 138 | item: Object 139 | } 140 | } 141 | ``` 142 | ```` 143 | 144 | ```js{2,4-5} 145 | export default { 146 | name: 'MyComponent', 147 | props: { 148 | type: String, 149 | item: Object 150 | } 151 | } 152 | ``` 153 | -------------------------------------------------------------------------------- /src/guide/migration/array-refs.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: v-for Array Refs 3 | badges: 4 | - breaking 5 | --- 6 | 7 | # {{ $frontmatter.title }} 8 | 9 | In Vue 2, using the `ref` attribute inside `v-for` will populate the corresponding `$refs` property with an array of refs. This behavior becomes ambiguous and inefficient when there are nested `v-for`s present. 10 | 11 | In Vue 3, such usage will no longer automatically create an array in `$refs`. To retrieve multiple refs from a single binding, bind `ref` to a function which provides more flexibility (this is a new feature): 12 | 13 | ```html 14 |
15 | ``` 16 | 17 | With Options API: 18 | 19 | ```js 20 | export default { 21 | data() { 22 | return { 23 | itemRefs: [] 24 | } 25 | }, 26 | methods: { 27 | setItemRef(el) { 28 | if (el) { 29 | this.itemRefs.push(el) 30 | } 31 | } 32 | }, 33 | beforeUpdate() { 34 | this.itemRefs = [] 35 | }, 36 | updated() { 37 | console.log(this.itemRefs) 38 | } 39 | } 40 | ``` 41 | 42 | With Composition API: 43 | 44 | ```js 45 | import { onBeforeUpdate, onUpdated } from 'vue' 46 | 47 | export default { 48 | setup() { 49 | let itemRefs = [] 50 | const setItemRef = el => { 51 | if (el) { 52 | itemRefs.push(el) 53 | } 54 | } 55 | onBeforeUpdate(() => { 56 | itemRefs = [] 57 | }) 58 | onUpdated(() => { 59 | console.log(itemRefs) 60 | }) 61 | return { 62 | setItemRef 63 | } 64 | } 65 | } 66 | ``` 67 | 68 | Note that: 69 | 70 | - `itemRefs` doesn't have to be an array: it can also be an object where the refs are set by their iteration keys. 71 | 72 | - This also allows `itemRefs` to be made reactive and watched, if needed. 73 | -------------------------------------------------------------------------------- /src/guide/migration/attrs-includes-class-style.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: $attrs includes class & style 3 | badges: 4 | - breaking 5 | --- 6 | 7 | # `$attrs` includes `class` & `style` 8 | 9 | ## Overview 10 | 11 | `$attrs` now contains _all_ attributes passed to a component, including `class` and `style`. 12 | 13 | ## 2.x Behavior 14 | 15 | `class` and `style` attributes get some special handling in the Vue 2 virtual DOM implementation. For that reason, they are _not_ included in `$attrs`, while all other attributes are. 16 | 17 | A side effect of this manifests when using `inheritAttrs: false`: 18 | 19 | - Attributes in `$attrs` are no longer automatically added to the root element, leaving it to the developer to decide where to add them. 20 | - But `class` and `style`, not being part of `$attrs`, will still be applied to the component's root element: 21 | 22 | ```vue 23 | 28 | 33 | ``` 34 | 35 | when used like this: 36 | 37 | ```html 38 | 39 | ``` 40 | 41 | ...will generate this HTML: 42 | 43 | ```html 44 | 47 | ``` 48 | 49 | ## 3.x Behavior 50 | 51 | `$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: 52 | 53 | ```html 54 | 57 | ``` 58 | 59 | ## Migration Strategy 60 | 61 | In components that use `inheritAttrs: false`, make sure that styling still works as intended. If you previously relied on the special behavior of `class` and `style`, some visuals might be broken as these attributes might now be applied to another element. 62 | 63 | ## See also 64 | 65 | - [Relevant RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0031-attr-fallthrough.md) 66 | - [Migration guide - `$listeners` removed](./listeners-removed.md) 67 | - [Migration guide - New Emits Option](./emits-option.md) 68 | - [Migration guide - `.native` modifier removed](./v-on-native-modifier-removed.md) 69 | - [Migration guide - Changes in the Render Functions API](./render-function-api.md) 70 | -------------------------------------------------------------------------------- /src/guide/migration/children.md: -------------------------------------------------------------------------------- 1 | --- 2 | badges: 3 | - removed 4 | --- 5 | 6 | # $children 7 | 8 | ## Overview 9 | 10 | The `$children` instance property has been removed from Vue 3.0 and is no longer supported. 11 | 12 | ## 2.x Syntax 13 | 14 | In 2.x, developers could access direct child components of the current instance with `this.$children`: 15 | 16 | ```vue 17 | 23 | 24 | 36 | ``` 37 | 38 | ## 3.x Update 39 | 40 | In 3.x, the `$children` property is removed and no longer supported. Instead, if you need to access a child component instance, we recommend using [$refs](/guide/component-template-refs.html#template-refs). 41 | -------------------------------------------------------------------------------- /src/guide/migration/data-option.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Data Option 3 | badges: 4 | - breaking 5 | --- 6 | 7 | # {{ $frontmatter.title }} 8 | 9 | ## Overview 10 | 11 | - **BREAKING**: `data` component option declaration no longer accepts a plain JavaScript `object` and expects a `function` declaration. 12 | 13 | - **BREAKING**: when merging multiple `data` return values from mixins or extends, the merge is now shallow instead of deep (only root-level properties are merged). 14 | 15 | ## 2.x Syntax 16 | 17 | In 2.x, developers could define the `data` option with either an `object` or a `function`. 18 | 19 | For example: 20 | 21 | ```html 22 | 23 | 30 | 31 | 32 | 41 | ``` 42 | 43 | Though this provided some convenience in terms of root instances having a shared state, this has led to confusion due to the fact that its only possible on the root instance. 44 | 45 | ## 3.x Update 46 | 47 | In 3.x, the `data` option has been standardized to only accept a `function` that returns an `object`. 48 | 49 | Using the example above, there would only be one possible implementation of the code: 50 | 51 | ```html 52 | 63 | ``` 64 | 65 | ## Mixin Merge Behavior Change 66 | 67 | In addition, when `data()` from a component and its mixins or extends base are merged, the merge is now performed *shallowly*: 68 | 69 | ```js 70 | const Mixin = { 71 | data() { 72 | return { 73 | user: { 74 | name: 'Jack', 75 | id: 1 76 | } 77 | } 78 | } 79 | } 80 | 81 | const CompA = { 82 | mixins: [Mixin], 83 | data() { 84 | return { 85 | user: { 86 | id: 2 87 | } 88 | } 89 | } 90 | } 91 | ``` 92 | 93 | In Vue 2.x, the resulting `$data` is: 94 | 95 | ```json 96 | { 97 | user: { 98 | id: 2, 99 | name: 'Jack' 100 | } 101 | } 102 | ``` 103 | 104 | In 3.0, the result will be: 105 | 106 | ```json 107 | { 108 | user: { 109 | id: 2 110 | } 111 | } 112 | ``` 113 | 114 | ## Migration Strategy 115 | 116 | For users relying on the object declaration, we recommend: 117 | 118 | - Extracting the shared data into an external object and using it as a property in `data` 119 | - Rewrite references to the shared data to point to a new shared object 120 | 121 | For users relying on the deep merge behavior from mixins, we recommend refactoring your code to avoid such reliance altogether, since deep merges from mixins are very implicit and can make the code logic more difficult to understand and debug. 122 | -------------------------------------------------------------------------------- /src/guide/migration/events-api.md: -------------------------------------------------------------------------------- 1 | --- 2 | badges: 3 | - breaking 4 | --- 5 | 6 | # Events API 7 | 8 | ## Overview 9 | 10 | `$on`, `$off` and `$once` instance methods are removed. Application instances no longer implement the event emitter interface. 11 | 12 | ## 2.x Syntax 13 | 14 | In 2.x, Vue instance could be used to trigger handlers attached imperatively via the event emitter API (`$on`, `$off` and `$once`). This was used to create _event hubs_ to create global event listeners used across the whole application: 15 | 16 | ```js 17 | // eventHub.js 18 | 19 | const eventHub = new Vue() 20 | 21 | export default eventHub 22 | ``` 23 | 24 | ```js 25 | // ChildComponent.vue 26 | import eventHub from './eventHub' 27 | 28 | export default { 29 | mounted() { 30 | // adding eventHub listener 31 | eventHub.$on('custom-event', () => { 32 | console.log('Custom event triggered!') 33 | }) 34 | }, 35 | beforeDestroy() { 36 | // removing eventHub listener 37 | eventHub.$off('custom-event') 38 | } 39 | } 40 | ``` 41 | 42 | ```js 43 | // ParentComponent.vue 44 | import eventHub from './eventHub' 45 | 46 | export default { 47 | methods: { 48 | callGlobalCustomEvent() { 49 | eventHub.$emit('custom-event') // if ChildComponent is mounted, we will have a message in the console 50 | } 51 | } 52 | } 53 | ``` 54 | 55 | ## 3.x Update 56 | 57 | We removed `$on`, `$off` and `$once` methods from the instance completely. `$emit` is still a part of the existing API as it's used to trigger event handlers declaratively attached by a parent component 58 | 59 | ## Migration Strategy 60 | 61 | In Vue 3, it is no longer possible to use these APIs to listen to a component's own emitted events from within a component, there is no migration path for that use case. 62 | 63 | But the eventHub pattern can be replaced by using an external library implementing the event emitter interface, for example [mitt](https://github.com/developit/mitt) or [tiny-emitter](https://github.com/scottcorgan/tiny-emitter). 64 | 65 | Example: 66 | 67 | ```js 68 | //eventHub.js 69 | import emitter from 'tiny-emitter/instance' 70 | 71 | export default { 72 | $on: (...args) => emitter.on(...args), 73 | $once: (...args) => emitter.once(...args), 74 | $off: (...args) => emitter.off(...args), 75 | $emit: (...args) => emitter.emit(...args), 76 | } 77 | ``` 78 | 79 | This provides the same event emitter API as in Vue 2. 80 | 81 | These methods may also be supported in a future compatibility build of Vue 3. 82 | -------------------------------------------------------------------------------- /src/guide/migration/filters.md: -------------------------------------------------------------------------------- 1 | --- 2 | badges: 3 | - removed 4 | --- 5 | 6 | # Filters 7 | 8 | ## Overview 9 | 10 | Filters are removed from Vue 3.0 and no longer supported. 11 | 12 | ## 2.x Syntax 13 | 14 | In 2.x, developers could use filters in order to apply common text formatting. 15 | 16 | For example: 17 | 18 | ```html 19 | 23 | 24 | 39 | ``` 40 | 41 | While this seems like a convenience, it requires a custom syntax that breaks the assumption of expressions inside of curly braces being "just JavaScript," which has both learning and implementation costs. 42 | 43 | ## 3.x Update 44 | 45 | In 3.x, filters are removed and no longer supported. Instead, we recommend replacing them with method calls or computed properties. 46 | 47 | Using the example above, here is one example of how it could be implemented. 48 | 49 | ```html 50 | 54 | 55 | 70 | ``` 71 | 72 | ## Migration Strategy 73 | 74 | Instead of using filters, we recommend replacing them with computed properties or methods. 75 | 76 | ### Global Filters 77 | 78 | If you are using filters that were globally registered and then used throughout your app, it's likely not convenient to replace them with computed properties or methods in each individual component. 79 | 80 | Instead, you can make your global filters available to all components through [globalProperties](../../api/application-config.html#globalproperties): 81 | 82 | ```js 83 | // main.js 84 | const app = createApp(App) 85 | 86 | app.config.globalProperties.$filters = { 87 | currencyUSD(value) { 88 | return '$' + value 89 | } 90 | } 91 | ``` 92 | 93 | Then you can fix all templates using this `$filters` object like this: 94 | 95 | ```html 96 | 100 | ``` 101 | 102 | Note that with this approach, you can only use methods, not computed properties, as the latter only make sense when defined in the context of an individual component. 103 | -------------------------------------------------------------------------------- /src/guide/migration/fragments.md: -------------------------------------------------------------------------------- 1 | --- 2 | badges: 3 | - new 4 | --- 5 | 6 | # Fragments 7 | 8 | ## Overview 9 | 10 | In Vue 3, components now have official support for multi-root node components, i.e., fragments! 11 | 12 | ## 2.x Syntax 13 | 14 | In 2.x, multi-root components were not supported and would emit a warning when a user accidentally created one. As a result, many components are wrapped in a single `
` in order to fix this error. 15 | 16 | ```html 17 | 18 | 25 | ``` 26 | 27 | ## 3.x Syntax 28 | 29 | In 3.x, components now can have multiple root nodes! However, this does require developers to explicitly define where attributes should be distributed. 30 | 31 | ```html 32 | 33 | 38 | ``` 39 | 40 | For more information on how attribute inheritance works, see [Non-Prop Attributes](/guide/component-attrs.html). 41 | -------------------------------------------------------------------------------- /src/guide/migration/inline-template-attribute.md: -------------------------------------------------------------------------------- 1 | --- 2 | badges: 3 | - breaking 4 | --- 5 | 6 | # Inline Template Attribute 7 | 8 | ## Overview 9 | 10 | Support for the [inline-template feature](https://vuejs.org/v2/guide/components-edge-cases.html#Inline-Templates) has been removed. 11 | 12 | ## 2.x Syntax 13 | 14 | In 2.x, Vue provided the `inline-template` attribute on child components to use its inner content as its template instead of treating it as distributed content. 15 | 16 | ```html 17 | 18 |
19 |

These are compiled as the component's own template.

20 |

Not parent's transclusion content.

21 |
22 | 23 | ``` 24 | 25 | ## 3.x Syntax 26 | 27 | This feature will no longer be supported. 28 | 29 | ## Migration Strategy 30 | 31 | Most of the use cases for `inline-template` assumes a no-build-tool setup, where all templates are written directly inside the HTML page. 32 | 33 | ### Option #1: Use ` 41 | ``` 42 | 43 | And in the component, target the template using a selector: 44 | 45 | ```js 46 | const MyComp = { 47 | template: '#my-comp-template' 48 | // ... 49 | } 50 | ``` 51 | 52 | This doesn't require any build setup, works in all browsers, is not subject to any in-DOM HTML parsing caveats (e.g. you can use camelCase prop names), and provides proper syntax highlighting in most IDEs. In traditional server-side frameworks, these templates can be split out into server template partials (included into the main HTML template) for better maintainability. 53 | 54 | ### Option #2: Default Slot 55 | 56 | A component previously using `inline-template` can also be refactored using the default slot - which makes the data scoping more explicit while preserving the convenience of writing child content inline: 57 | 58 | ```html 59 | 60 | 61 | {{ msg }} {{ childState }} 62 | 63 | 64 | 65 | 66 | {{ parentMsg }} {{ childState }} 67 | 68 | ``` 69 | 70 | The child, instead of providing no template, should now render the default slot\*: 71 | 72 | ```html 73 | 77 | 80 | ``` 81 | 82 | > - Note: In 3.x, slots can be rendered as the root with native [fragments](/guide/migration/fragments) support! 83 | -------------------------------------------------------------------------------- /src/guide/migration/key-attribute.md: -------------------------------------------------------------------------------- 1 | --- 2 | badges: 3 | - breaking 4 | --- 5 | 6 | # `key` attribute 7 | 8 | ## Overview 9 | 10 | - **NEW:** `key`s are no longer necessary on `v-if`/`v-else`/`v-else-if` branches, since Vue now automatically generates unique `key`s. 11 | - **BREAKING:** If you manually provide `key`s, then each branch must use a unique `key`. You can no longer intentionally use the same `key` to force branch reuse. 12 | - **BREAKING:** `