├── .all-contributorsrc ├── .editorconfig ├── .github ├── pull.yml ├── 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 │ │ │ │ ├── bacancy_technology.png │ │ │ │ ├── bestvpn_co.png │ │ │ │ ├── dcloud.gif │ │ │ │ ├── devexpress.png │ │ │ │ ├── fastcoding_inc.svg │ │ │ │ ├── firestick_tricks.png │ │ │ │ ├── flatlogic_templates.svg │ │ │ │ ├── foo.png │ │ │ │ ├── frontendlove.png │ │ │ │ ├── hbuilder.png │ │ │ │ ├── html_burger.png │ │ │ │ ├── inkoop.png │ │ │ │ ├── intygrate.png │ │ │ │ ├── ionic.png │ │ │ │ ├── isolutions_uk_limited.png │ │ │ │ ├── laravel.png │ │ │ │ ├── moovweb.png │ │ │ │ ├── neds.png │ │ │ │ ├── onsen_ui.png │ │ │ │ ├── passionate_people.png │ │ │ │ ├── retool.png │ │ │ │ ├── roadster.png │ │ │ │ ├── shopware_ag.png │ │ │ │ ├── storyblok.svg │ │ │ │ ├── tidelift.png │ │ │ │ ├── usave.png │ │ │ │ ├── vehikl.png │ │ │ │ ├── vpnranks.png │ │ │ │ ├── vuejobs.png │ │ │ │ ├── vuemastery.png │ │ │ │ ├── vueschool.png │ │ │ │ └── y8.png │ │ │ ├── state.png │ │ │ ├── transition.png │ │ │ ├── transitions.svg │ │ │ ├── v-bind-instead-of-sync.png │ │ │ └── vueschool │ │ │ │ ├── extended.svg │ │ │ │ ├── tech-coin-js.png │ │ │ │ ├── tech-coin-nuxt.png │ │ │ │ ├── tech-coin-ts.png │ │ │ │ ├── tech-coin-vue.png │ │ │ │ ├── tech-coin-vuex.png │ │ │ │ ├── vueschool_banner_mobile.png │ │ │ │ ├── vueschool_blackfriday_background_tablet_2.svg │ │ │ │ ├── vueschool_blackfriday_logo.svg │ │ │ │ └── vueschool_close.svg │ │ ├── logo.png │ │ └── manifest.json │ ├── styles │ │ └── index.styl │ └── theme │ │ ├── LICENSE │ │ ├── README.md │ │ ├── components │ │ ├── AlgoliaSearchBox.vue │ │ ├── BannerCoins.vue │ │ ├── BannerTop.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 │ ├── effect-scope.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 │ ├── sfc-script-setup.md │ ├── sfc-spec.md │ ├── sfc-style.md │ ├── sfc-tooling.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 │ │ ├── migration-build.md │ │ ├── mount-changes.md │ │ ├── props-data.md │ │ ├── props-default-this.md │ │ ├── render-function-api.md │ │ ├── slots-unification.md │ │ ├── suspense.md │ │ ├── transition-as-root.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 │ ├── security.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 │ └── web-components.md ├── search │ └── README.md ├── style-guide │ └── README.md └── support-vuejs │ └── README.md └── yarn.lock /.all-contributorsrc: -------------------------------------------------------------------------------- 1 | { 2 | "files": [ 3 | "README.md" 4 | ], 5 | "imageSize": 100, 6 | "commit": false, 7 | "contributors": [ 8 | { 9 | "login": "mandaputtra", 10 | "name": "Manda Putra", 11 | "avatar_url": "https://avatars1.githubusercontent.com/u/23342943?v=4", 12 | "profile": "http://mandaputtra.github.io", 13 | "contributions": [ 14 | "code", 15 | "doc" 16 | ] 17 | }, 18 | { 19 | "login": "jefrydco", 20 | "name": "Jefry Dewangga", 21 | "avatar_url": "https://avatars0.githubusercontent.com/u/20434351?v=4", 22 | "profile": "https://jefrydco.id", 23 | "contributions": [ 24 | "doc" 25 | ] 26 | }, 27 | { 28 | "login": "Namchee", 29 | "name": "Cristopher", 30 | "avatar_url": "https://avatars1.githubusercontent.com/u/32661241?v=4", 31 | "profile": "http://namchee.netlify.app", 32 | "contributions": [ 33 | "translation" 34 | ] 35 | }, 36 | { 37 | "login": "RezaZR", 38 | "name": "Reza Z. Ramadan", 39 | "avatar_url": "https://avatars3.githubusercontent.com/u/9331014?v=4", 40 | "profile": "http://website-reza.vercel.app", 41 | "contributions": [ 42 | "translation" 43 | ] 44 | }, 45 | { 46 | "login": "zaiinhs", 47 | "name": "Zainal Abidin", 48 | "avatar_url": "https://avatars.githubusercontent.com/u/53314006?v=4", 49 | "profile": "http://zaiinhs.me", 50 | "contributions": [ 51 | "translation" 52 | ] 53 | }, 54 | { 55 | "login": "mufidu", 56 | "name": "Muhammad Mufid Utomo", 57 | "avatar_url": "https://avatars.githubusercontent.com/u/70360519?v=4", 58 | "profile": "http://mufidu.com", 59 | "contributions": [ 60 | "translation" 61 | ] 62 | }, 63 | { 64 | "login": "Elmerf", 65 | "name": "Elmer Fiqi", 66 | "avatar_url": "https://avatars.githubusercontent.com/u/61036187?v=4", 67 | "profile": "https://github.com/Elmerf", 68 | "contributions": [ 69 | "translation" 70 | ] 71 | } 72 | ], 73 | "contributorsPerLine": 7, 74 | "projectName": "docs-next", 75 | "projectOwner": "vuejs-id", 76 | "repoType": "github", 77 | "repoHost": "https://github.com", 78 | "skipCi": true 79 | } 80 | -------------------------------------------------------------------------------- /.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.yml: -------------------------------------------------------------------------------- 1 | version: '1' 2 | rules: 3 | - base: master 4 | upstream: vuejs:master # change `wei` to the owner of upstream repo 5 | mergeMethod: hardreset 6 | - base: indonesian 7 | upstream: master # Required. Can be a branch in the same forked repo. 8 | assignees: # Optional 9 | - mandaputtra 10 | reviewers: # Optional 11 | - mandaputtra 12 | conflictReviewers: # Optional, on merge conflict assign a reviewer 13 | - mandaputtra 14 | label: ":arrow_heading_down: pull" # Optional 15 | conflictLabel: "merge-conflict" # Optional, on merge conflict assign a custom label, Default: merge-conflict 16 | -------------------------------------------------------------------------------- /.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 | 105 | # NPM Lockfile 106 | package-lock.json -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /assets/diagrams.sketch: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/assets/diagrams.sketch -------------------------------------------------------------------------------- /assets/transitions-diagram.ai.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/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 | "intersection-observer": "^0.11.0", 18 | "showdown": "^1.9.1" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /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/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: 'Bahasa', 3 | github: 'GitHub', 4 | lastCommit: 'Commit terakhir', 5 | last90Days: '90 hari terakhir', 6 | loadDetails: 'Muat Detail', 7 | commits: 'commits', 8 | loading: 'Memuat...' 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', 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', url: 'https://v3-vuejsid-docs.netlify.app/' }, 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/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/AccessibilityChromeDeveloperTools.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/AccessibleARIAdescribedby.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/AccessibleARIAdescribedby.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/AccessibleARIAlabelDevTools.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/AccessibleARIAlabelDevTools.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/AccessibleARIAlabelledbyDevTools.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/AccessibleARIAlabelledbyDevTools.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/AccessibleLabelChromeDevTools.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/AccessibleLabelChromeDevTools.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/breakpoint_hit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/breakpoint_hit.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/breakpoint_set.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/breakpoint_set.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/coin-bch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/coin-bch.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/coin-btc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/coin-btc.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/coin-eth.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/coin-eth.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/coin-ltc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/coin-ltc.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/components.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/components.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/components_provide.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/components_provide.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/config_add.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/config_add.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/devtools-timetravel.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/devtools-timetravel.gif -------------------------------------------------------------------------------- /src/.vuepress/public/images/dom-tree.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/dom-tree.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/editable-svg-icons-sizes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/editable-svg-icons-sizes.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/editable-svg-icons.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/editable-svg-icons.jpg -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/android-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/icons/android-icon-144x144.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/android-icon-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/icons/android-icon-192x192.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/android-icon-36x36.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/icons/android-icon-36x36.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/android-icon-48x48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/icons/android-icon-48x48.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/android-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/icons/android-icon-72x72.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/android-icon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/icons/android-icon-96x96.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/apple-icon-114x114.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/icons/apple-icon-114x114.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/apple-icon-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/icons/apple-icon-120x120.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/apple-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/icons/apple-icon-144x144.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/apple-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/icons/apple-icon-152x152.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/apple-icon-180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/icons/apple-icon-180x180.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/apple-icon-57x57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/icons/apple-icon-57x57.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/apple-icon-60x60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/icons/apple-icon-60x60.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/apple-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/icons/apple-icon-72x72.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/apple-icon-76x76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/icons/apple-icon-76x76.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/apple-icon-precomposed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/icons/apple-icon-precomposed.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/icons/apple-icon.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/bacancy_technology.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/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/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/icons/favicon-16x16.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/icons/favicon-32x32.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/favicon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/icons/favicon-96x96.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/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/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/icons/ms-icon-144x144.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/ms-icon-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/icons/ms-icon-150x150.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/ms-icon-310x310.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/icons/ms-icon-310x310.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/ms-icon-70x70.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/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/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/options-api.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/oxford-comma.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/oxford-comma.jpg -------------------------------------------------------------------------------- /src/.vuepress/public/images/partners/monterail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/partners/monterail.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/partners/vehikl.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/partners/vehikl.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/paypal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/paypal.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/reactivity-spreadsheet.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/reactivity-spreadsheet.mp4 -------------------------------------------------------------------------------- /src/.vuepress/public/images/scoped-slot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/scoped-slot.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sfc-with-preprocessors.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/sfc-with-preprocessors.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sfc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/sfc.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/slot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/slot.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/bacancy_technology.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/sponsors/bacancy_technology.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/bestvpn_co.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/sponsors/bestvpn_co.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/dcloud.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/sponsors/dcloud.gif -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/devexpress.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/sponsors/devexpress.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/firestick_tricks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/sponsors/firestick_tricks.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/foo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/sponsors/foo.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/frontendlove.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/sponsors/frontendlove.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/hbuilder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/sponsors/hbuilder.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/html_burger.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/sponsors/html_burger.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/inkoop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/sponsors/inkoop.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/intygrate.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/sponsors/intygrate.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/ionic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/sponsors/ionic.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/isolutions_uk_limited.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/sponsors/isolutions_uk_limited.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/laravel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/sponsors/laravel.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/moovweb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/sponsors/moovweb.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/neds.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/sponsors/neds.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/onsen_ui.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/sponsors/onsen_ui.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/passionate_people.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/sponsors/passionate_people.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/retool.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/sponsors/retool.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/roadster.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/sponsors/roadster.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/shopware_ag.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/sponsors/shopware_ag.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/tidelift.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/sponsors/tidelift.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/usave.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/sponsors/usave.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/vehikl.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/sponsors/vehikl.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/vpnranks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/sponsors/vpnranks.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/vuejobs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/sponsors/vuejobs.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/vuemastery.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/sponsors/vuemastery.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/vueschool.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/sponsors/vueschool.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/y8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/sponsors/y8.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/state.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/state.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/transition.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/transition.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/v-bind-instead-of-sync.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/v-bind-instead-of-sync.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/vueschool/tech-coin-js.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/vueschool/tech-coin-js.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/vueschool/tech-coin-nuxt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/vueschool/tech-coin-nuxt.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/vueschool/tech-coin-ts.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/vueschool/tech-coin-ts.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/vueschool/tech-coin-vue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/vueschool/tech-coin-vue.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/vueschool/tech-coin-vuex.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/vueschool/tech-coin-vuex.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/vueschool/vueschool_banner_mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/src/.vuepress/public/images/vueschool/vueschool_banner_mobile.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/vueschool/vueschool_blackfriday_logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/.vuepress/public/images/vueschool/vueschool_close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/.vuepress/public/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-id/docs-next/b0e6f737f58bb5c1545f4f7a17ede151a6f35aac/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/styles/index.styl: -------------------------------------------------------------------------------- 1 | .demo { 2 | font-family: sans-serif; 3 | border: 1px solid #eee; 4 | border-radius: 2px; 5 | padding: 20px 30px; 6 | margin-top: 1em; 7 | margin-bottom: 40px; 8 | user-select: none; 9 | overflow-x: auto; 10 | } 11 | 12 | .custom-block { 13 | padding: 0.1rem 1.5rem; 14 | margin: 2em 0; 15 | border-left-width: 0.5rem; 16 | border-left-style: solid; 17 | position: relative; 18 | border-bottom-right-radius: 2px; 19 | border-top-right-radius: 2px; 20 | margin: 1rem 0; 21 | 22 | &::before { 23 | position: absolute; 24 | top: 19px; 25 | left: -14px; 26 | color: #fff; 27 | width: 20px; 28 | height: 20px; 29 | border-radius: 100%; 30 | text-align: center; 31 | line-height: 20px; 32 | font-weight: bold; 33 | font-family: 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif; 34 | font-size: 14px; 35 | } 36 | 37 | p { 38 | color: #222; 39 | } 40 | 41 | .custom-block-title { 42 | font-weight: 600; 43 | margin-bottom: -0.4rem; 44 | } 45 | 46 | &.info { 47 | border-color: #007bff; 48 | background-color: #f8f8f8; 49 | 50 | &::before { 51 | content: url('/images/icons/info.svg'); 52 | width: 25px; 53 | height: 25px; 54 | left: -16px; 55 | box-sizing: border-box; 56 | } 57 | } 58 | 59 | &.tip { 60 | border-color: #42b983; 61 | background-color: #f8f8f8; 62 | 63 | &::before { 64 | content: url('/images/icons/bulb.svg'); 65 | width: 25px; 66 | height: 25px; 67 | left: -16px; 68 | } 69 | } 70 | 71 | &.warning { 72 | border-color: #f4cd00; 73 | background-color: #f8f8f8; 74 | 75 | .custom-block-title { 76 | color: #222; 77 | } 78 | 79 | &::before { 80 | content: url('/images/icons/danger.svg'); 81 | width: 25px; 82 | height: 25px; 83 | left: -16px; 84 | box-sizing: border-box; 85 | } 86 | } 87 | 88 | &.danger { 89 | border-color: #f66; 90 | background-color: #f8f8f8; 91 | 92 | .custom-block-title { 93 | color: #222; 94 | } 95 | 96 | &::before { 97 | content: url('/images/icons/stop.svg'); 98 | width: 25px; 99 | height: 25px; 100 | left: -16px; 101 | } 102 | } 103 | 104 | &.details { 105 | display: block; 106 | position: relative; 107 | border-radius: 2px; 108 | margin: 1.6em 0; 109 | padding: 1.6em; 110 | background-color: #eee; 111 | h4 { 112 | margin-top: 0; 113 | } 114 | figure, 115 | p { 116 | &:last-child { 117 | margin-bottom: 0; 118 | padding-bottom: 0; 119 | } 120 | } 121 | summary { 122 | outline: none; 123 | cursor: pointer; 124 | } 125 | } 126 | } 127 | 128 | .sidebar-group.is-sub-group > .sidebar-heading:not(.clickable) { 129 | font-size: inherit; 130 | cursor: pointer!important; 131 | font-weight: bold; 132 | opacity: 1!important; 133 | } 134 | 135 | .badge { 136 | background-color: #b00000; 137 | font-size: 0.8rem; 138 | border: 2px solid #b00000; 139 | border-radius: 5px; 140 | margin-right: 0.5rem; 141 | color: #fff; 142 | padding: 0.25rem 0.25rem; 143 | } 144 | 145 | .dropdown-wrapper .nav-dropdown .dropdown-item h4 { 146 | margin-bottom: 0.3rem!important; 147 | } 148 | -------------------------------------------------------------------------------- /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/BannerCoins.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 53 | 54 | 132 | -------------------------------------------------------------------------------- /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 | 116 | -------------------------------------------------------------------------------- /src/.vuepress/theme/components/Newsletter.vue: -------------------------------------------------------------------------------- 1 | 36 | 37 | 92 | -------------------------------------------------------------------------------- /src/.vuepress/theme/components/Page.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 23 | 24 | 35 | -------------------------------------------------------------------------------- /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 | 20 | 21 | 42 | -------------------------------------------------------------------------------- /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: Kerangka Kerja JavaScript
nan Progresif 6 | actionButtons: 7 | - text: Mengapa Vue.js? 8 | link: / 9 | extraClass: vuemastery-trigger primary 10 | icon: fa fa-play-circle 11 | - text: Mulai 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: Mudah Dipahami 20 | details: Sudah paham tentang HTML, CSS, dan JavaScript? Baca petunjuk dan mulai membuat sesuatu dalam waktu singkat! 21 | - title: Serba Guna 22 | details: Sebuah ekosistem yang dapat diadopsi secara bertahap yang bertingkat antara pustaka dan kerangka kerja berfitur lengkap. 23 | - title: Performa 24 | details: | 25 | 20KB min+gzip Runtime
26 | DOM Virtual yang sangat cepat
27 | Upaya Optimasi yang Minimal 28 | footer: | 29 | Dirilis di bawah Lisensi MIT
30 | Hak Cipta © 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/effect-scope.md: -------------------------------------------------------------------------------- 1 | # Effect Scope API 2 | 3 | :::info 4 | Effect scope is an advanced API primarily intended for library authors. For details on how to leverage this API, please consult its corresponding [RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0041-reactivity-effect-scope.md). 5 | ::: 6 | 7 | ## `effectScope` 8 | 9 | Creates an effect scope object which can capture the reactive effects (e.g. computed and watchers) created within it so that these effects can be disposed together. 10 | 11 | **Typing:** 12 | 13 | ```ts 14 | function effectScope(detached?: boolean): EffectScope 15 | 16 | interface EffectScope { 17 | run(fn: () => T): T | undefined // undefined if scope is inactive 18 | stop(): void 19 | } 20 | ``` 21 | 22 | **Example:** 23 | 24 | ```js 25 | const scope = effectScope() 26 | 27 | scope.run(() => { 28 | const doubled = computed(() => counter.value * 2) 29 | 30 | watch(doubled, () => console.log(doubled.value)) 31 | 32 | watchEffect(() => console.log('Count: ', doubled.value)) 33 | }) 34 | 35 | // to dispose all effects in the scope 36 | scope.stop() 37 | ``` 38 | 39 | ## `getCurrentScope` 40 | 41 | Returns the current active [effect scope](#effectscope) if there is one. 42 | 43 | **Typing:** 44 | 45 | ```ts 46 | function getCurrentScope(): EffectScope | undefined 47 | ``` 48 | 49 | ## `onScopeDispose` 50 | 51 | Registers a dispose callback on the current active [effect scope](#effectscope). The callback will be invoked when the associated effect scope is stopped. 52 | 53 | This method can be used as a non-component-coupled replacement of `onUnmounted` in reusable composition functions, since each Vue component's `setup()` function is also invoked in an effect scope. 54 | 55 | **Typing:** 56 | 57 | ```ts 58 | function onScopeDispose(fn: () => void): void 59 | ``` 60 | -------------------------------------------------------------------------------- /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 | # Standar 2 | 3 | Inisiatif Aksesibilitas Web (Web Accessibility Initiative atau WAI) World Wide Web Consortium (W3C) mengembangkan standar aksesibilitas web untuk berbagai komponen: 4 | 5 | - [User Agent Accessibility Guidelines (UAAG)](https://www.w3.org/WAI/standards-guidelines/uaag/) 6 | - peramban web dan pemutar media, termasuk beberapa aspek teknologi pendukung 7 | - [Authoring Tool Accessibility Guidelines (ATAG)](https://www.w3.org/WAI/standards-guidelines/atag/) 8 | - alat penulisan 9 | - [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/standards-guidelines/wcag/) 10 | - konten web - digunakan oleh pengembang, alat pembuatan, dan alat evaluasi aksesibilitas 11 | 12 | ## Panduan Aksesibilitas Konten Web (Web Content Accessibility Guidelines atau WCAG) 13 | 14 | [WCAG 2.1](https://www.w3.org/TR/WCAG21/) meluas dari [WCAG 2.0](https://www.w3.org/TR/WCAG20/) dan memungkinkan penerapan teknologi baru dengan menangani perubahan ke web. W3C mendorong penggunaan versi terbaru WCAG saat mengembangkan atau memperbarui kebijakan aksesibilitas web. 15 | 16 | ### Empat Prinsip Panduan Utama WCAG 2.1 (disingkat dengan POUR): 17 | 18 | - [Dapat Dilihat (Perceivable)](https://www.w3.org/TR/WCAG21/#perceivable) 19 | - Pengguna harus dapat melihat informasi yang disajikan 20 | - [Dapat Dioperasikan (Operable)](https://www.w3.org/TR/WCAG21/#operable) 21 | - Bentuk antar muka, kontrol, dan navigasi dapat dioperasikan 22 | - [Dapat Dimengerti (Understandable)](https://www.w3.org/TR/WCAG21/#understandable) 23 | - Informasi dan pengoperasian antarmuka pengguna harus dapat dimengerti oleh semua pengguna 24 | - [Kuat (Robust)](https://www.w3.org/TR/WCAG21/#robust) 25 | - Pengguna harus dapat mengakses konten seiring kemajuan teknologi 26 | 27 | ### Inisiatif Aksesibilitas Web - Aplikasi Kaya Internet yang Dapat Diakses (WAI-ARIA) 28 | 29 | WAI-ARIA W3C memberikan panduan tentang cara membuat konten dinamis dan kontrol antarmuka pengguna tingkat lanjut. 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 section uses [single-file component](single-file-component.html) syntax for code examples 4 | 5 | > 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. 6 | 7 | Watch a free video about Lifecycle Hooks on Vue Mastery 8 | 9 | You can access a component's lifecycle hook by prefixing the lifecycle hook with "on". 10 | 11 | The following table contains how the lifecycle hooks are invoked inside of [setup()](composition-api-setup.html): 12 | 13 | | Options API | Hook inside `setup` | 14 | | ----------------- | ------------------- | 15 | | `beforeCreate` | Not needed\* | 16 | | `created` | Not needed\* | 17 | | `beforeMount` | `onBeforeMount` | 18 | | `mounted` | `onMounted` | 19 | | `beforeUpdate` | `onBeforeUpdate` | 20 | | `updated` | `onUpdated` | 21 | | `beforeUnmount` | `onBeforeUnmount` | 22 | | `unmounted` | `onUnmounted` | 23 | | `errorCaptured` | `onErrorCaptured` | 24 | | `renderTracked` | `onRenderTracked` | 25 | | `renderTriggered` | `onRenderTriggered` | 26 | | `activated` | `onActivated` | 27 | | `deactivated` | `onDeactivated` | 28 | 29 | 30 | :::tip 31 | 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. 32 | ::: 33 | 34 | These functions accept a callback that will be executed when the hook is called by the component: 35 | 36 | ```js 37 | // MyBook.vue 38 | 39 | export default { 40 | setup() { 41 | // mounted 42 | onMounted(() => { 43 | console.log('Component is mounted!') 44 | }) 45 | } 46 | } 47 | ``` 48 | -------------------------------------------------------------------------------- /src/guide/contributing/doc-style-guide.md: -------------------------------------------------------------------------------- 1 | # Pedoman Gaya Dokumentasi 2 | 3 | Panduan ini akan memberikan gambaran umum tentang berbagai elemen desain yang tersedia untuk Anda gunakan dalam membuat dokumentasi. 4 | 5 | ## Peringatan (*Alerts*) 6 | 7 | VuePress menyediakan sebuah plugin wadah khusus untuk membuat kotak peringatan. Ada empat jenis: 8 | 9 | - **Info**: Memberikan informasi yang netral 10 | - **Tip**: Memberikan informasi yang bersifat positif dan menganjurkan sesuatu 11 | - **Warning**: Memberikan informasi yang harus diperhatikan pengguna karena ada risiko tingkat rendah hingga sedang 12 | - **Danger**: Memberikan informasi yang bersifat negatif dan memiliki risiko tinggi terhadap pengguna 13 | 14 | **Contoh Markdown** 15 | 16 | ``` 17 | ::: info 18 | Anda dapat menemukan informasi lebih lanjut di situs ini. 19 | ::: 20 | 21 | ::: tip 22 | Ini adalah tips yang bagus untuk diingat! 23 | ::: 24 | 25 | ::: warning 26 | Ini adalah sesuatu yang harus diwaspadai 27 | ::: 28 | 29 | ::: danger 30 | Ini adalah sesuatu yang tidak kami rekomendasikan. Gunakan dengan risiko yang Anda tanggung sendiri. 31 | ::: 32 | ``` 33 | 34 | **Markdown yang Dirender** 35 | 36 | ::: info 37 | Anda dapat menemukan informasi lebih lanjut di situs ini. 38 | ::: 39 | 40 | ::: tip 41 | Ini adalah tips yang bagus untuk diingat! 42 | ::: 43 | 44 | ::: warning 45 | Ini adalah sesuatu yang harus diwaspadai 46 | ::: 47 | 48 | ::: danger 49 | Ini adalah sesuatu yang tidak kami rekomendasikan. Gunakan dengan risiko yang Anda tanggung sendiri. 50 | ::: 51 | 52 | ## Blok Kode 53 | 54 | VuePress menggunakan Prism untuk memberikan penyorotan sintaksis bahasa dengan menambahkan nama bahasa ke backtick (`) di awal blok kode: 55 | 56 | **Contoh Markdown** 57 | 58 | ```` 59 | ```js 60 | export default { 61 | name: 'MyComponent' 62 | } 63 | ``` 64 | ```` 65 | 66 | **Keluaran yang Dirender** 67 | 68 | ```js 69 | export default { 70 | name: 'MyComponent' 71 | } 72 | ``` 73 | 74 | ### Penyorotan Baris 75 | 76 | Untuk menambahkan penyorotan baris ke blok kode Anda, Anda perlu menambahkan nomor baris dalam kurung kurawal. 77 | 78 | #### Baris Tunggal 79 | 80 | **Contoh Markdown** 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 | **Markdown yang Dirender** 95 | 96 | ```js{2} 97 | export default { 98 | name: 'MyComponent', 99 | props: { 100 | type: String, 101 | item: Object 102 | } 103 | } 104 | ``` 105 | 106 | #### Sekumpulan Baris 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 | #### Beberapa Bagian 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 Pada Array Refs 3 | badges: 4 | - breaking 5 | --- 6 | 7 | # {{ $frontmatter.title }} 8 | 9 | Pada Vue versi 2, penggunaan atribut `ref` di dalam `v-for` akan mengisi properti `$refs` dengan sebuah `ref` _array_. Perilaku tersebut menjadi ambigu dan tidak efisien ketika dilakukan pada `v-for` bersarang. 10 | 11 | Pada Vue versi 3, penggunaan tersebut tidak akan secara otomatis membuat sebuah _array_ pada `$refs`. Untuk mendapatkan banyak `ref` sekaligus dalam satu _binding_, _bind_ `ref` pada sebuah fungsi dimana hal tersebut memberikan lebih banyak fleskibilitas (hal ini merupakan sebuah fitur baru): 12 | 13 | ```html 14 |
15 | ``` 16 | 17 | Penggunaan dengan Options API: 18 | 19 | ```js 20 | export default { 21 | data() { 22 | return { 23 | refBarang: [] 24 | } 25 | }, 26 | methods: { 27 | tetapkanRefBarang(el) { 28 | if (el) { 29 | this.refBarang.push(el) 30 | } 31 | } 32 | }, 33 | beforeUpdate() { 34 | this.refBarang = [] 35 | }, 36 | updated() { 37 | console.log(this.refBarang) 38 | } 39 | } 40 | ``` 41 | 42 | Penggunaan dengan Composition API: 43 | 44 | ```js 45 | import { onBeforeUpdate, onUpdated } from 'vue' 46 | 47 | export default { 48 | setup() { 49 | let refBarang = [] 50 | const tetapkanRefBarang = el => { 51 | if (el) { 52 | refBarang.push(el) 53 | } 54 | } 55 | onBeforeUpdate(() => { 56 | refBarang = [] 57 | }) 58 | onUpdated(() => { 59 | console.log(refBarang) 60 | }) 61 | return { 62 | tetapkanRefBarang 63 | } 64 | } 65 | } 66 | ``` 67 | 68 | Ingat bahwa: 69 | 70 | - `refBarang` tidak harus merupakan sebuah _array_: boleh berupa sebuah objek dimana `ref` ditetapkan menggunakan kunci iterasi masing-masing. 71 | - Cara ini juga memungkinkan `refBarang` untuk dijadikan reaktif dan dapat diawasi, jika dibutuhkan. 72 | - This also allows `itemRefs` to be made reactive and watched, if needed. 73 | 74 | ## Migration Strategy 75 | 76 | [_Migration build flags_:](migration-build.html#compat-configuration) 77 | 78 | - `V_FOR_REF` 79 | - `COMPILER_V_FOR_REF` 80 | -------------------------------------------------------------------------------- /src/guide/migration/attrs-includes-class-style.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: $attrs memuat class dan style 3 | badges: 4 | - breaking 5 | --- 6 | 7 | # `$attrs` memuat `class` dan `style` 8 | 9 | ## Gambaran Umum 10 | 11 | `$attrs` sekarang memuat seluruh atribut yang diteruskan pada sebuah komponen, termasuk `class` dan `style`. 12 | 13 | ## Perilaku pada Vue versi 2.x 14 | 15 | Atribut `class` dan `style` ditangani secara khusus pada implementasi DOM virtual milik Vue versi 2. Oleh karena itu, kedua atribut tersebut tidak dimuat dalam `$attrs`, sementara atribut lainnya dimuat. 16 | 17 | Sebuah efek samping dari penanganan tersebut muncul ketika menggunakan `inheritAttrs: false`: 18 | 19 | - Atribut dalam `$attrs` tidak lagi dimuat pada elemen utama secara otomatis, keputusan dikembalikan pada pengembang untuk menentukan tempat atribut dimuat. 20 | - Namun `class` dan `style`, yang bukan merupakan bagian dari `$attrs`, akan tetap dimuat dalam elemen utama dari komponen: 21 | 22 | ```vue 23 | 28 | 33 | ``` 34 | 35 | Ketika digunakan seperti berikut: 36 | 37 | ```html 38 | 39 | ``` 40 | 41 | ...maka Vue akan menghasilkan HTML berikut: 42 | 43 | ```html 44 | 47 | ``` 48 | 49 | ## Perilaku pada Vue versi 3.x 50 | 51 | `$attrs` memuat seluruh atribut, dimana hal tersebut mempermudah cara penanganan atribut pada elemen-elemen yang berbeda. Pada Vue versi 3.x, contoh di atas akan menghasilkan HTML berikut: 52 | 53 | ```html 54 | 57 | ``` 58 | 59 | ## Strategi Migrasi 60 | 61 | Pada komponen-komponen yang menggunakan `inheritAttrs: false`, pastikan bahwa _styling_ tetap berjalan sesuai keinginan Anda. Jika Anda sebelumnya bergantung pada penanganan khusus pada `class` dan `style`, beberapa tampilan mungkin saja akan rusak karena atribut-atribut tersebut mungkin saja sekarang diterapkan pada elemen lain. 62 | 63 | [_Migration build flag_: `INSTANCE_ATTRS_CLASS_STYLE`](migration-build.html#compat-configuration) 64 | 65 | ## See also 66 | 67 | - [RFC Relevan](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0031-attr-fallthrough.md) 68 | - [Strategi Migrasi - `$listeners` dihapus](./listeners-removed.md) 69 | - [Strategi Migrasi - Opsi Emit Baru](./emits-option.md) 70 | - [Strategi Migrasi - Pengubah `.native` dihapus](./v-on-native-modifier-removed.md) 71 | - [Strategi Migrasi - Perubahan dalam API _render functions_](./render-function-api.md) 72 | -------------------------------------------------------------------------------- /src/guide/migration/children.md: -------------------------------------------------------------------------------- 1 | --- 2 | badges: 3 | - removed 4 | --- 5 | 6 | # $children 7 | 8 | ## Gambaran Umum 9 | 10 | Properti `$children` telah dihapus dari Vue versi 3.0 dan tidak didukung lagi. 11 | 12 | ## Sintaks Vue versi 2.x 13 | 14 | Pada Vue versi 2.x, pengembang dapat mengakses komponen turunan langsung dari sebuah objek menggunakan `this.$children`: 15 | 16 | ```vue 17 | 23 | 24 | 36 | ``` 37 | 38 | ## Perubahan pada Vue versi 3.x 39 | 40 | Pada Vue versi 3.x, properti `$children` telah dihapus dan tidak didukung lagi. Sebagai gantinya, jika Anda butuh akses pada sebuah komponen turunan, kami menyarankan Anda untuk menggunakan [$refs](/guide/component-template-refs.html#template-refs). 41 | 42 | ## Migration Strategy 43 | 44 | [Migration build flag: `INSTANCE_CHILDREN`](migration-build.html#compat-configuration) 45 | -------------------------------------------------------------------------------- /src/guide/migration/filters.md: -------------------------------------------------------------------------------- 1 | --- 2 | badges: 3 | - removed 4 | --- 5 | 6 | # Filter 7 | 8 | ## Gambaran Umum 9 | 10 | Fitur _filter_ dihapus dari Vue versi 3.0 dan tidak didukung lagi. 11 | 12 | ## Sintaks Vue versi 2.x 13 | 14 | Pada Vue versi 2.x, pengembang dapat menggunakan _filter_ untuk menampilkan teks dalam bentuk tertentu. 15 | 16 | Sebagai contoh: 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 curly braces being "just JavaScript," which has both learning and implementation costs. 42 | 43 | ## Pembaruan Vue versi 3.x 44 | 45 | Pada Vue versi 3.x, _filter_ dihapus dan tidak didukung lagi. Sebaliknya, kami menyarankan Anda untuk mengganti _filter_ dengan pemanggilan _method_ atau properti _computed_. 46 | 47 | Berdasarkan contoh di atas, berikut merupakan sebuah contoh bagaimana cara tersebut dapat diimplementasikan. 48 | 49 | ```html 50 | 54 | 55 | 70 | ``` 71 | 72 | ## Strategi Migrasi 73 | 74 | Dibandingkan menggunakan _filter_, kami menyarankan Anda untuk mengganti _filter_ dengan properti _computed_ atau _method_. 75 | 76 | [Migration build flags:](migration-build.html#compat-configuration) 77 | 78 | - `FILTERS` 79 | - `COMPILER_FILTERS` 80 | 81 | ### Global Filters 82 | 83 | Apabila Anda menggunakan _filter_ yang didaftarkan secara global dan menggunakan _filter_ tersebut pada aplikasi Anda, tentunya mengganti _filter_ tersebut dengan properti _computed_ atau _method_ pada setiap komponen merupakan hal yang tidak praktis. 84 | 85 | Sebaliknya, Anda dapat membuat _filter_ global Anda dapat diakses oleh seluruh komponen menggunakan[globalProperties](../../api/application-config.html#globalproperties): 86 | 87 | ```js 88 | // main.js 89 | const app = createApp(App) 90 | 91 | app.config.globalProperties.$filters = { 92 | mataUangIDR(value) { 93 | return 'IDR ' + value 94 | } 95 | } 96 | ``` 97 | 98 | Kemudian Anda dapat mengganti setiap _template_ menggunakan objek `$filters` tersebut seperti berikut: 99 | 100 | ```html 101 | 105 | ``` 106 | 107 | Perlu diingat bahwa dengan menggunakan pendekatan ini, Anda tidak dapat menggunakan properti _computed_. 108 | Anda hanya dapat menggunakan _method_, karena penggunaan _method_ merupakan hal yang masuk akal bila dilihat dalam konteks komponen secara individu. 109 | -------------------------------------------------------------------------------- /src/guide/migration/fragments.md: -------------------------------------------------------------------------------- 1 | --- 2 | badges: 3 | - new 4 | --- 5 | 6 | # Fragments 7 | 8 | ## Gambaran Umum 9 | 10 | Pada Vue versi 3, komponen memiliki dukungan resmi terhadap komponen _multi-root node_, atau dikenal sebagai _fragments_ 11 | 12 | ## Sintaks Vue versi 2.x 13 | 14 | Pada Vue versi 2.x, komponen _multi-root_ tidak didukung dan akan mengeluarkan sebuah peringatan ketika pengguna secara tidak sengaja membuat komponen tersebut. Untuk mengatasi masalah tersebut, banyak komponen yang dibungkus pada sebuah `
`. 15 | 16 | ```html 17 | 18 | 25 | ``` 26 | 27 | ## Sintaks Vue versi 3.x 28 | 29 | Pada Vue versi 3.x, komponen dapat memiliki banyak _root node_. Namun, hal tersebut menuntut pengembang untuk menyatakan secara eksplisit di mana atribut harus didistribusikan. 30 | 31 | ```html 32 | 33 | 38 | ``` 39 | 40 | Untuk informasi lebih lanjut mengenai cara kerja pewarisan atribut, silahkan Anda membaca [Atribut Bukan Properti](/guide/component-attrs.html). 41 | -------------------------------------------------------------------------------- /src/guide/migration/inline-template-attribute.md: -------------------------------------------------------------------------------- 1 | --- 2 | badges: 3 | - breaking 4 | --- 5 | 6 | # Atribut Templat Inline 7 | 8 | ## Gambaran Umum 9 | 10 | Dukungan untuk [fitur inline-template](https://vuejs.org/v2/guide/components-edge-cases.html#Inline-Templates) telah dihapuskan. 11 | 12 | ## 2.x Sintaksis 13 | 14 | Di 2.x, Vue menyediakan atribut `inline-template` pada komponen anak/turunan. Komponen turunan ini menggunakan konten didalamnya sebagai templat komponen daripada memperlakukannya sebagai konten terdistribusi. 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 Sintaksis 26 | 27 | Fitur ini tidak lagi didukung 28 | 29 | ## Strategi dalam Migrasi 30 | 31 | Banyak penggunaan `inline-template` diasumsikan menggunakan sebuah no-build-tool, dimana semua templat ditulis langsung ke dalam halaman HTML. 32 | 33 | [Migration build flag: `COMPILER_INLINE_TEMPLATE`](migration-build.html#compat-configuration) 34 | 35 | ### Pilihan #1: menggunakan tag ` 43 | ``` 44 | 45 | Dan dalam komponen, target templat tersebut menggunakan sebuah selector: 46 | 47 | ```js 48 | const MyComp = { 49 | template: '#my-comp-template' 50 | // ... 51 | } 52 | ``` 53 | 54 | Opsi ini tidak memerlukan suatu build setup, bekerja di semua peramban, bukan subjek dari suatu in-DOM HTML parsing caveats (contoh Anda dapat menggunakan camelCase pada penamaan prop), dan memberikan sorotan sintaksis yang benar pada kebanyakan IDEs. Pada kerangka kerja sisi-peladen tradisional, template ini dapat dipisah menjadi partisi templat peladen (termasuk templat HTML utama) agar mempermudah dalam pemeliharaan. 55 | 56 | ### Pilihan #2: Default Slot 57 | 58 | Komponen yang sebelumnya menggunakan `inline-template` juga dapat direfaktor menggunakan default slot - Yang mana membuat jangkauan data menjadi lebih jelas sementara menjaga kemudahanan dalam menulis konten anak secara inline: 59 | 60 | ```html 61 | 62 | 63 | {{ msg }} {{ childState }} 64 | 65 | 66 | 67 | 68 | {{ parentMsg }} {{ childState }} 69 | 70 | ``` 71 | 72 | Anak tersebut, daripada menyediakan templat kosong, sekarang seharusnya menampilkan default slot\*: 73 | 74 | ```html 75 | 79 | 82 | ``` 83 | 84 | > - Catatan: di 3.x, slots juga dapat ditampilkan sebagai root bersamaan dengan dukungan native [fragments](/guide/migration/fragments)! 85 | -------------------------------------------------------------------------------- /src/guide/migration/keycode-modifiers.md: -------------------------------------------------------------------------------- 1 | --- 2 | badges: 3 | - breaking 4 | --- 5 | 6 | # Pengubah KeyCode 7 | 8 | ## Gambaran Umum 9 | 10 | Berikut adalah ringkasan singkat tentang apa yang telah berubah: 11 | 12 | - **MERUSAK**: Pengunaan angka-angka, contoh. keyCodes, sebagai pengubah `v-on` tidak lagi didukung 13 | - **MERUSAK**: `config.keyCodes` tidak lagi didukung 14 | 15 | ## 2.x Sintaksis 16 | 17 | Pada Vue 2, `keyCodes` didukung sebagai satu cara untuk mengubah suatu metode `v-on`. 18 | 19 | ```html 20 | 21 | 22 | 23 | 24 | 25 | ``` 26 | 27 | Tambahan, Anda dapat mendefinisikan alias Anda sendiri melalui opsi global `config.keyCodes`. 28 | 29 | ```js 30 | Vue.config.keyCodes = { 31 | f1: 112 32 | } 33 | ``` 34 | 35 | ```html 36 | 37 | 38 | 39 | 40 | 41 | ``` 42 | 43 | ## 3.x Sintaksis 44 | 45 | Dikarenakan [`KeyboardEvent.keyCode` telah usang](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode), sangat tidak masuk akal jika Vue 3 tetap mendukung hal ini. Sebagai gantinya, direkomendasikan untuk penggunaan nama kebab-case untuk semua key yang Anda akan gunakan sebagai pengubah. 46 | 47 | ```html 48 | 49 | 50 | 51 | 52 | 53 | ``` 54 | 55 | Hasilnya, hal ini berarti bahwa `config.keyCodes` juga telah usang dan tidak lagi didukung. 56 | 57 | ## Strategi dalam Migrasi 58 | 59 | Untuk semua yang memakai `keyCode` pada codebase kalian, kami merekomendasikan pengubahaan `keyCode` menjadi penamaan kebab-cased yang setara. 60 | 61 | keys sebagai tanda baca dapat dituliskan secara literal. contoh. untuk key `,`: 62 | 63 | ```html 64 | 65 | ``` 66 | 67 | Limitasi dari sintaksis mencegah beberapa karakter untuk dicocokan, seperti `"`, `'`, `/`, `=`, `>`, dan `.`. Sebagai gantinya, untuk karakter-karakter tersebut Anda dapat cek `event.key` di dalam listener. 68 | 69 | [Flag build migrasi:](migration-build.html#compat-configuration) 70 | 71 | - `CONFIG_KEY_CODES` 72 | - `V_ON_KEYCODE_MODIFIER` 73 | -------------------------------------------------------------------------------- /src/guide/migration/listeners-removed.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Penghapusan $listeners 3 | badges: 4 | - breaking 5 | --- 6 | 7 | # `$listeners` telah dihapus 8 | 9 | ## Gambaran Umum 10 | 11 | Objek `$listeners` telah dihapuskan pada Vue 3. Event listeners sekarang bagian dari `$attrs`: 12 | 13 | ```js 14 | { 15 | text: 'this is an attribute', 16 | onClose: () => console.log('close Event triggered') 17 | } 18 | ``` 19 | 20 | ## 2.x Sintaksis 21 | 22 | Pada Vue 2, Anda dapat mengakses atribut-atribut yang disuguhkan ke komponen-komponen Anda melalui `this.$attrs`, dan event listeners dengan `this.$listeners`. 23 | Pengkombinasian dengan `inheritAttrs: false`, mereka membolehkan para pengembang untuk mengaplikasikan atribut-atribut dan listener-listener ini ke semua elemen lain daripada ke elemen root: 24 | 25 | ```html 26 | 31 | 36 | ``` 37 | 38 | ## 3.x Sintaksis 39 | 40 | Pada Vue 3's virtual DOM, event listeners sekarang hanyalah sebuah atribut, diawali dengan `on`, dan merupakan bagian dari objek `$attrs`, sehingga `$listeners` telah dihapuskan. 41 | 42 | ```vue 43 | 48 | 53 | ``` 54 | 55 | jika komponen ini mendapatkan sebuah atribut `id` dan sebuah listener `v-on:close`, objek `$attrs` sekarang akan tampak seperti ini: 56 | 57 | ```js 58 | { 59 | id: 'my-input', 60 | onClose: () => console.log('close Event triggered') 61 | } 62 | ``` 63 | 64 | ## Strategi Migrasi 65 | 66 | Hapus semua penggunaan dari `$listeners`. 67 | 68 | [Flag build Migrasi: `INSTANCE_LISTENERS`](migration-build.html#compat-configuration) 69 | 70 | ## Baca juga 71 | 72 | - [Relevant RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0031-attr-fallthrough.md) 73 | - [Panduan Migrasi - `$attrs` memuat `class` & `style` ](./attrs-includes-class-style.md) 74 | - [Panduan Migrasi - Perubahan pada Render Functions API](./render-function-api.md) 75 | - [Panduan Migrasi - Opsi baru Emits](./emits-option.md) 76 | - [Panduan Migrasi - Pengubah `.native` dihapuskan](./v-on-native-modifier-removed.md) 77 | -------------------------------------------------------------------------------- /src/guide/migration/mount-changes.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Mount API changes' 3 | badges: 4 | - breaking 5 | --- 6 | 7 | # Mounted application does not replace the element 8 | 9 | ## Overview 10 | 11 | In Vue 2.x, when mounting an application that has a `template`, the rendered content replaces the element we mount to. In Vue 3.x, the rendered application is appended as a child of such an element, replacing element's `innerHTML`. 12 | 13 | ## 2.x Syntax 14 | 15 | In Vue 2.x, we pass an HTML element selector to `new Vue()` or `$mount`: 16 | 17 | ```js 18 | new Vue({ 19 | el: '#app', 20 | data() { 21 | return { 22 | message: 'Hello Vue!' 23 | } 24 | }, 25 | template: ` 26 |
{{ message }}
27 | ` 28 | }) 29 | 30 | // or 31 | const app = new Vue({ 32 | data() { 33 | return { 34 | message: 'Hello Vue!' 35 | } 36 | }, 37 | template: ` 38 |
{{ message }}
39 | ` 40 | }) 41 | 42 | app.$mount('#app') 43 | ``` 44 | 45 | When we mount this application to the page that has a `div` with the passed selector (in our case, it's `id="app"`): 46 | 47 | ```html 48 | 49 |
50 | Some app content 51 |
52 | 53 | ``` 54 | 55 | in the rendered result, the mentioned `div` will be replaced with the rendered application content: 56 | 57 | ```html 58 | 59 |
Hello Vue!
60 | 61 | ``` 62 | 63 | ## 3.x Syntax 64 | 65 | In Vue 3.x, when we mount an application, its rendered content will replace the `innerHTML` of the element we pass to `mount`: 66 | 67 | ```js 68 | const app = Vue.createApp({ 69 | data() { 70 | return { 71 | message: 'Hello Vue!' 72 | } 73 | }, 74 | template: ` 75 |
{{ message }}
76 | ` 77 | }) 78 | 79 | app.mount('#app') 80 | ``` 81 | 82 | When this app is mounted to the page that has a `div` with `id="app"`, this will result in: 83 | 84 | ```html 85 | 86 |
87 |
Hello Vue!
88 |
89 | 90 | ``` 91 | 92 | ## Migration Strategy 93 | 94 | [Migration build flag: `GLOBAL_MOUNT_CONTAINER`](migration-build.html#compat-configuration) 95 | 96 | ## See Also 97 | 98 | - [`mount` API](/api/application-api.html#mount) 99 | -------------------------------------------------------------------------------- /src/guide/migration/props-data.md: -------------------------------------------------------------------------------- 1 | --- 2 | badges: 3 | - removed 4 | --- 5 | 6 | # `propsData` 7 | 8 | ## Overview 9 | 10 | The `propsData` option, used to pass props to the Vue instance during its creation, is removed. To pass props to the root component of a Vue 3 application, use the second argument of [createApp](/api/global-api.html#createapp). 11 | 12 | ## 2.x Syntax 13 | 14 | In 2.x, we were able to pass props to a Vue instance during its creation: 15 | 16 | ```js 17 | const Comp = Vue.extend({ 18 | props: ['username'], 19 | template: '
{{ username }}
' 20 | }) 21 | 22 | new Comp({ 23 | propsData: { 24 | username: 'Evan' 25 | } 26 | }) 27 | ``` 28 | 29 | ## 3.x Update 30 | 31 | The `propsData` option has been removed. If you need to pass props to the root component instance during its creation, you should use the second argument of `createApp`: 32 | 33 | ```js 34 | const app = createApp( 35 | { 36 | props: ['username'], 37 | template: '
{{ username }}
' 38 | }, 39 | { username: 'Evan' } 40 | ) 41 | ``` 42 | -------------------------------------------------------------------------------- /src/guide/migration/props-default-this.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Akses Props Fungsi Bawaan this 3 | badges: 4 | - breaking 5 | --- 6 | 7 | # Akses Props Fungsi Bawaan `this` 8 | 9 | Nilai bawaan props fungsi-fungsi factory tidak lagi memilki akses terhadap `this`. 10 | 11 | Melainkan: 12 | 13 | - Raw props didapatkan dari komponen yang dilewatkan menuju fungsi bawaan sebagai argumen; 14 | 15 | - [inject](../composition-api-provide-inject.md) API dapat digunakan di dalam fungsi-fungsi bawaan. 16 | 17 | ```js 18 | import { inject } from 'vue' 19 | 20 | export default { 21 | props: { 22 | theme: { 23 | default (props) { 24 | // `props` merupakan nilai raw dilewatkan menuju komponen, 25 | // sebelum dilakukan type / default coercions 26 | // dapat juga menggunaan `inject` untuk mengakses properti yang diinjeksikan 27 | return inject('theme', 'default-theme') 28 | } 29 | } 30 | } 31 | } 32 | ``` 33 | 34 | ## Stategi Migrasi 35 | 36 | [Flag build migrasi: `PROPS_DEFAULT_THIS`](migration-build.html#compat-configuration) 37 | -------------------------------------------------------------------------------- /src/guide/migration/slots-unification.md: -------------------------------------------------------------------------------- 1 | --- 2 | badges: 3 | - breaking 4 | --- 5 | 6 | # Slots Unification 7 | 8 | ## Overview 9 | 10 | This change unifies normal and scoped slots in 3.x. 11 | 12 | Here is a quick summary of what has changed: 13 | 14 | - `this.$slots` now exposes slots as functions 15 | - **BREAKING**: `this.$scopedSlots` is removed 16 | 17 | For more information, read on! 18 | 19 | ## 2.x Syntax 20 | 21 | When using the render function, i.e., `h`, 2.x used to define the `slot` data property on the content nodes. 22 | 23 | ```js 24 | // 2.x Syntax 25 | h(LayoutComponent, [ 26 | h('div', { slot: 'header' }, this.header), 27 | h('div', { slot: 'content' }, this.content) 28 | ]) 29 | ``` 30 | 31 | In addition, when referencing scoped slots, they could be referenced using the following syntax: 32 | 33 | ```js 34 | // 2.x Syntax 35 | this.$scopedSlots.header 36 | ``` 37 | 38 | ## 3.x Syntax 39 | 40 | In 3.x, slots are defined as children of the current node as an object: 41 | 42 | ```js 43 | // 3.x Syntax 44 | h(LayoutComponent, {}, { 45 | header: () => h('div', this.header), 46 | content: () => h('div', this.content) 47 | }) 48 | ``` 49 | 50 | And when you need to reference scoped slots programmatically, they are now unified into the `$slots` option. 51 | 52 | ```js 53 | // 2.x Syntax 54 | this.$scopedSlots.header 55 | 56 | // 3.x Syntax 57 | this.$slots.header() 58 | ``` 59 | 60 | ## Migration Strategy 61 | 62 | A majority of the change has already been shipped in 2.6. As a result, the migration can happen in one step: 63 | 64 | 1. Replace all `this.$scopedSlots` occurrences with `this.$slots` in 3.x. 65 | 2. Replace all occurrences of `this.$slots.mySlot` with `this.$slots.mySlot()` 66 | 67 | [Migration build flag: `INSTANCE_SCOPED_SLOTS`](migration-build.html#compat-configuration) 68 | -------------------------------------------------------------------------------- /src/guide/migration/transition-as-root.md: -------------------------------------------------------------------------------- 1 | --- 2 | badges: 3 | - breaking 4 | --- 5 | 6 | # Transition as Root 7 | 8 | ## Overview 9 | 10 | Using a `` as a component's root will no longer trigger transitions when the component is toggled from the outside. 11 | 12 | ## 2.x Behavior 13 | 14 | In Vue 2, it was possible to trigger a transition from outside a component by using a `` as the component's root: 15 | 16 | ```html 17 | 18 | 23 | ``` 24 | 25 | ```html 26 | 27 | hello 28 | ``` 29 | 30 | Toggling the value of `showModal` would trigger a transition inside the modal component. 31 | 32 | This worked by accident, not by design. A `` is supposed to be triggered by changes to its children, not by toggling the `` itself. 33 | 34 | This quirk has now been removed. 35 | 36 | ## Migration Strategy 37 | 38 | A similar effect can be achieved by passing a prop to the component instead: 39 | 40 | ```vue 41 | 46 | 51 | ``` 52 | 53 | ```html 54 | 55 | hello 56 | ``` 57 | 58 | ## See also 59 | 60 | - [Some transition classes got a rename](/guide/migration/transition.html) 61 | - [`` now renders no wrapper element by default](/guide/migration/transition-group.html) 62 | -------------------------------------------------------------------------------- /src/guide/migration/transition-group.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Transition Group Root Element 3 | badges: 4 | - breaking 5 | --- 6 | 7 | # {{ $frontmatter.title }} 8 | 9 | ## Overview 10 | 11 | `` no longer renders a root element by default, but can still create one with the `tag` attribute. 12 | 13 | ## 2.x Syntax 14 | 15 | In Vue 2, ``, like other custom components, needed a root element, which by default was a `` but was customizable via the `tag` attribute. 16 | 17 | ```html 18 | 19 |
  • 20 | {{ item }} 21 |
    • 22 |     23 | ``` 24 | 25 | ## 3.x Syntax 26 | 27 | In Vue 3, we have [fragment support](/guide/migration/fragments.html), so components no longer _need_ a root node. Consequently, `` no longer renders one by default. 28 | 29 | - If you already have the `tag` attribute defined in your Vue 2 code, like in the example above, everything will work as before 30 | - If you didn't have one defined _and_ your styling or other behaviors relied on the presence of the `` root element to work properly, simply add `tag="span"` to the ``: 31 | 32 | ```html 33 | 34 | 35 | 36 | ``` 37 | 38 | ## Migration Strategy 39 | 40 | [Migration build flag: `TRANSITION_GROUP_ROOT`](migration-build.html#compat-configuration) 41 | 42 | ## See also 43 | 44 | - [Some transition classes got a rename](/guide/migration/transition.html) 45 | - [`` as a root can no longer be toggled from the outside](/guide/migration/transition-as-root.html) 46 | -------------------------------------------------------------------------------- /src/guide/migration/transition.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Transition Class Change 3 | badges: 4 | - breaking 5 | --- 6 | 7 | # {{ $frontmatter.title }} 8 | 9 | ## Overview 10 | 11 | The `v-enter` transition class has been renamed to `v-enter-from` and the `v-leave` transition class has been renamed to `v-leave-from`. 12 | 13 | ## 2.x Syntax 14 | 15 | Before v2.1.8, we had two transition classes for each transition direction: initial and active states. 16 | 17 | In v2.1.8, we introduced `v-enter-to` to address the timing gap between enter/leave transitions. However, for backward compatibility, the `v-enter` name was untouched: 18 | 19 | ```css 20 | .v-enter, 21 | .v-leave-to { 22 | opacity: 0; 23 | } 24 | 25 | .v-leave, 26 | .v-enter-to { 27 | opacity: 1; 28 | } 29 | ``` 30 | 31 | This became confusing, as _enter_ and _leave_ were broad and not using the same naming convention as their class hook counterparts. 32 | 33 | ## 3.x Update 34 | 35 | In order to be more explicit and legible, we have now renamed these initial state classes: 36 | 37 | ```css 38 | .v-enter-from, 39 | .v-leave-to { 40 | opacity: 0; 41 | } 42 | 43 | .v-leave-from, 44 | .v-enter-to { 45 | opacity: 1; 46 | } 47 | ``` 48 | 49 | It's now much clearer what the difference between these states is. 50 | 51 | ![Transition Diagram](/images/transitions.svg) 52 | 53 | The `` component's related prop names are also changed: 54 | 55 | - `leave-class` is renamed to `leave-from-class` (can be written as `leaveFromClass` in render functions or JSX) 56 | - `enter-class` is renamed to `enter-from-class` (can be written as `enterFromClass` in render functions or JSX) 57 | 58 | ## Migration Strategy 59 | 60 | 1. Replace instances of `.v-enter` to `.v-enter-from` 61 | 2. Replace instances of `.v-leave` to `.v-leave-from` 62 | 3. Replace instances of related prop names, as above. 63 | 64 | ## See also 65 | 66 | - [`` as a root can no longer be toggled from the outside](/guide/migration/transition-as-root.html) 67 | - [`` now renders no wrapper element by default](/guide/migration/transition-group.html) 68 | -------------------------------------------------------------------------------- /src/guide/migration/v-bind.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: v-bind Merge Behavior 3 | badges: 4 | - breaking 5 | --- 6 | 7 | # {{ $frontmatter.title }} 8 | 9 | ## Overview 10 | 11 | - **BREAKING**: Order of bindings for v-bind will affect the rendering result. 12 | 13 | ## Introduction 14 | 15 | When dynamically binding attributes on an element, a common scenario involves using both the `v-bind="object"` syntax as well as individual attributes in the same element. However, this raises questions as far as the priority of merging. 16 | 17 | ## 2.x Syntax 18 | 19 | In 2.x, if an element has both `v-bind="object"` and an identical individual attribute defined, the individual attribute would always overwrite bindings in the `object`. 20 | 21 | ```html 22 | 23 |
    24 | 25 |
    26 | ``` 27 | 28 | ## 3.x Syntax 29 | 30 | In 3x, if an element has both `v-bind="object"` and an identical individual attribute defined, the order of how the bindings are declared determines how they are merged. In other words, rather than assuming developers want the individual attribute to always override what is defined in the `object`, developers now have more control over the desired merging behavior. 31 | 32 | ```html 33 | 34 |
    35 | 36 |
    37 | 38 | 39 |
    40 | 41 |
    42 | ``` 43 | 44 | ## Migration Strategy 45 | 46 | If you are relying on this override functionality for `v-bind`, we currently recommend ensuring that your `v-bind` attribute is defined before individual attributes. 47 | 48 | [Migration build flag: `COMPILER_V_BIND_OBJECT_ORDER`](migration-build.html#compat-configuration) 49 | -------------------------------------------------------------------------------- /src/guide/migration/v-if-v-for.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: v-if vs. v-for Precedence 3 | badges: 4 | - breaking 5 | --- 6 | 7 | # {{ $frontmatter.title }} 8 | 9 | ## Overview 10 | 11 | - **BREAKING**: If used on the same element, `v-if` will have higher precedence than `v-for` 12 | 13 | ## Introduction 14 | 15 | Two of the most commonly used directives in Vue.js are `v-if` and `v-for`. So it's no surprise that there comes a time when developers want to use both together. While this is not a recommended practice, there may be times when this is necessary, so we wanted to provide guidance for how it works. 16 | 17 | ## 2.x Syntax 18 | 19 | In 2.x, when using `v-if` and `v-for` on the same element, `v-for` would take precedence. 20 | 21 | ## 3.x Syntax 22 | 23 | In 3.x, `v-if` will always have the higher precedence than `v-for`. 24 | 25 | ## Migration Strategy 26 | 27 | It is recommended to avoid using both on the same element due to the syntax ambiguity. 28 | 29 | Rather than managing this at the template level, one method for accomplishing this is to create a computed property that filters out a list for the visible elements. 30 | 31 | [Migration build flag: `COMPILER_V_IF_V_FOR_PRECEDENCE`](migration-build.html#compat-configuration) 32 | 33 | ## See also 34 | 35 | - [List Rendering - Displaying Filtered/Sorted Results](/guide/list.html#displaying-filtered-sorted-results) 36 | - [List Rendering - `v-for` with `v-if`](/guide/list.html#v-for-with-v-if) 37 | -------------------------------------------------------------------------------- /src/guide/migration/v-on-native-modifier-removed.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: v-on.native modifier removed 3 | badges: 4 | - breaking 5 | --- 6 | 7 | # `v-on.native` modifier removed 8 | 9 | ## Overview 10 | 11 | The `.native` modifier for `v-on` has been removed. 12 | 13 | ## 2.x Syntax 14 | 15 | Event listeners passed to a component with `v-on` are by default only triggered by emitting an event with `this.$emit`. To add a native DOM listener to the child component's root element instead, the `.native` modifier can be used: 16 | 17 | ```html 18 | 22 | ``` 23 | 24 | ## 3.x Syntax 25 | 26 | The `.native` modifier for `v-on` has been removed. At the same time, the [new `emits` option](./emits-option.md) allows the child to define which events it does indeed emit. 27 | 28 | Consequently, Vue will now add all event listeners that are _not_ defined as component-emitted events in the child as native event listeners to the child's root element (unless `inheritAttrs: false` has been set in the child's options). 29 | 30 | ```html 31 | 35 | ``` 36 | 37 | `MyComponent.vue` 38 | 39 | ```html 40 | 45 | ``` 46 | 47 | ## Migration Strategy 48 | 49 | - remove all instances of the `.native` modifier. 50 | - ensure that all your components document their events with the `emits` option. 51 | 52 | [Migration build flag: `COMPILER_V_ON_NATIVE`](migration-build.html#compat-configuration) 53 | 54 | ## See also 55 | 56 | - [Relevant RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0031-attr-fallthrough.md#v-on-listener-fallthrough) 57 | - [Migration guide - New Emits Option](./emits-option.md) 58 | - [Migration guide - `$listeners` removed](./listeners-removed.md) 59 | - [Migration guide - Changes in the Render Functions API](./render-function-api.md) 60 | -------------------------------------------------------------------------------- /src/guide/migration/vnode-lifecycle-events.md: -------------------------------------------------------------------------------- 1 | --- 2 | badges: 3 | - breaking 4 | --- 5 | 6 | # VNode Lifecycle Events 7 | 8 | ## Overview 9 | 10 | In Vue 2, it was possible to use events to listen for key stages in a component's lifecycle. These events had names that started with the prefix `hook:`, followed by the name of the corresponding lifecycle hook. 11 | 12 | In Vue 3, this prefix has been changed to `vnode-`. In addition, these events are now available for HTML elements as well as components. 13 | 14 | ## 2.x Syntax 15 | 16 | In Vue 2, the event name is the same as the equivalent lifecycle hook, prefixed with `hook:`: 17 | 18 | ```html 19 | 22 | ``` 23 | 24 | ## 3.x Syntax 25 | 26 | In Vue 3, the event name is prefixed with `vnode-`: 27 | 28 | ```html 29 | 32 | ``` 33 | 34 | Or just `vnode` if you're using camelCase: 35 | 36 | ```html 37 | 40 | ``` 41 | 42 | ## Migration Strategy 43 | 44 | In most cases it should just require changing the prefix. The lifecycle hooks `beforeDestroy` and `destroyed` have been renamed to `beforeUnmount` and `unmounted` respectively, so the corresponding event names will also need to be updated. 45 | 46 | [Migration build flags: `INSTANCE_EVENT_HOOKS`](migration-build.html#compat-configuration) 47 | 48 | ## See Also 49 | 50 | - [Migration guide - Events API](/guide/migration/events-api.html) 51 | -------------------------------------------------------------------------------- /src/guide/migration/watch.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Watch on Arrays 3 | badges: 4 | - breaking 5 | --- 6 | 7 | # {{ $frontmatter.title }} 8 | 9 | ## Overview 10 | 11 | - **BREAKING**: When watching an array, the callback will only trigger when the array is replaced. If you need to trigger on mutation, the `deep` option must be specified. 12 | 13 | ## 3.x Syntax 14 | 15 | When using [the `watch` option](/api/options-data.html#watch) to watch an array, the callback will only trigger when the array is replaced. In other words, the watch callback will no longer be triggered on array mutation. To trigger on mutation, the `deep` option must be specified. 16 | 17 | ```js 18 | watch: { 19 | bookList: { 20 | handler(val, oldVal) { 21 | console.log('book list changed') 22 | }, 23 | deep: true 24 | }, 25 | } 26 | ``` 27 | 28 | ## Migration Strategy 29 | 30 | If you rely on watching array mutations, add the `deep` option to ensure that your callback is triggered correctly. 31 | 32 | [Migration build flag: `WATCH_ARRAY`](migration-build.html#compat-configuration) 33 | -------------------------------------------------------------------------------- /src/guide/mobile.md: -------------------------------------------------------------------------------- 1 | # Mobile 2 | 3 | ## Introduction 4 | 5 | While Vue.js does not natively support mobile app development, there are a number of solutions for creating native iOS and Android apps with Vue.js. 6 | 7 | ## Hybrid-App Development 8 | 9 | ### Capacitor 10 | 11 | [Capacitor](https://capacitorjs.com/) is a project from the [Ionic Team](https://ionic.io/) that allows developers to build native iOS, Android, and PWA apps with a single codebase by providing an API that can be run across multiple platforms. 12 | 13 | **Resources** 14 | 15 | - [Capacitor + Vue.js Guide](https://capacitorjs.com/solution/vue) 16 | 17 | ### NativeScript 18 | 19 | [NativeScript](https://www.nativescript.org) powers cross-platform (truly native) mobile apps, using the web skills you already know. Combined they are a fantastic pair for developing immersive mobile experiences. 20 | 21 | **Resources** 22 | 23 | - [NativeScript + Vue.js Guide](https://nativescript-vue.org/) 24 | -------------------------------------------------------------------------------- /src/guide/optimizations.md: -------------------------------------------------------------------------------- 1 | # Rendering Mechanisms and Optimizations 2 | 3 | > This page is not required reading in order to learn how to use Vue well, but it provides more information, should you be curious how rendering works under the hood. 4 | 5 | ## Virtual DOM 6 | 7 | Now that we know how watchers are updating the components, you might ask how those changes eventually make it to the DOM! Perhaps you’ve heard of the Virtual DOM before, many frameworks including Vue use this paradigm to make sure our interfaces reflect the changes we’re updating in JavaScript effectively 8 | 9 |
    10 | 11 |
    12 | 13 | We make a copy of the DOM in JavaScript called the Virtual DOM, we do this because touching the DOM with JavaScript is computationally expensive. While performing updates in JavaScript is cheap, finding the required DOM nodes and updating them with JavaScript is expensive. So we batch calls, and change the DOM all at once. 14 | 15 | The Virtual DOM is a lightweight JavaScript object, created by a render function. It takes three arguments: the element, an object with data, props, attrs and more, and an array. The array is where we pass in the children, which have all these arguments too, and then they can have children and so on, until we build a full tree of elements. 16 | 17 | If we need to update the list items, we do so in JavaScript, using the reactivity we mentioned earlier. We then make all the changes to the JavaScript copy, the virtual DOM, and perform a diff between this and the actual DOM. Only then do we make our updates to just what has changed. The Virtual DOM allows us to make performant updates to our UIs! 18 | -------------------------------------------------------------------------------- /src/guide/routing.md: -------------------------------------------------------------------------------- 1 | # Routing 2 | 3 | ## Official Router 4 | 5 | For most Single Page Applications, it's recommended to use the officially-supported [vue-router library](https://github.com/vuejs/vue-router-next). For more details, see vue-router's [documentation](https://next.router.vuejs.org/). 6 | 7 | ## Simple Routing from Scratch 8 | 9 | If you only need very simple routing and do not wish to involve a full-featured router library, you can do so by dynamically rendering a page-level component like this: 10 | 11 | ```js 12 | const { createApp, h } = Vue 13 | 14 | const NotFoundComponent = { template: '

    Page not found

    ' } 15 | const HomeComponent = { template: '

    Home page

    ' } 16 | const AboutComponent = { template: '

    About page

    ' } 17 | 18 | const routes = { 19 | '/': HomeComponent, 20 | '/about': AboutComponent 21 | } 22 | 23 | const SimpleRouter = { 24 | data: () => ({ 25 | currentRoute: window.location.pathname 26 | }), 27 | 28 | computed: { 29 | CurrentComponent() { 30 | return routes[this.currentRoute] || NotFoundComponent 31 | } 32 | }, 33 | 34 | render() { 35 | return h(this.CurrentComponent) 36 | } 37 | } 38 | 39 | createApp(SimpleRouter).mount('#app') 40 | ``` 41 | 42 | Combined with the [History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API), you can build a very basic but fully-functional client-side router. To see that in practice, check out [this example app](https://github.com/phanan/vue-3.0-simple-routing-example). 43 | 44 | ## Integrating 3rd-Party Routers 45 | 46 | If there's a 3rd-party router you prefer to use, such as [Page.js](https://github.com/visionmedia/page.js) or [Director](https://github.com/flatiron/director), integration is [similarly straightforward](https://github.com/phanan/vue-3.0-simple-routing-example/compare/master...pagejs). Here's a [complete example](https://github.com/phanan/vue-3.0-simple-routing-example/tree/pagejs) using Page.js. 47 | -------------------------------------------------------------------------------- /src/guide/ssr.md: -------------------------------------------------------------------------------- 1 | # Server-Side Rendering 2 | 3 | ## The Complete SSR Guide 4 | 5 | We have created a standalone guide for creating server-rendered Vue applications. This is a very in-depth guide for those who are already familiar with client-side Vue development, server-side Node.js development and webpack. Check it out [here](/guide/ssr/introduction.html). 6 | 7 | ## Nuxt.js 8 | 9 | Properly configuring all the discussed aspects of a production-ready server-rendered app can be a daunting task. Luckily, there is an excellent community project that aims to make all of this easier: [Nuxt.js](https://nuxtjs.org/). Nuxt.js is a higher-level framework built on top of the Vue ecosystem which provides an extremely streamlined development experience for writing universal Vue applications. Better yet, you can even use it as a static site generator (with pages authored as single-file Vue components)! We highly recommend giving it a try. 10 | 11 | ## Quasar Framework SSR + PWA 12 | 13 | [Quasar Framework](https://quasar.dev) will generate an SSR app (with optional PWA handoff) that leverages its best-in-class build system, sensible configuration and developer extensibility to make designing and building your idea a breeze. With over one hundred specific "Material Design 2.0"-compliant components, you can decide which ones to execute on the server, which are available in the browser, and even manage the `` tags of your site. Quasar is a node.js and webpack based development environment that supercharges and streamlines rapid development of SPA, PWA, SSR, Electron, Capacitor and Cordova apps—all from one codebase. 14 | 15 | ## Vite SSR 16 | 17 | [Vite](https://vitejs.dev/) is a new breed of frontend build tool that significantly improves the frontend development experience. It consists of two major parts: 18 | 19 | - A dev server that serves your source files over native ES modules, with rich built-in features and astonishingly fast Hot Module Replacement (HMR). 20 | 21 | - A build command that bundles your code with [Rollup](https://rollupjs.org/), pre-configured to output highly optimized static assets for production. 22 | 23 | Vite also provides built-in [support for server-side rendering](https://vitejs.dev/guide/ssr.html). You can find an example project with Vue [here](https://github.com/vitejs/vite/tree/main/packages/playground/ssr-vue) 24 | -------------------------------------------------------------------------------- /src/guide/ssr/getting-started.md: -------------------------------------------------------------------------------- 1 | # Getting Started 2 | 3 | > This guide is currently under active development 4 | 5 | ## Installation 6 | 7 | In order to create a server-side rendered application, we need to install the `@vue/server-renderer` package: 8 | 9 | ```bash 10 | npm install @vue/server-renderer 11 | ## OR 12 | yarn add @vue/server-renderer 13 | ``` 14 | 15 | #### Notes 16 | 17 | - It's recommended to use Node.js version 12+. 18 | - `@vue/server-renderer` and `vue` must have matching versions. 19 | - `@vue/server-renderer` relies on some Node.js native modules and therefore can only be used in Node.js. We may provide a simpler build that can be run in other JavaScript runtimes in the future. 20 | 21 | ## Rendering a Vue Application 22 | 23 | Unlike a client-only Vue application, which is created using `createApp`, an SSR application needs to be created using `createSSRApp`: 24 | 25 | ```js 26 | const { createSSRApp } = require('vue') 27 | 28 | const app = createSSRApp({ 29 | data() { 30 | return { 31 | user: 'John Doe' 32 | } 33 | }, 34 | template: `
    Current user is: {{ user }}
    ` 35 | }) 36 | ``` 37 | 38 | Now, we can use the `renderToString` function to render our application instance to a string. This function returns a Promise which resolves to the rendered HTML. 39 | 40 | ```js{2,13} 41 | const { createSSRApp } = require('vue') 42 | const { renderToString } = require('@vue/server-renderer') 43 | 44 | const app = createSSRApp({ 45 | data() { 46 | return { 47 | user: 'John Doe' 48 | } 49 | }, 50 | template: `
    Current user is: {{ user }}
    ` 51 | }) 52 | 53 | const appContent = await renderToString(app) 54 | ``` 55 | 56 | ## Integrating with a Server 57 | 58 | To run an application, in this example we will use [Express](https://expressjs.com/): 59 | 60 | ```bash 61 | npm install express 62 | ## OR 63 | yarn add express 64 | ``` 65 | 66 | ```js 67 | // server.js 68 | 69 | const { createSSRApp } = require('vue') 70 | const { renderToString } = require('@vue/server-renderer') 71 | const server = require('express')() 72 | 73 | server.get('*', async (req, res) => { 74 | const app = createSSRApp({ 75 | data() { 76 | return { 77 | user: 'John Doe' 78 | } 79 | }, 80 | template: `
    Current user is: {{ user }}
    ` 81 | }) 82 | 83 | const appContent = await renderToString(app) 84 | const html = ` 85 | 86 | 87 |

    My First Heading

    88 |
    ${appContent}
    89 | 90 | 91 | ` 92 | 93 | res.end(html) 94 | }) 95 | 96 | server.listen(8080) 97 | ``` 98 | 99 | Now, when running this Node.js script, we can see a static HTML page on `localhost:8080`. However, this code is not _hydrated_: Vue hasn't yet taken over the static HTML sent by the server to turn it into dynamic DOM that can react to client-side data changes. This will be covered in the [Client Side Hydration](hydration.html) section. 100 | -------------------------------------------------------------------------------- /src/guide/ssr/hydration.md: -------------------------------------------------------------------------------- 1 | # Client Side Hydration 2 | 3 | Hydration refers to the client-side process during which Vue takes over the static HTML sent by the server and turns it into dynamic DOM that can react to client-side data changes. 4 | 5 | In `entry-client.js`, we are simply mounting the app with this line: 6 | 7 | ```js 8 | app.mount('#app') 9 | ``` 10 | 11 | Since the server has already rendered the markup, we obviously do not want to throw that away and re-create all the DOM elements. Instead, we want to "hydrate" the static markup and make it interactive. 12 | 13 | Vue provides a `createSSRApp` method for use in client-side code (in this case, in our `entry-client.js`) to tell Vue to hydrate the existing static HTML instead of re-creating all the DOM elements. 14 | 15 | ### Hydration Caveats 16 | 17 | Vue will assert the client-side generated virtual DOM tree matches the DOM structure rendered from the server. If there is a mismatch, it will bail hydration, discard existing DOM and render from scratch. There will be a warning in the browser console but your site will still work. 18 | 19 | The first key way to ensure that SSR is working to ensuring your application state is the same on client and server. Take special care not to depend on APIs specific to the browser (like window width, device capability or localStorage) or server (such as Node built-ins), and take care where the same code will give different results when run in different places (such as when using timezones, timestamps, normalizing URLs or generating random numbers). See [Writing Universal Code](./universal.md) for more details. 20 | 21 | A second key thing to be aware of when using SSR + client hydration is that invalid HTML may be altered by the browser. For example, when you write this in a Vue template: 22 | 23 | ```html 24 | 25 | 26 | 27 | 28 |
    hi
    29 | ``` 30 | 31 | The browser will automatically inject `` inside ``, however, the virtual DOM generated by Vue does not contain ``, so it will cause a mismatch. To ensure correct matching, make sure to write valid HTML in your templates. 32 | 33 | You might consider using a HTML validator like [the W3C Markup Validation Service](https://validator.w3.org/) or [HTML-validate](https://html-validate.org/) to check your templates in development. 34 | -------------------------------------------------------------------------------- /src/guide/ssr/server.md: -------------------------------------------------------------------------------- 1 | # Server Configuration 2 | 3 | The [code structure](./structure.html) and [webpack configuration](./build-config.html) we've described also require some changes to our Express server code. 4 | 5 | - we need to create an application with a built `entry-server.js` from the resulting bundle. A path to it can be found using the webpack manifest: 6 | 7 | ```js 8 | // server.js 9 | const path = require('path') 10 | const manifest = require('./dist/server/ssr-manifest.json') 11 | 12 | // the 'app.js' name is taken from the name of the entrypoint with an added `.js` postfix 13 | const appPath = path.join(__dirname, './dist', 'server', manifest['app.js']) 14 | const createApp = require(appPath).default 15 | ``` 16 | 17 | - we have to define correct paths to all the assets: 18 | 19 | ```js 20 | // server.js 21 | server.use( 22 | '/img', 23 | express.static(path.join(__dirname, './dist/client', 'img')) 24 | ) 25 | server.use('/js', express.static(path.join(__dirname, './dist/client', 'js'))) 26 | server.use( 27 | '/css', 28 | express.static(path.join(__dirname, './dist/client', 'css')) 29 | ) 30 | server.use( 31 | '/favicon.ico', 32 | express.static(path.join(__dirname, './dist/client', 'favicon.ico')) 33 | ) 34 | ``` 35 | 36 | - we need to replace the `index.html` content with our server-side rendered application content: 37 | 38 | ```js 39 | // server.js 40 | const indexTemplate = fs.readFileSync( 41 | path.join(__dirname, '/dist/client/index.html'), 42 | 'utf-8' 43 | ) 44 | 45 | server.get('*', async (req, res) => { 46 | const { app } = createApp() 47 | 48 | const appContent = await renderToString(app) 49 | 50 | const html = indexTemplate 51 | .toString() 52 | .replace('
    ', `
    ${appContent}`) 53 | 54 | res.setHeader('Content-Type', 'text/html') 55 | res.send(html) 56 | }) 57 | ``` 58 | 59 | Below you can find a full code for our Express server: 60 | 61 | ```js 62 | const path = require('path') 63 | const express = require('express') 64 | const fs = require('fs') 65 | const { renderToString } = require('@vue/server-renderer') 66 | const manifest = require('./dist/server/ssr-manifest.json') 67 | 68 | const server = express() 69 | 70 | const appPath = path.join(__dirname, './dist', 'server', manifest['app.js']) 71 | const createApp = require(appPath).default 72 | 73 | server.use('/img', express.static(path.join(__dirname, './dist/client', 'img'))) 74 | server.use('/js', express.static(path.join(__dirname, './dist/client', 'js'))) 75 | server.use('/css', express.static(path.join(__dirname, './dist/client', 'css'))) 76 | server.use( 77 | '/favicon.ico', 78 | express.static(path.join(__dirname, './dist/client', 'favicon.ico')) 79 | ) 80 | 81 | server.get('*', async (req, res) => { 82 | const { app } = createApp() 83 | 84 | const appContent = await renderToString(app) 85 | 86 | fs.readFile(path.join(__dirname, '/dist/client/index.html'), (err, html) => { 87 | if (err) { 88 | throw err 89 | } 90 | 91 | html = html 92 | .toString() 93 | .replace('
    ', `
    ${appContent}`) 94 | res.setHeader('Content-Type', 'text/html') 95 | res.send(html) 96 | }) 97 | }) 98 | 99 | console.log('You can navigate to http://localhost:8080') 100 | 101 | server.listen(8080) 102 | ``` 103 | -------------------------------------------------------------------------------- /src/guide/ssr/universal.md: -------------------------------------------------------------------------------- 1 | # Writing Universal Code 2 | 3 | Before going further, let's take a moment to discuss the constraints when writing "universal" code - that is, code that runs on both the server and the client. Due to use case and platform API differences, the behavior of our code will not be exactly the same when running in different environments. Here we will go over the key things you need to be aware of. 4 | 5 | ## Data Reactivity on the Server 6 | 7 | In a client-only app, every user will be using a fresh instance of the app in their browser. For server-side rendering we want the same: each request should have a fresh, isolated app instance so that there is no cross-request state pollution. 8 | 9 | Because the actual rendering process needs to be deterministic, we will also be "pre-fetching" data on the server - this means our application state will be already resolved when we start rendering. This means data reactivity is unnecessary on the server, so it is disabled by default. Disabling data reactivity also avoids the performance cost of converting data into reactive objects. 10 | 11 | ## Component Lifecycle Hooks 12 | 13 | Since there are no dynamic updates, the only [lifecycle hooks](/guide/instance.html#lifecycle-hooks) that will be called during SSR are `beforeCreate` and `created`. This means any code inside other lifecycle hooks such as `beforeMount` or `mounted` will only be executed on the client. 14 | 15 | Another thing to note is that you should avoid code that produces global side effects in `beforeCreate` and `created`, for example setting up timers with `setInterval`. In client-side only code we may setup a timer and then tear it down in `beforeUnmount` or `unmounted`. However, because the destroy hooks will not be called during SSR, the timers will stay around forever. To avoid this, move your side-effect code into `beforeMount` or `mounted` instead. 16 | 17 | ## Access to Platform-Specific APIs 18 | 19 | Universal code cannot assume access to platform-specific APIs, so if your code directly uses browser-only globals like `window` or `document`, they will throw errors when executed in Node.js, and vice-versa. 20 | 21 | For tasks shared between server and client but using different platform APIs, it's recommended to wrap the platform-specific implementations inside a universal API, or use libraries that do this for you. For example, [axios](https://github.com/axios/axios) is an HTTP client that exposes the same API for both server and client. 22 | 23 | For browser-only APIs, the common approach is to lazily access them inside client-only lifecycle hooks. 24 | 25 | Note that if a 3rd party library is not written with universal usage in mind, it could be tricky to integrate it into an server-rendered app. You _might_ be able to get it working by mocking some of the globals, but it would be hacky and may interfere with the environment detection code of other libraries. 26 | 27 | ## Custom Directives 28 | 29 | Most [custom directives](/guide/custom-directive.html#custom-directives) directly manipulate the DOM, which will cause errors during SSR. We recommend to prefer using components as the abstraction mechanism instead of directives. 30 | -------------------------------------------------------------------------------- /src/search/README.md: -------------------------------------------------------------------------------- 1 | # Search Vue.js 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/support-vuejs/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | supportvue: true 3 | sidebar: auto 4 | --- 5 | 6 | # Sponsori Pengembangan Vue.js 7 | 8 | Vue.js merupakan sebuah proyek sumber terbuka berlisensi MIT dan bebas untuk digunakan. 9 | Bagaimanapun, upaya yang diperlukan untuk memelihara dan mengembangkan fitur-fitur baru untuk proyek tersebut tidak akan bertahan tanpa dukungan finansial yang layak. Kamu dapat mendukung pengembangan Vue.js melalui cara-cara berikut: 10 | 11 | ## Donasi Sekali Waktu 12 | 13 | Kami menerima donasi melalui beberapa kanal di bawah ini: 14 | 15 | 16 | 17 | ## Donasi Berkala 18 | 19 | Donasi berkala datang dengan keuntungan eksklusif, misalnya namamu tercantum di repositori GitHub Vue, atau logo perusahaanmu diletakkan pada situs web ini. 20 | 21 | - [Menjadi pendukung atau sponsor melalui Patreon](https://www.patreon.com/evanyou) (Disalurkan secara langsung untuk mendukung Evan You bekerja penuh pada Vue) 22 | - [Menjadi pendukung atau sponsor melalui OpenCollective](https://opencollective.com/vuejs) (Disalurkan ke dalam dana dengan model pengeluaran transparan untuk mendukung komunitas dan kegiatan) 23 | 24 | ## Sponsor Premium Saat Ini 25 | 26 | ### Sponsor Special 27 | 28 | 29 | 30 | ### Platinum 31 | 32 | 33 | 34 | ### OpenCollective Platinum 35 | 36 | 37 | 38 | ### Sponsor Spesial (China) 39 | 40 | 41 | 42 | ### Patreon Gold 43 | 44 |