-A full changelog of past releases is available on [GitHub](https://github.com/vuejs/core/blob/main/CHANGELOG.md).
+પાછલી રિલીઝનો સંપૂર્ણ ચેન્જલોગ [GitHub](https://github.com/vuejs/core/blob/main/CHANGELOG.md) પર ઉપલબ્ધ છે.
-## Release Cycle {#release-cycle}
+## રિલીઝ ચક્ર (Release Cycle) {#release-cycle}
-Vue does not have a fixed release cycle.
+Vue માં કોઈ નિશ્ચિત રિલીઝ ચક્ર નથી.
-- Patch releases are released as needed.
+- પેચ રિલીઝ જરૂર મુજબ બહાર પાડવામાં આવે છે.
-- Minor releases always contain new features, with a typical time frame of 3~6 months in between. Minor releases always go through a beta pre-release phase.
+- માઇનર રિલીઝમાં હંમેશા નવી સુવિધાઓ હોય છે, જેમાં સામાન્ય રીતે ૩~૬ મહિનાનો સમયગાળો હોય છે. માઇનર રિલીઝ હંમેશા બીટા પ્રી-રિલીઝ તબક્કામાંથી પસાર થાય છે.
-- Major releases will be announced ahead of time, and will go through an early discussion phase and alpha / beta pre-release phases.
+- મેજર રિલીઝની જાહેરાત સમય પહેલા કરવામાં આવશે, અને તે શરૂઆતી ચર્ચાના તબક્કા અને આલ્ફા / બીટા પ્રી-રિલીઝ તબક્કાઓમાંથી પસાર થશે.
-## Semantic Versioning Edge Cases {#semantic-versioning-edge-cases}
+## સેમેન્ટિક વર્ઝનિંગ એજ કેસ (Semantic Versioning Edge Cases) {#semantic-versioning-edge-cases}
-Vue releases follow [Semantic Versioning](https://semver.org/) with a few edge cases.
+Vue રિલીઝ થોડા એજ કેસ સાથે [સેમેન્ટિક વર્ઝનિંગ (Semantic Versioning)](https://semver.org/) ને અનુસરે છે.
-### TypeScript Definitions {#typescript-definitions}
+### TypeScript ડેફિનેશન {#typescript-definitions}
-We may ship incompatible changes to TypeScript definitions between **minor** versions. This is because:
+અમે **માઇનર** વર્ઝન વચ્ચે TypeScript ડેફિનેશનમાં અસંગત ફેરફારો મોકલી શકીએ છીએ. આનું કારણ છે:
-1. Sometimes TypeScript itself ships incompatible changes between minor versions, and we may have to adjust types to support newer versions of TypeScript.
+૧. ક્યારેક TypeScript પોતે માઇનર વર્ઝન વચ્ચે અસંગત ફેરફારો મોકલે છે, અને અમારે TypeScript ના નવા વર્ઝનને સપોર્ટ કરવા માટે ટાઇપ્સને સમાયોજિત (adjust) કરવા પડી શકે છે.
-2. Occasionally we may need to adopt features that are only available in a newer version of TypeScript, raising the minimum required version of TypeScript.
+૨. પ્રસંગોપાત અમારે એવી સુવિધાઓ અપનાવવાની જરૂર પડી શકે છે જે માત્ર TypeScript ના નવા સંસ્કરણમાં ઉપલબ્ધ હોય, જે TypeScript ના લઘુત્તમ જરૂરી સંસ્કરણને વધારે છે.
-If you are using TypeScript, you can use a semver range that locks the current minor and manually upgrade when a new minor version of Vue is released.
+જો તમે TypeScript નો ઉપયોગ કરી રહ્યાં હોવ, તો તમે ફિક્સ કરેલ માઇનર વર્ઝન વાપરી શકો છો અને જ્યારે Vue નું નવું માઇનર વર્ઝન રિલીઝ થાય ત્યારે મેન્યુઅલી અપગ્રેડ કરી શકો છો.
-### Compiled Code Compatibility with Older Runtime {#compiled-code-compatibility-with-older-runtime}
+### જૂના રનટાઇમ સાથે કમ્પાઇલ કરેલ કોડ સુસંગતતા {#compiled-code-compatibility-with-older-runtime}
-A newer **minor** version of Vue compiler may generate code that isn't compatible with the Vue runtime from an older minor version. For example, code generated by Vue 3.2 compiler may not be fully compatible if consumed by the runtime from Vue 3.1.
+Vue કમ્પાઇલરનું નવું **માઇનર** વર્ઝન એવો કોડ જનરેટ કરી શકે છે જે જૂના માઇનર વર્ઝનના Vue રનટાઇમ સાથે સુસંગત ન હોય. ઉદાહરણ તરીકે, Vue 3.2 કમ્પાઇલર દ્વારા જનરેટ કરાયેલ કોડ જો Vue 3.1 ના રનટાઇમ દ્વારા વાપરવામાં આવે તો તે સંપૂર્ણપણે સુસંગત ન હોઈ શકે.
-This is only a concern for library authors, because in applications, the compiler version and the runtime version is always the same. A version mismatch can only happen if you ship pre-compiled Vue component code as a package, and a consumer uses it in a project using an older version of Vue. As a result, your package may need to explicitly declare a minimum required minor version of Vue.
+આ માત્ર લાઇબ્રેરી લેખકો માટે જ ચિંતાનો વિષય છે, કારણ કે એપ્લિકેશન્સમાં, કમ્પાઇલર વર્ઝન અને રનટાઇમ વર્ઝન હંમેશા સમાન હોય છે. વર્ઝન મેળ ન ખાવાની સ્થિતિ ત્યારે જ આવી શકે છે જો તમે પ્રી-કમ્પાઇલ કરેલ Vue ઘટક કોડ પેકેજ તરીકે મોકલો, અને ગ્રાહક તેને Vue ના જૂના વર્ઝનનો ઉપયોગ કરતા પ્રોજેક્ટમાં વાપરે. પરિણામે, તમારા પેકેજમાં Vue ના લઘુત્તમ જરૂરી માઇનર વર્ઝનને સ્પષ્ટપણે જાહેર કરવાની જરૂર પડી શકે છે.
-## Pre Releases {#pre-releases}
+## પ્રી-રિલીઝ (Pre Releases) {#pre-releases}
-Minor and major releases typically go through a series of pre-release phases: **alpha**, **beta**, and **release candidate (RC)**. The number and type of pre-releases depend on the scope of changes. For example, a minor release with limited updates may only have a beta phase, while a major release will usually include all three phases to allow for thorough testing and community feedback.
+માઇનર અને મેજર રિલીઝ સામાન્ય રીતે પ્રી-રિલીઝ તબક્કાઓની શ્રેણીમાંથી પસાર થાય છે: **આલ્ફા (alpha)**, **બીટા (beta)**, અને **રિલીઝ કેન્ડિડેટ (RC)**. પ્રી-રિલીઝની સંખ્યા અને પ્રકાર ફેરફારોના સ્કેલ પર આધારિત છે. ઉદાહરણ તરીકે, મર્યાદિત અપડેટ્સ ધરાવતી માઇનર રિલીઝમાં માત્ર બીટા તબક્કો હોઈ શકે છે, જ્યારે મેજર રિલીઝમાં સામાન્ય રીતે સંપૂર્ણ પરીક્ષણ અને સમુદાય પ્રતિસાદ માટે ત્રણેય તબક્કાઓનો સમાવેશ થાય છે.
-You can install the latest pre-releases from npm using `npx install-vue@alpha`, `npx install-vue@beta`, or `npx install-vue@rc`. For testing changes not yet included in tagged pre-releases, every commit to the [vuejs/core](https://github.com/vuejs/core) repository is published as a temporary continuous-release preview, which you can install using `npx install-vue@edge`.
+તમે npm પરથી `npx install-vue@alpha`, `npx install-vue@beta`, અથવા `npx install-vue@rc` નો ઉપયોગ કરીને નવીનતમ પ્રી-રિલીઝ ઇન્સ્ટોલ કરી શકો છો. ટેગ કરેલ પ્રી-રિલીઝમાં હજુ સુધી સમાવિષ્ટ ન હોય તેવા ફેરફારોના પરીક્ષણ માટે, [vuejs/core](https://github.com/vuejs/core) રિપોઝિટરીમાંના દરેક કમિટને કામચલાઉ કન્ટીન્યુઅસ-રિલીઝ પ્રિવ્યૂ તરીકે પ્રકાશિત કરવામાં આવે છે, જેને તમે `npx install-vue@edge` નો ઉપયોગ કરીને ઇન્સ્ટોલ કરી શકો છો.
-Pre-releases are meant for integration / stability testing, and for early adopters to provide feedback for unstable features. Do not use pre-releases in production. All pre-releases are considered unstable and may ship breaking changes in between, so always pin to exact versions when using pre-releases.
+પ્રી-રિલીઝ ઇન્ટિગ્રેશન / સ્ટેબિલિટી પરીક્ષણ માટે છે અને શરૂઆતી અપનાવનારાઓ માટે અસ્થિર સુવિધાઓ માટે પ્રતિસાદ આપવા માટે છે. પ્રોડક્શનમાં પ્રી-રિલીઝનો ઉપયોગ કરશો નહીં. તમામ પ્રી-રિલીઝ અસ્થિર માનવામાં આવે છે અને તેની વચ્ચે બ્રેકિંગ ફેરફારો હોઈ શકે છે, તેથી પ્રી-રિલીઝનો ઉપયોગ કરતી વખતે હંમેશા ચોક્કસ વર્ઝન પર જ રહો.
-## Deprecations {#deprecations}
+## નાબૂદી (Deprecations) {#deprecations}
-We may periodically deprecate features that have new, better replacements in minor releases. Deprecated features will continue to work, and will be removed in the next major release after it entered deprecated status.
+અમે સમયાંતરે એવી સુવિધાઓને નાબૂદ (deprecate) કરી શકીએ છીએ કે જેની પાસે માઇનર રિલીઝમાં નવી, બહેતર બદલીઓ છે. નાબૂદ કરેલી સુવિધાઓ કામ કરવાનું ચાલુ રાખશે, અને તે નાબૂદ સ્થિતિમાં દાખલ થયા પછી આગામી મેજર રિલીઝમાં દૂર કરવામાં આવશે.
## RFCs {#rfcs}
-New features with substantial API surface and major changes to Vue will go through the **Request for Comments** (RFC) process. The RFC process is intended to provide a consistent and controlled path for new features to enter the framework, and give the users an opportunity to participate and offer feedback in the design process.
+નોંધપાત્ર API ફેરફાર અને Vue માં મુખ્ય ફેરફારો સાથેની નવી સુવિધાઓ **રિક્વેસ્ટ ફોર કોમેન્ટ્સ (Request for Comments - RFC)** પ્રક્રિયામાંથી પસાર થશે. RFC પ્રક્રિયાનો હેતુ નવી સુવિધાઓ માટે ફ્રેમવર્કમાં પ્રવેશવા માટે એક સુસંગત અને નિયંત્રિત માર્ગ પ્રદાન કરવાનો છે, અને વપરાશકર્તાઓને ડિઝાઇન પ્રક્રિયામાં ભાગ લેવાની અને પ્રતિસાદ આપવાની તક આપવાનો છે.
-The RFC process is conducted in the [vuejs/rfcs](https://github.com/vuejs/rfcs) repo on GitHub.
+RFC પ્રક્રિયા GitHub પર [vuejs/rfcs](https://github.com/vuejs/rfcs) રિપોઝિટરીમાં હાથ ધરવામાં આવે છે.
-## Experimental Features {#experimental-features}
+## પ્રાયોગિક સુવિધાઓ (Experimental Features) {#experimental-features}
-Some features are shipped and documented in a stable version of Vue, but marked as experimental. Experimental features are typically features that have an associated RFC discussion with most of the design problems resolved on paper, but still lacking feedback from real-world usage.
+કેટલીક સુવિધાઓ Vue ના સ્ટેબલ સંસ્કરણમાં મોકલવામાં આવે છે અને દસ્તાવેજીકૃત કરવામાં આવે છે, પરંતુ તેને પ્રાયોગિક (experimental) તરીકે ચિહ્નિત કરવામાં આવે છે. પ્રાયોગિક સુવિધાઓ સામાન્ય રીતે એવી સુવિધાઓ હોય છે કે જેની સાથે સંકળાયેલ RFC ચર્ચા હોય છે અને જેમાં મોટાભાગની ડિઝાઇન સમસ્યાઓ કાગળ પર ઉકેલાઈ ગઈ હોય છે, પરંતુ હજી પણ વાસ્તવિક દુનિયાના વપરાશ પ્રતિસાદનો અભાવ હોય છે.
-The goal of experimental features is to allow users to provide feedback for them by testing them in a production setting, without having to use an unstable version of Vue. Experimental features themselves are considered unstable, and should only be used in a controlled manner, with the expectation that the feature may change between any release types.
+પ્રાયોગિક સુવિધાઓનો ધ્યેય વપરાશકર્તાઓને Vue ના અસ્થિર સંસ્કરણનો ઉપયોગ કર્યા વિના, પ્રોડક્શન સેટિંગમાં તેમનું પરીક્ષણ કરીને પ્રતિસાદ આપવા દેવાનો છે. પ્રાયોગિક સુવિધાઓ પોતે અસ્થિર માનવામાં આવે છે અને તેનો ઉપયોગ ફક્ત નિયંત્રિત રીતે થવો જોઈએ, એવી અપેક્ષા સાથે કે કોઈપણ રિલીઝ પ્રકારો વચ્ચે તે સુવિધા બદલાઈ શકે છે.
diff --git a/src/about/team.md b/src/about/team.md
index b126502bf2..a929a161a6 100644
--- a/src/about/team.md
+++ b/src/about/team.md
@@ -1,6 +1,6 @@
---
page: true
-title: Meet the Team
+title: ટીમને મળો (Meet the Team)
---
-
+
```
- In practice, this edge case isn't common as native form fields are typically wrapped in components in real applications. If you do need to use a native element directly then you can split the `v-model` into an attribute and event manually.
+ વ્યવહારમાં, આ edge case સામાન્ય નથી કારણ કે native form fields સામાન્ય રીતે વાસ્તવિક applications માં ઘટકોમાં wrapped હોય છે. જો તમારે native element ને direct ઉપયોગ કરવાની જરૂર હોય, તમે `v-model` ને attribute અને event માં manually split કરી શકો.
-- **See also** [Dynamic Components](/guide/essentials/component-basics#dynamic-components)
+- **આ પણ જુઓ** [ડાયનેમિક કમ્પોનન્ટ્સ](/guide/essentials/component-basics#dynamic-components)
## `` {#slot}
-Denotes slot content outlets in templates.
+Templates માં slot content outlets દર્શાવે છે.
- **Props**
```ts
interface SlotProps {
/**
- * Any props passed to to passed as arguments
- * for scoped slots
+ * ને પાસ કરેલા કોઈપણ props scoped slots માટે
+ * arguments તરીકે પાસ થાય
*/
[key: string]: any
/**
- * Reserved for specifying slot name.
+ * Slot name સ્પષ્ટ કરવા માટે reserved.
*/
name?: string
}
```
-- **Details**
+- **વિગત (Details)**
- The `` element can use the `name` attribute to specify a slot name. When no `name` is specified, it will render the default slot. Additional attributes passed to the slot element will be passed as slot props to the scoped slot defined in the parent.
+ `` element slot name સ્પષ્ટ કરવા માટે `name` attribute ઉપયોગ કરી શકે. કોઈ `name` સ્પષ્ટ ન હોય ત્યારે, default slot રેન્ડર થશે. Slot element ને પાસ કરેલા વધારાના attributes parent માં defined scoped slot ને slot props તરીકે પાસ થશે.
- The element itself will be replaced by its matched slot content.
+ Element પોતે તેના matched slot content દ્વારા replaced થશે.
- `` elements in Vue templates are compiled into JavaScript, so they are not to be confused with [native `` elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot).
+ Vue templates માં `` elements JavaScript માં compile થાય છે, તેથી તેમને [native `` elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) સાથે ભેળસેળ ન કરવી.
-- **See also** [Component - Slots](/guide/components/slots)
+- **આ પણ જુઓ** [ઘટક - Slots](/guide/components/slots)
## `` {#template}
-The `` tag is used as a placeholder when we want to use a built-in directive without rendering an element in the DOM.
+`` ટેગનો ઉપયોગ placeholder તરીકે થાય છે જ્યારે આપણે DOM માં element રેન્ડર કર્યા વિના built-in directive ઉપયોગ કરવા માંગીએ.
-- **Details**
+- **વિગત (Details)**
- The special handling for `` is only triggered if it is used with one of these directives:
+ `` માટે ખાસ handling ફક્ત ત્યારે જ trigger થાય છે જ્યારે તે આ directives માંથી કોઈ એક સાથે ઉપયોગ થાય:
- - `v-if`, `v-else-if`, or `v-else`
+ - `v-if`, `v-else-if`, અથવા `v-else`
- `v-for`
- `v-slot`
- If none of those directives are present then it will be rendered as a [native `` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template) instead.
+ જો આ directives માંથી કોઈ હાજર ન હોય તો તે [native `` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template) તરીકે રેન્ડર થશે.
- A `` with a `v-for` can also have a [`key` attribute](/api/built-in-special-attributes#key). All other attributes and directives will be discarded, as they aren't meaningful without a corresponding element.
+ `v-for` ધરાવતા `` ને [`key` attribute](/api/built-in-special-attributes#key) પણ હોઈ શકે. અન્ય તમામ attributes અને directives ને discard કરવામાં આવશે, કારણ કે corresponding element વિના તેઓ અર્થપૂર્ણ નથી.
- Single-file components use a [top-level `` tag](/api/sfc-spec#language-blocks) to wrap the entire template. That usage is separate from the use of `` described above. That top-level tag is not part of the template itself and doesn't support template syntax, such as directives.
+ Single-file components સમગ્ર template ને wrap કરવા માટે [top-level `` tag](/api/sfc-spec#language-blocks) ઉપયોગ કરે છે. તે ઉપયોગ ઉપર વર્ણવેલા `` ના ઉપયોગથી અલગ છે. તે top-level tag template નો ભાગ નથી અને directives જેવા template syntax ને support કરતો નથી.
-- **See also**
- - [Guide - `v-if` on ``](/guide/essentials/conditional#v-if-on-template)
- - [Guide - `v-for` on ``](/guide/essentials/list#v-for-on-template)
- - [Guide - Named slots](/guide/components/slots#named-slots)
+- **આ પણ જુઓ**
+ - [ગાઇડ - `` પર `v-if`](/guide/essentials/conditional#v-if-on-template)
+ - [ગાઇડ - `` પર `v-for`](/guide/essentials/list#v-for-on-template)
+ - [ગાઇડ - Named slots](/guide/components/slots#named-slots)
diff --git a/src/api/compile-time-flags.md b/src/api/compile-time-flags.md
index 1da1a8ccc5..6444f8295f 100644
--- a/src/api/compile-time-flags.md
+++ b/src/api/compile-time-flags.md
@@ -2,50 +2,50 @@
outline: deep
---
-# Compile-Time Flags {#compile-time-flags}
+# કમ્પાઇલ-ટાઇમ ફ્લેગ્સ (Compile-Time Flags) {#compile-time-flags}
:::tip
-Compile-time flags only apply when using the `esm-bundler` build of Vue (i.e. `vue/dist/vue.esm-bundler.js`).
+કમ્પાઇલ-ટાઇમ ફ્લેગ્સ ફક્ત Vue ના `esm-bundler` બિલ્ડ (i.e. `vue/dist/vue.esm-bundler.js`) ઉપયોગ કરતી વખતે જ લાગુ થાય છે.
:::
-When using Vue with a build step, it is possible to configure a number of compile-time flags to enable / disable certain features. The benefit of using compile-time flags is that features disabled this way can be removed from the final bundle via tree-shaking.
+બિલ્ડ સ્ટેપ સાથે Vue ઉપયોગ કરતી વખતે, ચોક્કસ સુવિધાઓ સક્ષમ / અક્ષમ (enable / disable) કરવા માટે ઘણા કમ્પાઇલ-ટાઇમ ફ્લેગ્સ કોન્ફિગર કરવું શક્ય છે. કમ્પાઇલ-ટાઇમ ફ્લેગ્સ ઉપયોગ કરવાનો ફાયદો એ છે કે આ રીતે અક્ષમ કરેલી સુવિધાઓને tree-shaking દ્વારા અંતિમ bundle માંથી દૂર કરી શકાય.
-Vue will work even if these flags are not explicitly configured. However, it is recommended to always configure them so that the relevant features can be properly removed when possible.
+જો આ ફ્લેગ્સ સ્પષ્ટ રીતે કોન્ફિગર ન કરવામાં આવ્યા હોય તો પણ Vue કામ કરશે. જો કે, તેમને હંમેશા કોન્ફિગર કરવાની ભલામણ કરવામાં આવે છે જેથી જ્યારે શક્ય હોય ત્યારે સંબંધિત સુવિધાઓ યોગ્ય રીતે દૂર થઈ શકે.
-See [Configuration Guides](#configuration-guides) on how to configure them depending on your build tool.
+તમારા બિલ્ડ ટૂલના આધારે તેમને કેવી રીતે કોન્ફિગર કરવા તે માટે [કોન્ફિગરેશન ગાઇડ્સ](#configuration-guides) જુઓ.
## `__VUE_OPTIONS_API__` {#VUE_OPTIONS_API}
-- **Default:** `true`
+- **ડિફોલ્ટ (Default):** `true`
- Enable / disable Options API support. Disabling this will result in smaller bundles, but may affect compatibility with 3rd party libraries if they rely on Options API.
+ Options API સપોર્ટ સક્ષમ / અક્ષમ કરો. આને અક્ષમ કરવાથી નાના bundles મળશે, પરંતુ જો તૃતીય-પક્ષ (3rd party) libraries Options API પર આધાર રાખે છે તો સુસંગતતા (compatibility) ને અસર કરી શકે.
## `__VUE_PROD_DEVTOOLS__` {#VUE_PROD_DEVTOOLS}
-- **Default:** `false`
+- **ડિફોલ્ટ (Default):** `false`
- Enable / disable devtools support in production builds. This will result in more code included in the bundle, so it is recommended to only enable this for debugging purposes.
+ પ્રોડક્શન builds માં devtools સપોર્ટ સક્ષમ / અક્ષમ કરો. આનાથી bundle માં વધુ કોડ સામેલ થશે, તેથી ફક્ત debugging હેતુઓ માટે જ આને સક્ષમ કરવાની ભલામણ કરવામાં આવે છે.
## `__VUE_PROD_HYDRATION_MISMATCH_DETAILS__` {#VUE_PROD_HYDRATION_MISMATCH_DETAILS}
-- **Default:** `false`
+- **ડિફોલ્ટ (Default):** `false`
- Enable/disable detailed warnings for hydration mismatches in production builds. This will result in more code included in the bundle, so it is recommended to only enable this for debugging purposes.
+ પ્રોડક્શન builds માં hydration mismatches માટે વિગતવાર ચેતવણીઓ સક્ષમ/અક્ષમ કરો. આનાથી bundle માં વધુ કોડ સામેલ થશે, તેથી ફક્ત debugging હેતુઓ માટે જ આને સક્ષમ કરવાની ભલામણ કરવામાં આવે છે.
-- Only available in 3.4+
+- માત્ર 3.4+ માં ઉપલબ્ધ
-## Configuration Guides {#configuration-guides}
+## કોન્ફિગરેશન ગાઇડ્સ (Configuration Guides) {#configuration-guides}
### Vite {#vite}
-`@vitejs/plugin-vue` automatically provides default values for these flags. To change the default values, use Vite's [`define` config option](https://vite.dev/config/shared-options.html#define):
+`@vitejs/plugin-vue` આ ફ્લેગ્સ માટે આપમેળે ડિફોલ્ટ વેલ્યુ પ્રદાન કરે છે. ડિફોલ્ટ વેલ્યુ બદલવા માટે, Vite ના [`define` config ઓપ્શન](https://vite.dev/config/shared-options.html#define) નો ઉપયોગ કરો:
```js [vite.config.js]
import { defineConfig } from 'vite'
export default defineConfig({
define: {
- // enable hydration mismatch details in production build
+ // પ્રોડક્શન build માં hydration mismatch details સક્ષમ કરો
__VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'true'
}
})
@@ -53,7 +53,7 @@ export default defineConfig({
### vue-cli {#vue-cli}
-`@vue/cli-service` automatically provides default values for some of these flags. To configure /change the values:
+`@vue/cli-service` આમાંના કેટલાક ફ્લેગ્સ માટે આપમેળે ડિફોલ્ટ વેલ્યુ પ્રદાન કરે છે. વેલ્યુ કોન્ફિગર / બદલવા માટે:
```js [vue.config.js]
module.exports = {
@@ -72,7 +72,7 @@ module.exports = {
### webpack {#webpack}
-Flags should be defined using webpack's [DefinePlugin](https://webpack.js.org/plugins/define-plugin/):
+ફ્લેગ્સ webpack ના [DefinePlugin](https://webpack.js.org/plugins/define-plugin/) ઉપયોગ કરીને ડિફાઇન કરવા જોઈએ:
```js [webpack.config.js]
module.exports = {
@@ -89,7 +89,7 @@ module.exports = {
### Rollup {#rollup}
-Flags should be defined using [@rollup/plugin-replace](https://github.com/rollup/plugins/tree/master/packages/replace):
+ફ્લેગ્સ [@rollup/plugin-replace](https://github.com/rollup/plugins/tree/master/packages/replace) ઉપયોગ કરીને ડિફાઇન કરવા જોઈએ:
```js [rollup.config.js]
import replace from '@rollup/plugin-replace'
diff --git a/src/api/component-instance.md b/src/api/component-instance.md
index 9ea82779c6..c7a32cb18e 100644
--- a/src/api/component-instance.md
+++ b/src/api/component-instance.md
@@ -1,16 +1,16 @@
-# Component Instance {#component-instance}
+# ઘટક ઇન્સ્ટન્સ (Component Instance) {#component-instance}
:::info
-This page documents the built-in properties and methods exposed on the component public instance, i.e. `this`.
+આ page ઘટકના public instance, i.e. `this` પર exposed built-in properties અને methods document કરે છે.
-All properties listed on this page are readonly (except nested properties in `$data`).
+આ page પર listed તમામ properties readonly છે (`$data` માં nested properties સિવાય).
:::
## $data {#data}
-The object returned from the [`data`](./options-state#data) option, made reactive by the component. The component instance proxies access to the properties on its data object.
+[`data`](./options-state#data) ઓપ્શન માંથી return થયેલો object, ઘટક દ્વારા reactive બનાવાયેલ. ઘટક instance તેના data object પરની properties access proxy કરે.
-- **Type**
+- **ટાઇપ (Type)**
```ts
interface ComponentPublicInstance {
@@ -20,9 +20,9 @@ The object returned from the [`data`](./options-state#data) option, made reactiv
## $props {#props}
-An object representing the component's current, resolved props.
+ઘટકના current, resolved props represent કરતો object.
-- **Type**
+- **ટાઇપ (Type)**
```ts
interface ComponentPublicInstance {
@@ -30,15 +30,15 @@ An object representing the component's current, resolved props.
}
```
-- **Details**
+- **વિગત (Details)**
- Only props declared via the [`props`](./options-state#props) option will be included. The component instance proxies access to the properties on its props object.
+ ફક્ત [`props`](./options-state#props) ઓપ્શન દ્વારા declared props સામેલ થશે. ઘટક instance તેના props object પરની properties access proxy કરે.
## $el {#el}
-The root DOM node that the component instance is managing.
+ઘટક instance manage કરી રહ્યો છે તે root DOM node.
-- **Type**
+- **ટાઇપ (Type)**
```ts
interface ComponentPublicInstance {
@@ -46,23 +46,23 @@ The root DOM node that the component instance is managing.
}
```
-- **Details**
+- **વિગત (Details)**
- `$el` will be `undefined` until the component is [mounted](./options-lifecycle#mounted).
+ ઘટક [mounted](./options-lifecycle#mounted) થાય ત્યાં સુધી `$el` `undefined` હશે.
- - For components with a single root element, `$el` will point to that element.
- - For components with text root, `$el` will point to the text node.
- - For components with multiple root nodes, `$el` will be the placeholder DOM node that Vue uses to keep track of the component's position in the DOM (a text node, or a comment node in SSR hydration mode).
+ - Single root element ધરાવતા ઘટકો માટે, `$el` તે element ને point કરશે.
+ - Text root ધરાવતા ઘટકો માટે, `$el` text node ને point કરશે.
+ - Multiple root nodes ધરાવતા ઘટકો માટે, `$el` placeholder DOM node હશે જેનો Vue ઉપયોગ DOM માં ઘટકની position track કરવા કરે (text node, અથવા SSR hydration mode માં comment node).
:::tip
- For consistency, it is recommended to use [template refs](/guide/essentials/template-refs) for direct access to elements instead of relying on `$el`.
+ Consistency માટે, `$el` પર depend કરવાના બદલે elements ની direct access માટે [template refs](/guide/essentials/template-refs) ઉપયોગ કરવાની ભલામણ છે.
:::
## $options {#options}
-The resolved component options used for instantiating the current component instance.
+વર્તમાન ઘટક instance instantiate કરવા ઉપયોગ થયેલા resolved component options.
-- **Type**
+- **ટાઇપ (Type)**
```ts
interface ComponentPublicInstance {
@@ -70,15 +70,15 @@ The resolved component options used for instantiating the current component inst
}
```
-- **Details**
+- **વિગત (Details)**
- The `$options` object exposes the resolved options for the current component and is the merge result of these possible sources:
+ `$options` object વર્તમાન ઘટક માટે resolved options expose કરે અને આ possible sources નું merge result છે:
- Global mixins
- Component `extends` base
- Component mixins
- It is typically used to support custom component options:
+ સામાન્ય રીતે custom component options support કરવા ઉપયોગ થાય:
```js
const app = createApp({
@@ -89,13 +89,13 @@ The resolved component options used for instantiating the current component inst
})
```
-- **See also** [`app.config.optionMergeStrategies`](/api/application#app-config-optionmergestrategies)
+- **આ પણ જુઓ** [`app.config.optionMergeStrategies`](/api/application#app-config-optionmergestrategies)
## $parent {#parent}
-The parent instance, if the current instance has one. It will be `null` for the root instance itself.
+Parent instance, જો current instance ધરાવે. Root instance માટે `null` હશે.
-- **Type**
+- **ટાઇપ (Type)**
```ts
interface ComponentPublicInstance {
@@ -105,9 +105,9 @@ The parent instance, if the current instance has one. It will be `null` for the
## $root {#root}
-The root component instance of the current component tree. If the current instance has no parents this value will be itself.
+Current component tree નું root component instance. જો current instance ના parents ન હોય તો value itself હશે.
-- **Type**
+- **ટાઇપ (Type)**
```ts
interface ComponentPublicInstance {
@@ -117,9 +117,9 @@ The root component instance of the current component tree. If the current instan
## $slots {#slots}
-An object representing the [slots](/guide/components/slots) passed by the parent component.
+Parent ઘટક દ્વારા pass કરેલ [slots](/guide/components/slots) represent કરતો object.
-- **Type**
+- **ટાઇપ (Type)**
```ts
interface ComponentPublicInstance {
@@ -129,21 +129,21 @@ An object representing the [slots](/guide/components/slots) passed by the parent
type Slot = (...args: any[]) => VNode[]
```
-- **Details**
+- **વિગત (Details)**
- Typically used when manually authoring [render functions](/guide/extras/render-function), but can also be used to detect whether a slot is present.
+ સામાન્ય રીતે manually [render functions](/guide/extras/render-function) author કરતી વખતે ઉપયોગ થાય, પરંતુ slot present છે કે નહીં detect કરવા પણ ઉપયોગ કરી શકાય.
- Each slot is exposed on `this.$slots` as a function that returns an array of vnodes under the key corresponding to that slot's name. The default slot is exposed as `this.$slots.default`.
+ દરેક slot `this.$slots` પર function તરીકે expose થાય જે slot ના name ને corresponding key હેઠળ vnodes ની array return કરે. Default slot `this.$slots.default` તરીકે expose થાય.
- If a slot is a [scoped slot](/guide/components/slots#scoped-slots), arguments passed to the slot functions are available to the slot as its slot props.
+ જો slot [scoped slot](/guide/components/slots#scoped-slots) હોય, slot functions ને pass થયેલા arguments slot ને slot props તરીકે ઉપલબ્ધ છે.
-- **See also** [Render Functions - Rendering Slots](/guide/extras/render-function#rendering-slots)
+- **આ પણ જુઓ** [રેન્ડર ફંક્શન્સ - Slots Render કરવા](/guide/extras/render-function#rendering-slots)
## $refs {#refs}
-An object of DOM elements and component instances, registered via [template refs](/guide/essentials/template-refs).
+[Template refs](/guide/essentials/template-refs) દ્વારા registered DOM elements અને component instances નો object.
-- **Type**
+- **ટાઇપ (Type)**
```ts
interface ComponentPublicInstance {
@@ -151,16 +151,16 @@ An object of DOM elements and component instances, registered via [template refs
}
```
-- **See also**
+- **આ પણ જુઓ**
- [Template refs](/guide/essentials/template-refs)
- [Special Attributes - ref](./built-in-special-attributes.md#ref)
## $attrs {#attrs}
-An object that contains the component's fallthrough attributes.
+ઘટકના fallthrough attributes ધરાવતો object.
-- **Type**
+- **ટાઇપ (Type)**
```ts
interface ComponentPublicInstance {
@@ -168,21 +168,21 @@ An object that contains the component's fallthrough attributes.
}
```
-- **Details**
+- **વિગત (Details)**
- [Fallthrough Attributes](/guide/components/attrs) are attributes and event handlers passed by the parent component, but not declared as a prop or an emitted event by the child.
+ [Fallthrough Attributes](/guide/components/attrs) parent ઘટક દ્વારા pass થયેલા attributes અને event handlers છે, પરંતુ child દ્વારા prop અથવા emitted event તરીકે declared નથી.
- By default, everything in `$attrs` will be automatically inherited on the component's root element if there is only a single root element. This behavior is disabled if the component has multiple root nodes, and can be explicitly disabled with the [`inheritAttrs`](./options-misc#inheritattrs) option.
+ ડિફોલ્ટ રૂપે, `$attrs` માં બધું ઘટકના root element પર auto inherited થશે જો single root element હોય. Multiple root nodes ધરાવતા ઘટક માટે behavior disabled છે, અને [`inheritAttrs`](./options-misc#inheritattrs) ઓપ્શન સાથે explicitly disabled કરી શકાય.
-- **See also**
+- **આ પણ જુઓ**
- [Fallthrough Attributes](/guide/components/attrs)
## $watch() {#watch}
-Imperative API for creating watchers.
+Watchers create કરવા માટે Imperative API.
-- **Type**
+- **ટાઇપ (Type)**
```ts
interface ComponentPublicInstance {
@@ -210,45 +210,45 @@ Imperative API for creating watchers.
type StopHandle = () => void
```
-- **Details**
+- **વિગત (Details)**
- The first argument is the watch source. It can be a component property name string, a simple dot-delimited path string, or a [getter function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get#description).
+ પ્રથમ argument watch source છે. તે component property name string, simple dot-delimited path string, અથવા [getter function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get#description) હોઈ શકે.
- The second argument is the callback function. The callback receives the new value and the old value of the watched source.
+ બીજો argument callback function છે. Callback watched source ની new value અને old value receive કરે.
- - **`immediate`**: trigger the callback immediately on watcher creation. Old value will be `undefined` on the first call.
- - **`deep`**: force deep traversal of the source if it is an object, so that the callback fires on deep mutations. See [Deep Watchers](/guide/essentials/watchers#deep-watchers).
- - **`flush`**: adjust the callback's flush timing. See [Callback Flush Timing](/guide/essentials/watchers#callback-flush-timing) and [`watchEffect()`](/api/reactivity-core#watcheffect).
- - **`onTrack / onTrigger`**: debug the watcher's dependencies. See [Watcher Debugging](/guide/extras/reactivity-in-depth#watcher-debugging).
+ - **`immediate`**: watcher creation પર callback immediately trigger કરો. પ્રથમ call પર old value `undefined` હશે.
+ - **`deep`**: source object હોય તો deep traversal force કરો, જેથી deep mutations પર callback fire થાય. [Deep Watchers](/guide/essentials/watchers#deep-watchers) જુઓ.
+ - **`flush`**: callback ની flush timing adjust કરો. [Callback Flush Timing](/guide/essentials/watchers#callback-flush-timing) અને [`watchEffect()`](/api/reactivity-core#watcheffect) જુઓ.
+ - **`onTrack / onTrigger`**: watcher ની dependencies debug કરો. [Watcher Debugging](/guide/extras/reactivity-in-depth#watcher-debugging) જુઓ.
-- **Example**
+- **ઉદાહરણ (Example)**
- Watch a property name:
+ Property name watch કરવું:
```js
this.$watch('a', (newVal, oldVal) => {})
```
- Watch a dot-delimited path:
+ Dot-delimited path watch કરવો:
```js
this.$watch('a.b', (newVal, oldVal) => {})
```
- Using getter for more complex expressions:
+ વધુ complex expressions માટે getter ઉપયોગ કરવું:
```js
this.$watch(
- // every time the expression `this.a + this.b` yields
- // a different result, the handler will be called.
- // It's as if we were watching a computed property
- // without defining the computed property itself.
+ // દર વખતે expression `this.a + this.b` different
+ // result yield કરે, handler call થશે.
+ // computed property define કર્યા વિના
+ // computed property watch કરવા જેવું.
() => this.a + this.b,
(newVal, oldVal) => {}
)
```
- Stopping the watcher:
+ Watcher stop કરવું:
```js
const unwatch = this.$watch('a', cb)
@@ -257,15 +257,15 @@ Imperative API for creating watchers.
unwatch()
```
-- **See also**
+- **આ પણ જુઓ**
- [Options - `watch`](/api/options-state#watch)
- - [Guide - Watchers](/guide/essentials/watchers)
+ - [ગાઇડ - Watchers](/guide/essentials/watchers)
## $emit() {#emit}
-Trigger a custom event on the current instance. Any additional arguments will be passed into the listener's callback function.
+Current instance પર custom event trigger કરો. કોઈપણ additional arguments listener ના callback function ને pass થશે.
-- **Type**
+- **ટાઇપ (Type)**
```ts
interface ComponentPublicInstance {
@@ -273,29 +273,29 @@ Trigger a custom event on the current instance. Any additional arguments will be
}
```
-- **Example**
+- **ઉદાહરણ (Example)**
```js
export default {
created() {
- // only event
+ // ફક્ત event
this.$emit('foo')
- // with additional arguments
+ // additional arguments સાથે
this.$emit('bar', 1, 2, 3)
}
}
```
-- **See also**
+- **આ પણ જુઓ**
- - [Component - Events](/guide/components/events)
- - [`emits` option](./options-state#emits)
+ - [ઘટક - Events](/guide/components/events)
+ - [`emits` ઓપ્શન](./options-state#emits)
## $forceUpdate() {#forceupdate}
-Force the component instance to re-render.
+ઘટક instance ને re-render કરવા force કરો.
-- **Type**
+- **ટાઇપ (Type)**
```ts
interface ComponentPublicInstance {
@@ -303,15 +303,15 @@ Force the component instance to re-render.
}
```
-- **Details**
+- **વિગત (Details)**
- This should be rarely needed given Vue's fully automatic reactivity system. The only cases where you may need it is when you have explicitly created non-reactive component state using advanced reactivity APIs.
+ Vue ની fully automatic reactivity system જોતાં આ ભાગ્યે જ જરૂરી હોવું જોઈએ. ફક્ત ત્યારે જ જરૂર પડી શકે જ્યારે advanced reactivity APIs ઉપયોગ કરીને explicitly non-reactive component state create કર્યો હોય.
## $nextTick() {#nexttick}
-Instance-bound version of the global [`nextTick()`](./general#nexttick).
+Global [`nextTick()`](./general#nexttick) નું instance-bound version.
-- **Type**
+- **ટાઇપ (Type)**
```ts
interface ComponentPublicInstance {
@@ -319,8 +319,8 @@ Instance-bound version of the global [`nextTick()`](./general#nexttick).
}
```
-- **Details**
+- **વિગત (Details)**
- The only difference from the global version of `nextTick()` is that the callback passed to `this.$nextTick()` will have its `this` context bound to the current component instance.
+ `nextTick()` ના global version થી ફક્ત એ જ ફરક છે કે `this.$nextTick()` ને pass થયેલા callback નો `this` context current component instance સાથે bound હશે.
-- **See also** [`nextTick()`](./general#nexttick)
+- **આ પણ જુઓ** [`nextTick()`](./general#nexttick)
diff --git a/src/api/composition-api-dependency-injection.md b/src/api/composition-api-dependency-injection.md
index 460459d302..d90aefed49 100644
--- a/src/api/composition-api-dependency-injection.md
+++ b/src/api/composition-api-dependency-injection.md
@@ -1,60 +1,60 @@
-# Composition API: Dependency Injection {#composition-api-dependency-injection}
+# Composition API: ડિપેન્ડન્સી ઇન્જેક્શન (Dependency Injection) {#composition-api-dependency-injection}
## provide() {#provide}
-Provides a value that can be injected by descendant components.
+એક વેલ્યુ પ્રદાન કરે છે જે વંશજ (descendant) ઘટકો દ્વારા inject કરી શકાય.
-- **Type**
+- **ટાઇપ (Type)**
```ts
function provide(key: InjectionKey | string, value: T): void
```
-- **Details**
+- **વિગત (Details)**
- `provide()` takes two arguments: the key, which can be a string or a symbol, and the value to be injected.
+ `provide()` બે આર્ગ્યુમેન્ટ્સ લે છે: key, જે string અથવા symbol હોઈ શકે, અને inject કરવાની વેલ્યુ.
- When using TypeScript, the key can be a symbol casted as `InjectionKey` - a Vue provided utility type that extends `Symbol`, which can be used to sync the value type between `provide()` and `inject()`.
+ TypeScript ઉપયોગ કરતી વખતે, key `InjectionKey` તરીકે cast થયેલું symbol હોઈ શકે - Vue દ્વારા પ્રદાન કરાયેલ utility type જે `Symbol` ને extend કરે છે, જેનો ઉપયોગ `provide()` અને `inject()` વચ્ચે value type sync કરવા માટે થઈ શકે.
- Similar to lifecycle hook registration APIs, `provide()` must be called synchronously during a component's `setup()` phase.
+ lifecycle hook registration APIs ની જેમ, `provide()` ને ઘટકના `setup()` phase દરમિયાન synchronously બોલાવવું આવશ્યક છે.
-- **Example**
+- **ઉદાહરણ (Example)**
```vue
```
-- **See also**
- - [Guide - Provide / Inject](/guide/components/provide-inject)
- - [Guide - Typing Provide / Inject](/guide/typescript/composition-api#typing-provide-inject)
+- **આ પણ જુઓ**
+ - [ગાઇડ - Provide / Inject](/guide/components/provide-inject)
+ - [ગાઇડ - Provide / Inject ટાઇપ કરવું](/guide/typescript/composition-api#typing-provide-inject)
## inject() {#inject}
-Injects a value provided by an ancestor component or the application (via `app.provide()`).
+પૂર્વજ (ancestor) ઘટક અથવા એપ્લિકેશન (`app.provide()` દ્વારા) દ્વારા provide કરેલી વેલ્યુ inject કરે છે.
-- **Type**
+- **ટાઇપ (Type)**
```ts
- // without default value
+ // default value વિના
function inject(key: InjectionKey | string): T | undefined
- // with default value
+ // default value સાથે
function inject(key: InjectionKey | string, defaultValue: T): T
- // with factory
+ // factory સાથે
function inject(
key: InjectionKey | string,
defaultValue: () => T,
@@ -62,58 +62,58 @@ Injects a value provided by an ancestor component or the application (via `app.p
): T
```
-- **Details**
+- **વિગત (Details)**
- The first argument is the injection key. Vue will walk up the parent chain to locate a provided value with a matching key. If multiple components in the parent chain provide the same key, the one closest to the injecting component will "shadow" those higher up the chain and its value will be used. If no value with matching key was found, `inject()` returns `undefined` unless a default value is provided.
+ પ્રથમ આર્ગ્યુમેન્ટ injection key છે. Vue parent chain ઉપર ચાલશે અને matching key સાથે provide કરેલી value શોધશે. જો parent chain માં બહુવિધ ઘટકો સમાન key provide કરે, તો injecting ઘટકની સૌથી નજીકનો "shadow" (છાયો) ઊંચે ચેઇનમાં રહેલાઓને કરશે અને તેની value ઉપયોગ થશે. જો matching key સાથે કોઈ value ન મળે, તો `inject()` `undefined` રિટર્ન કરે છે સિવાય કે default value provide કરવામાં આવી હોય.
- The second argument is optional and is the default value to be used when no matching value was found.
+ બીજો આર્ગ્યુમેન્ટ વૈકલ્પિક છે અને default value છે જે matching value ન મળે ત્યારે ઉપયોગ થશે.
- The second argument can also be a factory function that returns values that are expensive to create. In this case, `true` must be passed as the third argument to indicate that the function should be used as a factory instead of the value itself.
+ બીજો આર્ગ્યુમેન્ટ factory function પણ હોઈ શકે જે બનાવવામાં ખર્ચાળ values રિટર્ન કરે. આ કિસ્સામાં, ત્રીજા આર્ગ્યુમેન્ટ તરીકે `true` પાસ કરવું આવશ્યક છે જે દર્શાવે કે function ને value ના બદલે factory તરીકે ઉપયોગ કરવો.
- Similar to lifecycle hook registration APIs, `inject()` must be called synchronously during a component's `setup()` phase.
+ lifecycle hook registration APIs ની જેમ, `inject()` ને ઘટકના `setup()` phase દરમિયાન synchronously બોલાવવું આવશ્યક છે.
- When using TypeScript, the key can be of type of `InjectionKey` - a Vue-provided utility type that extends `Symbol`, which can be used to sync the value type between `provide()` and `inject()`.
+ TypeScript ઉપયોગ કરતી વખતે, key `InjectionKey` type ની હોઈ શકે - Vue દ્વારા provide કરાયેલ utility type જે `Symbol` ને extend કરે છે, જેનો ઉપયોગ `provide()` અને `inject()` વચ્ચે value type sync કરવા માટે થઈ શકે.
-- **Example**
+- **ઉદાહરણ (Example)**
- Assuming a parent component has provided values as shown in the previous `provide()` example:
+ ધારો કે parent ઘટકે અગાઉના `provide()` ઉદાહરણમાં બતાવ્યા મુજબ values provide કરી છે:
```vue
```
-- **See also**
- - [Guide - Provide / Inject](/guide/components/provide-inject)
- - [Guide - Typing Provide / Inject](/guide/typescript/composition-api#typing-provide-inject)
+- **આ પણ જુઓ**
+ - [ગાઇડ - Provide / Inject](/guide/components/provide-inject)
+ - [ગાઇડ - Provide / Inject ટાઇપ કરવું](/guide/typescript/composition-api#typing-provide-inject)
## hasInjectionContext() {#has-injection-context}
-- Only supported in 3.3+
+- માત્ર 3.3+ માં સપોર્ટેડ
-Returns true if [inject()](#inject) can be used without warning about being called in the wrong place (e.g. outside of `setup()`). This method is designed to be used by libraries that want to use `inject()` internally without triggering a warning to the end user.
+જો [inject()](#inject) ને ખોટી જગ્યાએ (દા.ત. `setup()` ની બહાર) બોલાવવા વિશે warning વિના ઉપયોગ કરી શકાય તો true રિટર્ન કરે છે. આ method એવી libraries માટે ડિઝાઇન કરવામાં આવી છે જે end user ને warning ટ્રિગર કર્યા વિના આંતરિક રીતે `inject()` ઉપયોગ કરવા માંગે.
-- **Type**
+- **ટાઇપ (Type)**
```ts
function hasInjectionContext(): boolean
diff --git a/src/api/composition-api-helpers.md b/src/api/composition-api-helpers.md
index a2042c9cdc..7d2a2e617b 100644
--- a/src/api/composition-api-helpers.md
+++ b/src/api/composition-api-helpers.md
@@ -1,10 +1,10 @@
-# Composition API: Helpers {#composition-api-helpers}
+# Composition API: હેલ્પર્સ (Helpers) {#composition-api-helpers}
## useAttrs() {#useattrs}
-Returns the `attrs` object from the [Setup Context](/api/composition-api-setup#setup-context), which includes the [fallthrough attributes](/guide/components/attrs#fallthrough-attributes) of the current component. This is intended to be used in `
@@ -91,27 +91,27 @@ Registers a callback to be called after the component has updated its DOM tree d
## onUnmounted() {#onunmounted}
-Registers a callback to be called after the component has been unmounted.
+ઘટક unmounted થયા પછી call થવા માટે callback register કરે છે.
-- **Type**
+- **ટાઇપ (Type)**
```ts
function onUnmounted(callback: () => void, target?: ComponentInternalInstance | null): void
```
-- **Details**
+- **વિગત (Details)**
- A component is considered unmounted after:
+ ઘટક unmounted માનવામાં આવે જ્યારે:
- - All of its child components have been unmounted.
+ - તેના તમામ child ઘટકો unmounted થઈ ગયા હોય.
- - All of its associated reactive effects (render effect and computed / watchers created during `setup()`) have been stopped.
+ - તેના તમામ associated reactive effects (render effect અને `setup()` દરમિયાન created computed / watchers) stop થઈ ગયા હોય.
- Use this hook to clean up manually created side effects such as timers, DOM event listeners or server connections.
+ Manually created side effects જેમ timers, DOM event listeners અથવા server connections clean up કરવા માટે આ hook ઉપયોગ કરો.
- **This hook is not called during server-side rendering.**
+ **આ hook server-side rendering દરમિયાન call થતો નથી.**
-- **Example**
+- **ઉદાહરણ (Example)**
```vue
```
-- **See also** [Server-Side Rendering](/guide/scaling-up/ssr)
+- **આ પણ જુઓ** [Server-Side Rendering](/guide/scaling-up/ssr)
diff --git a/src/api/composition-api-setup.md b/src/api/composition-api-setup.md
index 9a73a49c6f..ab0303a46e 100644
--- a/src/api/composition-api-setup.md
+++ b/src/api/composition-api-setup.md
@@ -1,17 +1,17 @@
# Composition API: setup() {#composition-api-setup}
-## Basic Usage {#basic-usage}
+## મૂળભૂત ઉપયોગ (Basic Usage) {#basic-usage}
-The `setup()` hook serves as the entry point for Composition API usage in components in the following cases:
+`setup()` હૂક નીચેના કિસ્સાઓમાં ઘટકોમાં Composition API ઉપયોગ માટેના entry point તરીકે કામ કરે છે:
-1. Using Composition API without a build step;
-2. Integrating with Composition-API-based code in an Options API component.
+૧. બિલ્ડ સ્ટેપ વિના Composition API ઉપયોગ કરવો;
+૨. Options API ઘટકમાં Composition-API-based code ને integrate કરવો.
-:::info Note
-If you are using Composition API with Single-File Components, [`
@@ -74,11 +74,11 @@ A utility for waiting for the next DOM update flush.
async increment() {
this.count++
- // DOM not yet updated
+ // DOM હજુ અપડેટ થયું નથી
console.log(document.getElementById('counter').textContent) // 0
await nextTick()
- // DOM is now updated
+ // DOM હવે અપડેટ થયું છે
console.log(document.getElementById('counter').textContent) // 1
}
}
@@ -92,36 +92,36 @@ A utility for waiting for the next DOM update flush.
-- **See also** [`this.$nextTick()`](/api/component-instance#nexttick)
+- **આ પણ જુઓ** [`this.$nextTick()`](/api/component-instance#nexttick)
## defineComponent() {#definecomponent}
-A type helper for defining a Vue component with type inference.
+ટાઇપ ઇન્ફરન્સ (type inference) સાથે Vue ઘટકને ડિફાઇન કરવા માટેનો ટાઇપ હેલ્પર.
-- **Type**
+- **ટાઇપ (Type)**
```ts
- // options syntax
+ // ઓપ્શન્સ સિન્ટેક્સ
function defineComponent(
component: ComponentOptions
): ComponentConstructor
- // function syntax (requires 3.3+)
+ // ફંક્શન સિન્ટેક્સ (3.3+ જરૂરી)
function defineComponent(
setup: ComponentOptions['setup'],
extraOptions?: ComponentOptions
): () => any
```
- > Type is simplified for readability.
+ > વાંચવાની સરળતા માટે ટાઇપ સરળ કરવામાં આવ્યો છે.
-- **Details**
+- **વિગત (Details)**
- The first argument expects a component options object. The return value will be the same options object, since the function is essentially a runtime no-op for type inference purposes only.
+ પ્રથમ આર્ગ્યુમેન્ટ ઘટક ઓપ્શન્સ ઓબ્જેક્ટની અપેક્ષા રાખે છે. રિટર્ન વેલ્યુ એ જ ઓપ્શન્સ ઓબ્જેક્ટ હશે, કારણ કે ફંક્શન ફક્ત ટાઇપ ઇન્ફરન્સ માટે રનટાઇમ no-op છે.
- Note that the return type is a bit special: it will be a constructor type whose instance type is the inferred component instance type based on the options. This is used for type inference when the returned type is used as a tag in TSX.
+ નોંધ કરો કે રિટર્ન ટાઇપ થોડો ખાસ છે: તે એક constructor ટાઇપ હશે જેનો ઇન્સ્ટન્સ ટાઇપ ઓપ્શન્સના આધારે ઇન્ફર થયેલ ઘટક ઇન્સ્ટન્સ ટાઇપ છે. TSX માં રિટર્ન ટાઇપ ટેગ તરીકે ઉપયોગ થાય ત્યારે ટાઇપ ઇન્ફરન્સ માટે આનો ઉપયોગ થાય છે.
- You can extract the instance type of a component (equivalent to the type of `this` in its options) from the return type of `defineComponent()` like this:
+ તમે `defineComponent()` ના રિટર્ન ટાઇપમાંથી ઘટકનો ઇન્સ્ટન્સ ટાઇપ (તેના ઓપ્શન્સમાં `this` ના ટાઇપ સમકક્ષ) આ રીતે એક્સ્ટ્રેક્ટ કરી શકો છો:
```ts
const Foo = defineComponent(/* ... */)
@@ -129,28 +129,28 @@ A type helper for defining a Vue component with type inference.
type FooInstance = InstanceType
```
- ### Function Signature {#function-signature}
+ ### ફંક્શન સિગ્નેચર (Function Signature) {#function-signature}
- - Only supported in 3.3+
+ - માત્ર 3.3+ માં સપોર્ટેડ
- `defineComponent()` also has an alternative signature that is meant to be used with the Composition API and [render functions or JSX](/guide/extras/render-function.html).
+ `defineComponent()` નું એક વૈકલ્પિક સિગ્નેચર પણ છે જે Composition API અને [રેન્ડર ફંક્શન્સ અથવા JSX](/guide/extras/render-function.html) સાથે ઉપયોગ માટે છે.
- Instead of passing in an options object, a function is expected instead. This function works the same as the Composition API [`setup()`](/api/composition-api-setup.html#composition-api-setup) function: it receives the props and the setup context. The return value should be a render function - both `h()` and JSX are supported:
+ ઓપ્શન્સ ઓબ્જેક્ટ પાસ કરવાના બદલે, એક ફંક્શનની અપેક્ષા રાખવામાં આવે છે. આ ફંક્શન Composition API [`setup()`](/api/composition-api-setup.html#composition-api-setup) ફંક્શનની જેમ જ કાર્ય કરે છે: તે props અને setup context પ્રાપ્ત કરે છે. રિટર્ન વેલ્યુ રેન્ડર ફંક્શન હોવું જોઈએ - `h()` અને JSX બંને સપોર્ટેડ છે:
```js
import { ref, h } from 'vue'
const Comp = defineComponent(
(props) => {
- // use Composition API here like in
```
- When `toRef` is used with component props, the usual restrictions around mutating the props still apply. Attempting to assign a new value to the ref is equivalent to trying to modify the prop directly and is not allowed. In that scenario you may want to consider using [`computed`](./reactivity-core#computed) with `get` and `set` instead. See the guide to [using `v-model` with components](/guide/components/v-model) for more information.
+ જ્યારે `toRef` component props સાથે ઉપયોગ થાય, ત્યારે props ને mutate કરવા આસપાસના સામાન્ય restrictions હજુ apply થાય. Ref ને નવી value assign કરવાનો પ્રયાસ prop ને directly modify કરવાના સમકક્ષ છે અને allowed નથી. તે scenario માં `get` અને `set` સાથે [`computed`](./reactivity-core#computed) ઉપયોગ કરવાનું વિચારો. વધુ માહિતી માટે [components સાથે `v-model` ઉપયોગ કરવા](/guide/components/v-model) ગાઇડ જુઓ.
- When using the object property signature, `toRef()` will return a usable ref even if the source property doesn't currently exist. This makes it possible to work with optional properties, which wouldn't be picked up by [`toRefs`](#torefs).
+ Object property signature ઉપયોગ કરતી વખતે, `toRef()` ઉપયોગી ref return કરશે ભલે source property હાલમાં exist ન કરતી હોય. આ optional properties સાથે કામ કરવાનું શક્ય બનાવે છે, જે [`toRefs`](#torefs) દ્વારા pick up ન થાય.
## toValue() {#tovalue}
-- Only supported in 3.3+
+- માત્ર 3.3+ માં સપોર્ટેડ
-Normalizes values / refs / getters to values. This is similar to [unref()](#unref), except that it also normalizes getters. If the argument is a getter, it will be invoked and its return value will be returned.
+Values / refs / getters ને values માં normalize કરે છે. [unref()](#unref) જેવું જ છે, સિવાય કે તે getters ને પણ normalize કરે. જો argument getter હોય, તો તેને invoke કરવામાં આવશે અને તેની return value return થશે.
-This can be used in [Composables](/guide/reusability/composables.html) to normalize an argument that can be either a value, a ref, or a getter.
+[Composables](/guide/reusability/composables.html) માં argument ને normalize કરવા ઉપયોગ કરી શકાય જે value, ref, અથવા getter હોઈ શકે.
-- **Type**
+- **ટાઇપ (Type)**
```ts
function toValue(source: T | Ref | (() => T)): T
```
-- **Example**
+- **ઉદાહરણ (Example)**
```js
toValue(1) // --> 1
@@ -154,18 +154,18 @@ This can be used in [Composables](/guide/reusability/composables.html) to normal
toValue(() => 1) // --> 1
```
- Normalizing arguments in composables:
+ Composables માં arguments normalize કરવા:
```ts
import type { MaybeRefOrGetter } from 'vue'
function useFeature(id: MaybeRefOrGetter) {
watch(() => toValue(id), id => {
- // react to id changes
+ // id changes ને react કરો
})
}
- // this composable supports any of the following:
+ // આ composable નીચેનામાંથી કોઈપણ support કરે:
useFeature(1)
useFeature(ref(1))
useFeature(() => 1)
@@ -173,9 +173,9 @@ This can be used in [Composables](/guide/reusability/composables.html) to normal
## toRefs() {#torefs}
-Converts a reactive object to a plain object where each property of the resulting object is a ref pointing to the corresponding property of the original object. Each individual ref is created using [`toRef()`](#toref).
+Reactive object ને plain object માં convert કરે છે જ્યાં resulting object ની દરેક property original object ની corresponding property ને point કરતું ref છે. દરેક individual ref [`toRef()`](#toref) ઉપયોગ કરીને created છે.
-- **Type**
+- **ટાઇપ (Type)**
```ts
function toRefs(
@@ -187,7 +187,7 @@ Converts a reactive object to a plain object where each property of the resultin
type ToRef = T extends Ref ? T : Ref
```
-- **Example**
+- **ઉદાહરણ (Example)**
```js
const state = reactive({
@@ -197,13 +197,13 @@ Converts a reactive object to a plain object where each property of the resultin
const stateAsRefs = toRefs(state)
/*
- Type of stateAsRefs: {
+ stateAsRefs નો Type: {
foo: Ref,
bar: Ref
}
*/
- // The ref and the original property is "linked"
+ // ref અને original property "linked" છે
state.foo++
console.log(stateAsRefs.foo.value) // 2
@@ -211,7 +211,7 @@ Converts a reactive object to a plain object where each property of the resultin
console.log(state.foo) // 3
```
- `toRefs` is useful when returning a reactive object from a composable function so that the consuming component can destructure/spread the returned object without losing reactivity:
+ `toRefs` composable function માંથી reactive object return કરતી વખતે ઉપયોગી છે જેથી consuming ઘટક reactivity ગુમાવ્યા વિના returned object ને destructure/spread કરી શકે:
```js
function useFeatureX() {
@@ -220,23 +220,23 @@ Converts a reactive object to a plain object where each property of the resultin
bar: 2
})
- // ...logic operating on state
+ // ...state પર operate કરતું logic
- // convert to refs when returning
+ // return કરતી વખતે refs માં convert કરો
return toRefs(state)
}
- // can destructure without losing reactivity
+ // reactivity ગુમાવ્યા વિના destructure કરી શકાય
const { foo, bar } = useFeatureX()
```
- `toRefs` will only generate refs for properties that are enumerable on the source object at call time. To create a ref for a property that may not exist yet, use [`toRef`](#toref) instead.
+ `toRefs` ફક્ત source object પર call time માં enumerable હોય તેવી properties માટે refs generate કરશે. હજુ exist ન કરતી property માટે ref બનાવવા, [`toRef`](#toref) ઉપયોગ કરો.
## isProxy() {#isproxy}
-Checks if an object is a proxy created by [`reactive()`](./reactivity-core#reactive), [`readonly()`](./reactivity-core#readonly), [`shallowReactive()`](./reactivity-advanced#shallowreactive) or [`shallowReadonly()`](./reactivity-advanced#shallowreadonly).
+ચકાસે છે કે object [`reactive()`](./reactivity-core#reactive), [`readonly()`](./reactivity-core#readonly), [`shallowReactive()`](./reactivity-advanced#shallowreactive) અથવા [`shallowReadonly()`](./reactivity-advanced#shallowreadonly) દ્વારા created proxy છે કે નહીં.
-- **Type**
+- **ટાઇપ (Type)**
```ts
function isProxy(value: any): boolean
@@ -244,9 +244,9 @@ Checks if an object is a proxy created by [`reactive()`](./reactivity-core#react
## isReactive() {#isreactive}
-Checks if an object is a proxy created by [`reactive()`](./reactivity-core#reactive) or [`shallowReactive()`](./reactivity-advanced#shallowreactive).
+ચકાસે છે કે object [`reactive()`](./reactivity-core#reactive) અથવા [`shallowReactive()`](./reactivity-advanced#shallowreactive) દ્વારા created proxy છે કે નહીં.
-- **Type**
+- **ટાઇપ (Type)**
```ts
function isReactive(value: unknown): boolean
@@ -254,11 +254,11 @@ Checks if an object is a proxy created by [`reactive()`](./reactivity-core#react
## isReadonly() {#isreadonly}
-Checks whether the passed value is a readonly object. The properties of a readonly object can change, but they can't be assigned directly via the passed object.
+ચકાસે છે કે passed value readonly object છે કે નહીં. Readonly object ની properties બદલી શકાય, પરંતુ passed object દ્વારા directly assign ન કરી શકાય.
-The proxies created by [`readonly()`](./reactivity-core#readonly) and [`shallowReadonly()`](./reactivity-advanced#shallowreadonly) are both considered readonly, as is a [`computed()`](./reactivity-core#computed) ref without a `set` function.
+[`readonly()`](./reactivity-core#readonly) અને [`shallowReadonly()`](./reactivity-advanced#shallowreadonly) દ્વારા created proxies બંને readonly માનવામાં આવે, તેમ જ `set` function વિનાનો [`computed()`](./reactivity-core#computed) ref.
-- **Type**
+- **ટાઇપ (Type)**
```ts
function isReadonly(value: unknown): boolean
diff --git a/src/api/render-function.md b/src/api/render-function.md
index b79558fe55..c1537963c2 100644
--- a/src/api/render-function.md
+++ b/src/api/render-function.md
@@ -1,10 +1,10 @@
-# Render Function APIs {#render-function-apis}
+# રેન્ડર ફંક્શન APIs (Render Function APIs) {#render-function-apis}
## h() {#h}
-Creates virtual DOM nodes (vnodes).
+Virtual DOM nodes (vnodes) create કરે છે.
-- **Type**
+- **ટાઇપ (Type)**
```ts
// full signature
@@ -14,7 +14,7 @@ Creates virtual DOM nodes (vnodes).
children?: Children | Slot | Slots
): VNode
- // omitting props
+ // props omit કરવા
function h(type: string | Component, children?: Children | Slot): VNode
type Children = string | number | boolean | VNode | null | Children[]
@@ -24,68 +24,68 @@ Creates virtual DOM nodes (vnodes).
type Slots = { [name: string]: Slot }
```
- > Types are simplified for readability.
+ > વાંચવાની સરળતા માટે Types simplified છે.
-- **Details**
+- **વિગત (Details)**
- The first argument can either be a string (for native elements) or a Vue component definition. The second argument is the props to be passed, and the third argument is the children.
+ પ્રથમ argument ક્યાં તો string (native elements માટે) અથવા Vue component definition હોઈ શકે. બીજો argument pass કરવાના props છે, અને ત્રીજો argument children છે.
- When creating a component vnode, the children must be passed as slot functions. A single slot function can be passed if the component expects only the default slot. Otherwise, the slots must be passed as an object of slot functions.
+ Component vnode create કરતી વખતે, children slot functions તરીકે pass થવા જોઈએ. જો ઘટક ફક્ત default slot ની expectation કરે તો single slot function pass કરી શકાય. નહીંતર, slots slot functions ના object તરીકે pass થવા જોઈએ.
- For convenience, the props argument can be omitted when the children is not a slots object.
+ સુવિધા માટે, children slots object ન હોય ત્યારે props argument omit કરી શકાય.
-- **Example**
+- **ઉદાહરણ (Example)**
- Creating native elements:
+ Native elements create કરવા:
```js
import { h } from 'vue'
- // all arguments except the type are optional
+ // type સિવાય તમામ arguments optional છે
h('div')
h('div', { id: 'foo' })
- // both attributes and properties can be used in props
- // Vue automatically picks the right way to assign it
+ // props માં attributes અને properties બંને ઉપયોગ કરી શકાય
+ // Vue આપમેળે assign કરવાની યોગ્ય રીત pick કરે
h('div', { class: 'bar', innerHTML: 'hello' })
- // class and style have the same object / array
- // value support like in templates
+ // class અને style templates ની જેમ
+ // object / array value support ધરાવે
h('div', { class: [foo, { bar }], style: { color: 'red' } })
- // event listeners should be passed as onXxx
+ // event listeners onXxx તરીકે pass થવા જોઈએ
h('div', { onClick: () => {} })
- // children can be a string
+ // children string હોઈ શકે
h('div', { id: 'foo' }, 'hello')
- // props can be omitted when there are no props
+ // props ન હોય ત્યારે omit કરી શકાય
h('div', 'hello')
h('div', [h('span', 'hello')])
- // children array can contain mixed vnodes and strings
+ // children array mixed vnodes અને strings ધરાવી શકે
h('div', ['hello', h('span', 'hello')])
```
- Creating components:
+ ઘટકો create કરવા:
```js
import Foo from './Foo.vue'
- // passing props
+ // props pass કરવા
h(Foo, {
- // equivalent of some-prop="hello"
+ // some-prop="hello" ના સમકક્ષ
someProp: 'hello',
- // equivalent of @update="() => {}"
+ // @update="() => {}" ના સમકક્ષ
onUpdate: () => {}
})
- // passing single default slot
+ // single default slot pass કરવો
h(Foo, () => 'default slot')
- // passing named slots
- // notice the `null` is required to avoid
- // slots object being treated as props
+ // named slots pass કરવા
+ // slots object ને props તરીકે treat થતા
+ // અટકાવવા `null` આવશ્યક છે
h(MyComponent, null, {
default: () => 'default slot',
foo: () => h('div', 'foo'),
@@ -93,29 +93,29 @@ Creates virtual DOM nodes (vnodes).
})
```
-- **See also** [Guide - Render Functions - Creating VNodes](/guide/extras/render-function#creating-vnodes)
+- **આ પણ જુઓ** [ગાઇડ - રેન્ડર ફંક્શન્સ - VNodes Create કરવા](/guide/extras/render-function#creating-vnodes)
## mergeProps() {#mergeprops}
-Merge multiple props objects with special handling for certain props.
+ચોક્કસ props માટે special handling સાથે multiple props objects merge કરે.
-- **Type**
+- **ટાઇપ (Type)**
```ts
function mergeProps(...args: object[]): object
```
-- **Details**
+- **વિગત (Details)**
- `mergeProps()` supports merging multiple props objects with special handling for the following props:
+ `mergeProps()` નીચેના props માટે special handling સાથે multiple props objects merge કરવાને support કરે:
- `class`
- `style`
- - `onXxx` event listeners - multiple listeners with the same name will be merged into an array.
+ - `onXxx` event listeners - same name ના multiple listeners array માં merge થશે.
- If you do not need the merge behavior and want simple overwrites, native object spread can be used instead.
+ જો merge behavior ની જરૂર ન હોય અને simple overwrites જોઈએ, તો native object spread ઉપયોગ કરી શકાય.
-- **Example**
+- **ઉદાહરણ (Example)**
```js
import { mergeProps } from 'vue'
@@ -141,23 +141,23 @@ Merge multiple props objects with special handling for certain props.
## cloneVNode() {#clonevnode}
-Clones a vnode.
+Vnode clone કરે.
-- **Type**
+- **ટાઇપ (Type)**
```ts
function cloneVNode(vnode: VNode, extraProps?: object): VNode
```
-- **Details**
+- **વિગત (Details)**
- Returns a cloned vnode, optionally with extra props to merge with the original.
+ Cloned vnode return કરે, original સાથે merge કરવા extra props સાથે optionally.
- Vnodes should be considered immutable once created, and you should not mutate the props of an existing vnode. Instead, clone it with different / extra props.
+ Vnodes create થયા પછી immutable માનવા જોઈએ, અને existed vnode ના props mutate ન કરવા. તેના બદલે, different / extra props સાથે clone કરો.
- Vnodes have special internal properties, so cloning them is not as simple as an object spread. `cloneVNode()` handles most of the internal logic.
+ Vnodes special internal properties ધરાવે, તેથી clone કરવું object spread જેટલું simple નથી. `cloneVNode()` મોટાભાગના internal logic handle કરે.
-- **Example**
+- **ઉદાહરણ (Example)**
```js
import { h, cloneVNode } from 'vue'
@@ -168,9 +168,9 @@ Clones a vnode.
## isVNode() {#isvnode}
-Checks if a value is a vnode.
+ચકાસે છે કે value vnode છે કે નહીં.
-- **Type**
+- **ટાઇપ (Type)**
```ts
function isVNode(value: unknown): boolean
@@ -178,23 +178,23 @@ Checks if a value is a vnode.
## resolveComponent() {#resolvecomponent}
-For manually resolving a registered component by name.
+Name દ્વારા registered ઘટકને manually resolve કરવા.
-- **Type**
+- **ટાઇપ (Type)**
```ts
function resolveComponent(name: string): Component | string
```
-- **Details**
+- **વિગત (Details)**
- **Note: you do not need this if you can import the component directly.**
+ **નોંધ: જો તમે ઘટકને directly import કરી શકો તો આની જરૂર નથી.**
- `resolveComponent()` must be called inside either `setup()` or the render function in order to resolve from the correct component context.
+ `resolveComponent()` યોગ્ય component context માંથી resolve કરવા `setup()` અથવા render function અંદર call થવો જોઈએ.
- If the component is not found, a runtime warning will be emitted, and the name string is returned.
+ જો ઘટક ન મળે, runtime warning emit થશે, અને name string return થશે.
-- **Example**
+- **ઉદાહરણ (Example)**
@@ -228,33 +228,33 @@ For manually resolving a registered component by name.
-- **See also** [Guide - Render Functions - Components](/guide/extras/render-function#components)
+- **આ પણ જુઓ** [ગાઇડ - રેન્ડર ફંક્શન્સ - ઘટકો](/guide/extras/render-function#components)
## resolveDirective() {#resolvedirective}
-For manually resolving a registered directive by name.
+Name દ્વારા registered directive ને manually resolve કરવા.
-- **Type**
+- **ટાઇપ (Type)**
```ts
function resolveDirective(name: string): Directive | undefined
```
-- **Details**
+- **વિગત (Details)**
- **Note: you do not need this if you can import the directive directly.**
+ **નોંધ: જો તમે directive ને directly import કરી શકો તો આની જરૂર નથી.**
- `resolveDirective()` must be called inside either `setup()` or the render function in order to resolve from the correct component context.
+ `resolveDirective()` યોગ્ય component context માંથી resolve કરવા `setup()` અથવા render function અંદર call થવો જોઈએ.
- If the directive is not found, a runtime warning will be emitted, and the function returns `undefined`.
+ જો directive ન મળે, runtime warning emit થશે, અને function `undefined` return કરે.
-- **See also** [Guide - Render Functions - Custom Directives](/guide/extras/render-function#custom-directives)
+- **આ પણ જુઓ** [ગાઇડ - રેન્ડર ફંક્શન્સ - Custom Directives](/guide/extras/render-function#custom-directives)
## withDirectives() {#withdirectives}
-For adding custom directives to vnodes.
+Vnodes ને custom directives add કરવા.
-- **Type**
+- **ટાઇપ (Type)**
```ts
function withDirectives(
@@ -271,16 +271,16 @@ For adding custom directives to vnodes.
>
```
-- **Details**
+- **વિગત (Details)**
- Wraps an existing vnode with custom directives. The second argument is an array of custom directives. Each custom directive is also represented as an array in the form of `[Directive, value, argument, modifiers]`. Tailing elements of the array can be omitted if not needed.
+ Existed vnode ને custom directives સાથે wrap કરે. બીજો argument custom directives ની array છે. દરેક custom directive `[Directive, value, argument, modifiers]` form માં array તરીકે represent થાય. જરૂર ન હોય તો array ના tailing elements omit કરી શકાય.
-- **Example**
+- **ઉદાહરણ (Example)**
```js
import { h, withDirectives } from 'vue'
- // a custom directive
+ // custom directive
const pin = {
mounted() {
/* ... */
@@ -296,29 +296,29 @@ For adding custom directives to vnodes.
])
```
-- **See also** [Guide - Render Functions - Custom Directives](/guide/extras/render-function#custom-directives)
+- **આ પણ જુઓ** [ગાઇડ - રેન્ડર ફંક્શન્સ - Custom Directives](/guide/extras/render-function#custom-directives)
## withModifiers() {#withmodifiers}
-For adding built-in [`v-on` modifiers](/guide/essentials/event-handling#event-modifiers) to an event handler function.
+Event handler function ને built-in [`v-on` modifiers](/guide/essentials/event-handling#event-modifiers) add કરવા.
-- **Type**
+- **ટાઇપ (Type)**
```ts
function withModifiers(fn: Function, modifiers: ModifierGuardsKeys[]): Function
```
-- **Example**
+- **ઉદાહરણ (Example)**
```js
import { h, withModifiers } from 'vue'
const vnode = h('button', {
- // equivalent of v-on:click.stop.prevent
+ // v-on:click.stop.prevent ના સમકક્ષ
onClick: withModifiers(() => {
// ...
}, ['stop', 'prevent'])
})
```
-- **See also** [Guide - Render Functions - Event Modifiers](/guide/extras/render-function#event-modifiers)
+- **આ પણ જુઓ** [ગાઇડ - રેન્ડર ફંક્શન્સ - Event Modifiers](/guide/extras/render-function#event-modifiers)
diff --git a/src/api/sfc-css-features.md b/src/api/sfc-css-features.md
index 61fb7f9645..def024e25e 100644
--- a/src/api/sfc-css-features.md
+++ b/src/api/sfc-css-features.md
@@ -2,7 +2,7 @@
## Scoped CSS {#scoped-css}
-When a `
```
-The above will be compiled into:
+ઉપરોક્ત compile થશે:
```css
.a[data-v-f3f3eg9] .b {
@@ -55,12 +55,12 @@ The above will be compiled into:
```
:::tip
-DOM content created with `v-html` are not affected by scoped styles, but you can still style them using deep selectors.
+`v-html` સાથે created DOM content scoped styles થી affected થતું નથી, પરંતુ તમે deep selectors ઉપયોગ કરીને તેમને style કરી શકો.
:::
### Slotted Selectors {#slotted-selectors}
-By default, scoped styles do not affect contents rendered by ``, as they are considered to be owned by the parent component passing them in. To explicitly target slot content, use the `:slotted` pseudo-class:
+ડિફોલ્ટ રૂપે, scoped styles `` દ્વારા rendered contents ને affect કરતા નથી, કારણ કે તેમને pass કરતા parent ઘટક દ્વારા owned માનવામાં આવે છે. Slot content ને explicitly target કરવા માટે, `:slotted` pseudo-class ઉપયોગ કરો:
```vue
```
-### Mixing Local and Global Styles {#mixing-local-and-global-styles}
+### Local અને Global Styles ભેળવવી (Mixing) {#mixing-local-and-global-styles}
-You can also include both scoped and non-scoped styles in the same component:
+સમાન ઘટકમાં scoped અને non-scoped styles બંને include કરી શકો:
```vue
```
-### Scoped Style Tips {#scoped-style-tips}
+### Scoped Style ટિપ્સ (Tips) {#scoped-style-tips}
-- **Scoped styles do not eliminate the need for classes**. Due to the way browsers render various CSS selectors, `p { color: red }` will be many times slower when scoped (i.e. when combined with an attribute selector). If you use classes or ids instead, such as in `.example { color: red }`, then you virtually eliminate that performance hit.
+- **Scoped styles classes ની જરૂરિયાત દૂર કરતા નથી**. Browsers વિવિધ CSS selectors render કરે તે રીતને કારણે, `p { color: red }` scoped હોય ત્યારે (i.e. attribute selector સાથે combine થાય ત્યારે) ઘણી ગણી ધીમી હશે. જો તમે classes અથવા ids ઉપયોગ કરો, જેમ `.example { color: red }` માં, તો તમે તે performance hit ને વર્ચ્યુઅલી દૂર કરો છો.
-- **Be careful with descendant selectors in recursive components!** For a CSS rule with the selector `.a .b`, if the element that matches `.a` contains a recursive child component, then all `.b` in that child component will be matched by the rule.
+- **Recursive ઘટકોમાં descendant selectors સાથે સાવધાન!** `.a .b` selector ધરાવતા CSS rule માટે, જો `.a` ને match કરતો element recursive child ઘટક ધરાવે, તો તે child ઘટકમાં તમામ `.b` rule દ્વારા match થશે.
## CSS Modules {#css-modules}
-A `
```
-The resulting classes are hashed to avoid collision, achieving the same effect of scoping the CSS to the current component only.
+Resulting classes collision ટાળવા માટે hashed છે, CSS ને ફક્ત વર્તમાન ઘટક સુધી scoping ના સમાન effect ને પ્રાપ્ત કરે છે.
-Refer to the [CSS Modules spec](https://github.com/css-modules/css-modules) for more details such as [global exceptions](https://github.com/css-modules/css-modules/blob/master/docs/composition.md#exceptions) and [composition](https://github.com/css-modules/css-modules/blob/master/docs/composition.md#composition).
+[global exceptions](https://github.com/css-modules/css-modules/blob/master/docs/composition.md#exceptions) અને [composition](https://github.com/css-modules/css-modules/blob/master/docs/composition.md#composition) જેવી વધુ વિગત માટે [CSS Modules spec](https://github.com/css-modules/css-modules) જુઓ.
### Custom Inject Name {#custom-inject-name}
-You can customize the property key of the injected classes object by giving the `module` attribute a value:
+`module` attribute ને value આપીને injected classes object ની property key ને customize કરી શકો:
```vue
@@ -138,22 +138,22 @@ You can customize the property key of the injected classes object by giving the
```
-### Usage with Composition API {#usage-with-composition-api}
+### Composition API સાથે ઉપયોગ (Usage with Composition API) {#usage-with-composition-api}
-The injected classes can be accessed in `setup()` and `
```
-The code inside is compiled as the content of the component's `setup()` function. This means that unlike normal `
@@ -144,7 +144,7 @@ const vMyDirective = {
```
-If you're importing a directive from elsewhere, it can be renamed to fit the required naming scheme:
+જો તમે બીજે ક્યાંકથી ડાયરેક્ટિવ ઇમ્પોર્ટ કરી રહ્યાં હોવ, તો તેને જરૂરી નામકરણ યોજનામાં ફિટ કરવા માટે નામ બદલી શકાય છે:
```vue
```
-- `defineProps` and `defineEmits` are **compiler macros** only usable inside `
```
-When a parent gets an instance of this component via template refs, the retrieved instance will be of the shape `{ a: number, b: number }` (refs are automatically unwrapped just like on normal instances).
+જ્યારે પેરેન્ટ ટેમ્પ્લેટ રેફ્સ દ્વારા આ ઘટકનો ઇન્સ્ટન્સ મેળવે છે, ત્યારે મેળવેલ ઇન્સ્ટન્સ `{ a: number, b: number }` આકારનું હશે (refs સામાન્ય ઇન્સ્ટન્સની જેમ આપમેળે અનવ્રેપ થઈ જાય છે).
## defineOptions() {#defineoptions}
-- Only supported in 3.3+
+- માત્ર 3.3+ માં સપોર્ટેડ
-This macro can be used to declare component options directly inside `
```
-- This is a macro. The options will be hoisted to module scope and cannot access local variables in `
```
-`useSlots` and `useAttrs` are actual runtime functions that return the equivalent of `setupContext.slots` and `setupContext.attrs`. They can be used in normal composition API functions as well.
+`useSlots` અને `useAttrs` વાસ્તવિક રનટાઇમ ફંક્શન્સ છે જે `setupContext.slots` અને `setupContext.attrs` ના સમકક્ષ રિટર્ન કરે છે. તેઓ સામાન્ય કમ્પોઝિશન API ફંક્શન્સમાં પણ વાપરી શકાય છે.
-## Usage alongside normal `
```
-Support for combining `
```
-In addition, the awaited expression will be automatically compiled in a format that preserves the current component instance context after the `await`.
+વધારામાં, અવેઈટેડ (awaited) એક્સપ્રેશન એવા ફોર્મેટમાં આપમેળે કમ્પાઇલ કરવામાં આવશે જે `await` પછી વર્તમાન ઘટક ઇન્સ્ટન્સ કોન્ટેક્સ્ટને સાચવે છે.
-:::warning Note
-`async setup()` must be used in combination with [`Suspense`](/guide/built-ins/suspense.html), which is currently still an experimental feature. We plan to finalize and document it in a future release - but if you are curious now, you can refer to its [tests](https://github.com/vuejs/core/blob/main/packages/runtime-core/__tests__/components/Suspense.spec.ts) to see how it works.
+:::warning નોંધ
+`async setup()` નો ઉપયોગ [`Suspense`](/guide/built-ins/suspense.html) સાથે સંયોજનમાં થવો જોઈએ, જે હાલમાં હજુ એક પ્રાયોગિક (experimental) સુવિધા છે. અમે ભવિષ્યના રિલીઝમાં તેને અંતિમ સ્વરૂપ આપવાની અને ડોક્યુમેન્ટ કરવાની યોજના બનાવીએ છીએ - પરંતુ જો તમે અત્યારે ઉત્સુક હોવ, તો તે કેવી રીતે કાર્ય કરે છે તે જોવા માટે તમે તેના [પરીક્ષણો (tests)](https://github.com/vuejs/core/blob/main/packages/runtime-core/__tests__/components/Suspense.spec.ts) નો સંદર્ભ લઈ શકો છો.
:::
-## Import Statements {#imports-statements}
+## ઇમ્પોર્ટ સ્ટેટમેન્ટ્સ (Import Statements) {#imports-statements}
-Import statements in vue follow [ECMAScript module specification](https://nodejs.org/api/esm.html).
-In addition, you can use aliases defined in your build tool configuration:
+vue માં ઇમ્પોર્ટ સ્ટેટમેન્ટ્સ [ECMAScript મોડ્યુલ સ્પષ્ટીકરણ (module specification)](https://nodejs.org/api/esm.html) ને અનુસરે છે.
+વધારેમાં, તમે તમારા બિલ્ડ ટૂલ કોન્ફિગરેશનમાં વ્યાખ્યાયિત ઉપનામો (aliases) નો ઉપયોગ કરી શકો છો:
```vue
```
-## Generics {#generics}
+## જેનરિક્સ (Generics) {#generics}
-Generic type parameters can be declared using the `generic` attribute on the `
```
-The value of `generic` works exactly the same as the parameter list between `<...>` in TypeScript. For example, you can use multiple parameters, `extends` constraints, default types, and reference imported types:
+`generic` ની કિંમત TypeScript માં `<...>` વચ્ચેની પેરામીટર લિસ્ટ જેવી જ કામ કરે છે. ઉદાહરણ તરીકે, તમે બહુવિધ પેરામીટર્સ, `extends` પ્રતિબંધો, ડિફોલ્ટ પ્રકારો અને ઇમ્પોર્ટ કરેલ પ્રકારોનો રેફરન્સ આપી શકો છો:
```vue
```
-`lang` can be applied to any block - for example we can use `
```
-Note that integration with various pre-processors may differ by toolchain. Check out the respective documentation for examples:
+નોંધ કરો કે વિવિધ pre-processors સાથેનું integration toolchain દ્વારા ભિન્ન હોઈ શકે. ઉદાહરણો માટે respective documentation તપાસો:
- [Vite](https://vite.dev/guide/features.html#css-pre-processors)
- [Vue CLI](https://cli.vuejs.org/guide/css.html#pre-processors)
@@ -111,7 +111,7 @@ Note that integration with various pre-processors may differ by toolchain. Check
## `src` Imports {#src-imports}
-If you prefer splitting up your `*.vue` components into multiple files, you can use the `src` attribute to import an external file for a language block:
+જો તમે તમારા `*.vue` ઘટકોને બહુવિધ files માં split કરવાનું પસંદ કરો, તો language block માટે external file import કરવા `src` attribute ઉપયોગ કરી શકો:
```vue
@@ -119,25 +119,25 @@ If you prefer splitting up your `*.vue` components into multiple files, you can
```
-Beware that `src` imports follow the same path resolution rules as webpack module requests, which means:
+સાવધાન રહો કે `src` imports webpack module requests જેવા જ path resolution rules ને અનુસરે, જેનો અર્થ છે:
-- Relative paths need to start with `./`
-- You can import resources from npm dependencies:
+- Relative paths `./` થી શરૂ થવા જોઈએ
+- તમે npm dependencies માંથી resources import કરી શકો:
```vue
-
+
```
-`src` imports also work with custom blocks, e.g.:
+`src` imports custom blocks સાથે પણ કામ કરે, દા.ત.:
```vue
```
-:::warning Note
-While using aliases in `src`, don't start with `~`, anything after it is interpreted as a module request. This means you can reference assets inside node modules:
+:::warning નોંધ
+`src` માં aliases ઉપયોગ કરતી વખતે, `~` થી શરૂ ન કરો, તેની પછીની કોઈપણ વસ્તુ module request તરીકે interpret થાય છે. આનો અર્થ છે કે તમે node modules અંદર assets ને reference કરી શકો:
```vue
```
@@ -145,4 +145,4 @@ While using aliases in `src`, don't start with `~`, anything after it is interpr
## Comments {#comments}
-Inside each block you shall use the comment syntax of the language being used (HTML, CSS, JavaScript, Pug, etc.). For top-level comments, use HTML comment syntax: ``
+દરેક block અંદર ઉપયોગ થતી language ની comment syntax (HTML, CSS, JavaScript, Pug, etc.) ઉપયોગ કરવી. Top-level comments માટે, HTML comment syntax ઉપયોગ કરો: ``
diff --git a/src/api/ssr.md b/src/api/ssr.md
index cb30cb8d60..a7b0afefc6 100644
--- a/src/api/ssr.md
+++ b/src/api/ssr.md
@@ -2,9 +2,9 @@
## renderToString() {#rendertostring}
-- **Exported from `vue/server-renderer`**
+- **`vue/server-renderer` માંથી Exported**
-- **Type**
+- **ટાઇપ (Type)**
```ts
function renderToString(
@@ -13,7 +13,7 @@
): Promise
```
-- **Example**
+- **ઉદાહરણ (Example)**
```js
import { createSSRApp } from 'vue'
@@ -32,7 +32,7 @@
### SSR Context {#ssr-context}
- You can pass an optional context object, which can be used to record additional data during the render, for example [accessing content of Teleports](/guide/scaling-up/ssr#teleports):
+ તમે optional context object પાસ કરી શકો, જેનો ઉપયોગ render દરમિયાન વધારાનો data record કરવા માટે થઈ શકે, ઉદાહરણ તરીકે [Teleports ના content ને access કરવું](/guide/scaling-up/ssr#teleports):
```js
const ctx = {}
@@ -41,17 +41,17 @@
console.log(ctx.teleports) // { '#teleported': 'teleported content' }
```
- Most other SSR APIs on this page also optionally accept a context object. The context object can be accessed in component code via the [useSSRContext](#usessrcontext) helper.
+ આ page પરના મોટાભાગના અન્ય SSR APIs પણ વૈકલ્પિક રીતે context object accept કરે. Context object ને component code માં [useSSRContext](#usessrcontext) helper દ્વારા access કરી શકાય.
-- **See also** [Guide - Server-Side Rendering](/guide/scaling-up/ssr)
+- **આ પણ જુઓ** [ગાઇડ - Server-Side Rendering](/guide/scaling-up/ssr)
## renderToNodeStream() {#rendertonodestream}
-Renders input as a [Node.js Readable stream](https://nodejs.org/api/stream.html#stream_class_stream_readable).
+Input ને [Node.js Readable stream](https://nodejs.org/api/stream.html#stream_class_stream_readable) તરીકે render કરે છે.
-- **Exported from `vue/server-renderer`**
+- **`vue/server-renderer` માંથી Exported**
-- **Type**
+- **ટાઇપ (Type)**
```ts
function renderToNodeStream(
@@ -60,24 +60,24 @@ Renders input as a [Node.js Readable stream](https://nodejs.org/api/stream.html#
): Readable
```
-- **Example**
+- **ઉદાહરણ (Example)**
```js
- // inside a Node.js http handler
+ // Node.js http handler અંદર
renderToNodeStream(app).pipe(res)
```
- :::tip Note
- This method is not supported in the ESM build of `vue/server-renderer`, which is decoupled from Node.js environments. Use [`pipeToNodeWritable`](#pipetonodewritable) instead.
+ :::tip નોંધ
+ આ method `vue/server-renderer` ના ESM build માં supported નથી, જે Node.js environments થી decoupled છે. તેના બદલે [`pipeToNodeWritable`](#pipetonodewritable) ઉપયોગ કરો.
:::
## pipeToNodeWritable() {#pipetonodewritable}
-Render and pipe to an existing [Node.js Writable stream](https://nodejs.org/api/stream.html#stream_writable_streams) instance.
+Render કરો અને existed [Node.js Writable stream](https://nodejs.org/api/stream.html#stream_writable_streams) instance ને pipe કરો.
-- **Exported from `vue/server-renderer`**
+- **`vue/server-renderer` માંથી Exported**
-- **Type**
+- **ટાઇપ (Type)**
```ts
function pipeToNodeWritable(
@@ -87,20 +87,20 @@ Render and pipe to an existing [Node.js Writable stream](https://nodejs.org/api/
): void
```
-- **Example**
+- **ઉદાહરણ (Example)**
```js
- // inside a Node.js http handler
+ // Node.js http handler અંદર
pipeToNodeWritable(app, {}, res)
```
## renderToWebStream() {#rendertowebstream}
-Renders input as a [Web ReadableStream](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API).
+Input ને [Web ReadableStream](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) તરીકે render કરે છે.
-- **Exported from `vue/server-renderer`**
+- **`vue/server-renderer` માંથી Exported**
-- **Type**
+- **ટાઇપ (Type)**
```ts
function renderToWebStream(
@@ -109,24 +109,24 @@ Renders input as a [Web ReadableStream](https://developer.mozilla.org/en-US/docs
): ReadableStream
```
-- **Example**
+- **ઉદાહરણ (Example)**
```js
- // inside an environment with ReadableStream support
+ // ReadableStream support ધરાવતા environment અંદર
return new Response(renderToWebStream(app))
```
- :::tip Note
- In environments that do not expose `ReadableStream` constructor in the global scope, [`pipeToWebWritable()`](#pipetowebwritable) should be used instead.
+ :::tip નોંધ
+ Global scope માં `ReadableStream` constructor expose ન કરતા environments માં, [`pipeToWebWritable()`](#pipetowebwritable) ઉપયોગ કરવો જોઈએ.
:::
## pipeToWebWritable() {#pipetowebwritable}
-Render and pipe to an existing [Web WritableStream](https://developer.mozilla.org/en-US/docs/Web/API/WritableStream) instance.
+Render કરો અને existed [Web WritableStream](https://developer.mozilla.org/en-US/docs/Web/API/WritableStream) instance ને pipe કરો.
-- **Exported from `vue/server-renderer`**
+- **`vue/server-renderer` માંથી Exported**
-- **Type**
+- **ટાઇપ (Type)**
```ts
function pipeToWebWritable(
@@ -136,13 +136,13 @@ Render and pipe to an existing [Web WritableStream](https://developer.mozilla.or
): void
```
-- **Example**
+- **ઉદાહરણ (Example)**
- This is typically used in combination with [`TransformStream`](https://developer.mozilla.org/en-US/docs/Web/API/TransformStream):
+ આ સામાન્ય રીતે [`TransformStream`](https://developer.mozilla.org/en-US/docs/Web/API/TransformStream) સાથે combination માં ઉપયોગ થાય છે:
```js
- // TransformStream is available in environments such as CloudFlare workers.
- // in Node.js, TransformStream needs to be explicitly imported from 'stream/web'
+ // TransformStream CloudFlare workers જેવા environments માં ઉપલબ્ધ છે.
+ // Node.js માં, TransformStream ને 'stream/web' માંથી explicitly import કરવું જરૂરી
const { readable, writable } = new TransformStream()
pipeToWebWritable(app, {}, writable)
@@ -151,11 +151,11 @@ Render and pipe to an existing [Web WritableStream](https://developer.mozilla.or
## renderToSimpleStream() {#rendertosimplestream}
-Renders input in streaming mode using a simple readable interface.
+Simple readable interface ઉપયોગ કરીને streaming mode માં input render કરે છે.
-- **Exported from `vue/server-renderer`**
+- **`vue/server-renderer` માંથી Exported**
-- **Type**
+- **ટાઇપ (Type)**
```ts
function renderToSimpleStream(
@@ -170,7 +170,7 @@ Renders input in streaming mode using a simple readable interface.
}
```
-- **Example**
+- **ઉદાહરણ (Example)**
```js
let res = ''
@@ -196,47 +196,47 @@ Renders input in streaming mode using a simple readable interface.
## useSSRContext() {#usessrcontext}
-A runtime API used to retrieve the context object passed to `renderToString()` or other server render APIs.
+Runtime API જેનો ઉપયોગ `renderToString()` અથવા અન્ય server render APIs ને pass કરેલો context object retrieve કરવા માટે થાય છે.
-- **Type**
+- **ટાઇપ (Type)**
```ts
function useSSRContext>(): T | undefined
```
-- **Example**
+- **ઉદાહરણ (Example)**
- The retrieved context can be used to attach information that is needed for rendering the final HTML (e.g. head metadata).
+ Retrieved context ને અંતિમ HTML render કરવા માટે જરૂરી information (દા.ત. head metadata) attach કરવા ઉપયોગ કરી શકાય.
```vue
```
## data-allow-mismatch {#data-allow-mismatch}
-A special attribute that can be used to suppress [hydration mismatch](/guide/scaling-up/ssr#hydration-mismatch) warnings.
+ખાસ attribute જેનો ઉપયોગ [hydration mismatch](/guide/scaling-up/ssr#hydration-mismatch) warnings ને suppress કરવા માટે થઈ શકે.
-- **Example**
+- **ઉદાહરણ (Example)**
```html
{{ data.toLocaleString() }}
```
- The value can limit the allowed mismatch to a specific type. Allowed values are:
+ Value allowed mismatch ને specific type સુધી limit કરી શકે. Allowed values:
- `text`
- - `children` (only allows mismatch for direct children)
+ - `children` (ફક્ત direct children માટે mismatch allow કરે)
- `class`
- `style`
- `attribute`
- If no value is provided, all types of mismatches will be allowed.
+ જો value provide ન કરવામાં આવે, તો તમામ types ના mismatches allow થશે.
diff --git a/src/api/utility-types.md b/src/api/utility-types.md
index e25a90a800..4f1f2e962d 100644
--- a/src/api/utility-types.md
+++ b/src/api/utility-types.md
@@ -1,14 +1,14 @@
-# Utility Types {#utility-types}
+# યુટિલિટી ટાઇપ્સ (Utility Types) {#utility-types}
:::info
-This page only lists a few commonly used utility types that may need explanation for their usage. For a full list of exported types, consult the [source code](https://github.com/vuejs/core/blob/main/packages/runtime-core/src/index.ts#L131).
+આ પેજ ફક્ત થોડા સામાન્ય રીતે ઉપયોગમાં લેવાતા utility types ને list કરે છે જેમના ઉપયોગ માટે સમજૂતીની જરૂર પડી શકે. Exported types ની સંપૂર્ણ list માટે, [source code](https://github.com/vuejs/core/blob/main/packages/runtime-core/src/index.ts#L131) જુઓ.
:::
## PropType\ {#proptype-t}
-Used to annotate a prop with more advanced types when using runtime props declarations.
+Runtime props declarations ઉપયોગ કરતી વખતે prop ને વધુ advanced types સાથે annotate કરવા માટે ઉપયોગ થાય છે.
-- **Example**
+- **ઉદાહરણ (Example)**
```ts
import type { PropType } from 'vue'
@@ -22,7 +22,7 @@ Used to annotate a prop with more advanced types when using runtime props declar
export default {
props: {
book: {
- // provide more specific type to `Object`
+ // `Object` ને વધુ ચોક્કસ type provide કરો
type: Object as PropType,
required: true
}
@@ -30,27 +30,27 @@ Used to annotate a prop with more advanced types when using runtime props declar
}
```
-- **See also** [Guide - Typing Component Props](/guide/typescript/options-api#typing-component-props)
+- **આ પણ જુઓ** [ગાઇડ - ઘટક Props ટાઇપ કરવા](/guide/typescript/options-api#typing-component-props)
## MaybeRef\ {#mayberef}
-- Only supported in 3.3+
+- માત્ર 3.3+ માં સપોર્ટેડ
-Alias for `T | Ref`. Useful for annotating arguments of [Composables](/guide/reusability/composables.html).
+`T | Ref` માટે Alias. [Composables](/guide/reusability/composables.html) ના arguments annotate કરવા માટે ઉપયોગી.
## MaybeRefOrGetter\ {#maybereforgetter}
-- Only supported in 3.3+
+- માત્ર 3.3+ માં સપોર્ટેડ
-Alias for `T | Ref | (() => T)`. Useful for annotating arguments of [Composables](/guide/reusability/composables.html).
+`T | Ref | (() => T)` માટે Alias. [Composables](/guide/reusability/composables.html) ના arguments annotate કરવા માટે ઉપયોગી.
## ExtractPropTypes\ {#extractproptypes}
-Extract prop types from a runtime props options object. The extracted types are internal facing - i.e. the resolved props received by the component. This means boolean props and props with default values are always defined, even if they are not required.
+Runtime props options object માંથી prop types extract કરો. Extracted types internal facing છે - i.e. ઘટક દ્વારા received resolved props. આનો અર્થ એ છે કે boolean props અને default values ધરાવતા props હંમેશા defined છે, ભલે તેઓ required ન હોય.
-To extract public facing props, i.e. props that the parent is allowed to pass, use [`ExtractPublicPropTypes`](#extractpublicproptypes).
+Public facing props extract કરવા, i.e. parent ને pass કરવાની મંજૂરી હોય તેવા props, [`ExtractPublicPropTypes`](#extractpublicproptypes) ઉપયોગ કરો.
-- **Example**
+- **ઉદાહરણ (Example)**
```ts
const propsOptions = {
@@ -77,11 +77,11 @@ To extract public facing props, i.e. props that the parent is allowed to pass, u
## ExtractPublicPropTypes\ {#extractpublicproptypes}
-- Only supported in 3.3+
+- માત્ર 3.3+ માં સપોર્ટેડ
-Extract prop types from a runtime props options object. The extracted types are public facing - i.e. the props that the parent is allowed to pass.
+Runtime props options object માંથી prop types extract કરો. Extracted types public facing છે - i.e. parent ને pass કરવાની મંજૂરી હોય તેવા props.
-- **Example**
+- **ઉદાહરણ (Example)**
```ts
const propsOptions = {
@@ -108,9 +108,9 @@ Extract prop types from a runtime props options object. The extracted types are
## ComponentCustomProperties {#componentcustomproperties}
-Used to augment the component instance type to support custom global properties.
+Custom global properties ને support કરવા માટે ઘટક ઇન્સ્ટન્સ type ને augment કરવા ઉપયોગ થાય છે.
-- **Example**
+- **ઉદાહરણ (Example)**
```ts
import axios from 'axios'
@@ -124,16 +124,16 @@ Used to augment the component instance type to support custom global properties.
```
:::tip
- Augmentations must be placed in a module `.ts` or `.d.ts` file. See [Type Augmentation Placement](/guide/typescript/options-api#augmenting-global-properties) for more details.
+ Augmentations module `.ts` અથવા `.d.ts` file માં placed હોવા જોઈએ. વધુ વિગત માટે [Type Augmentation Placement](/guide/typescript/options-api#augmenting-global-properties) જુઓ.
:::
-- **See also** [Guide - Augmenting Global Properties](/guide/typescript/options-api#augmenting-global-properties)
+- **આ પણ જુઓ** [ગાઇડ - ગ્લોબલ Properties Augment કરવી](/guide/typescript/options-api#augmenting-global-properties)
## ComponentCustomOptions {#componentcustomoptions}
-Used to augment the component options type to support custom options.
+Custom options ને support કરવા માટે ઘટક options type ને augment કરવા ઉપયોગ થાય છે.
-- **Example**
+- **ઉદાહરણ (Example)**
```ts
import { Route } from 'vue-router'
@@ -146,16 +146,16 @@ Used to augment the component options type to support custom options.
```
:::tip
- Augmentations must be placed in a module `.ts` or `.d.ts` file. See [Type Augmentation Placement](/guide/typescript/options-api#augmenting-global-properties) for more details.
+ Augmentations module `.ts` અથવા `.d.ts` file માં placed હોવા જોઈએ. વધુ વિગત માટે [Type Augmentation Placement](/guide/typescript/options-api#augmenting-global-properties) જુઓ.
:::
-- **See also** [Guide - Augmenting Custom Options](/guide/typescript/options-api#augmenting-custom-options)
+- **આ પણ જુઓ** [ગાઇડ - Custom Options Augment કરવી](/guide/typescript/options-api#augmenting-custom-options)
## ComponentCustomProps {#componentcustomprops}
-Used to augment allowed TSX props in order to use non-declared props on TSX elements.
+TSX elements પર non-declared props ઉપયોગ કરવા માટે allowed TSX props ને augment કરવા ઉપયોગ થાય છે.
-- **Example**
+- **ઉદાહરણ (Example)**
```ts
declare module 'vue' {
@@ -168,21 +168,21 @@ Used to augment allowed TSX props in order to use non-declared props on TSX elem
```
```tsx
- // now works even if hello is not a declared prop
+ // હવે કામ કરે છે ભલે hello declared prop ન હોય
```
:::tip
- Augmentations must be placed in a module `.ts` or `.d.ts` file. See [Type Augmentation Placement](/guide/typescript/options-api#augmenting-global-properties) for more details.
+ Augmentations module `.ts` અથવા `.d.ts` file માં placed હોવા જોઈએ. વધુ વિગત માટે [Type Augmentation Placement](/guide/typescript/options-api#augmenting-global-properties) જુઓ.
:::
## CSSProperties {#cssproperties}
-Used to augment allowed values in style property bindings.
+Style property bindings માં allowed values ને augment કરવા ઉપયોગ થાય છે.
-- **Example**
+- **ઉદાહરણ (Example)**
- Allow any custom CSS property
+ કોઈપણ custom CSS property ની મંજૂરી આપો
```ts
declare module 'vue' {
@@ -201,11 +201,11 @@ Used to augment allowed values in style property bindings.
```
:::tip
-Augmentations must be placed in a module `.ts` or `.d.ts` file. See [Type Augmentation Placement](/guide/typescript/options-api#augmenting-global-properties) for more details.
+Augmentations module `.ts` અથવા `.d.ts` file માં placed હોવા જોઈએ. વધુ વિગત માટે [Type Augmentation Placement](/guide/typescript/options-api#augmenting-global-properties) જુઓ.
:::
-:::info See also
-SFC `
```
-To keep your users fully safe from clickjacking, we recommend only allowing full control over CSS inside a sandboxed iframe. Alternatively, when providing user control through a style binding, we recommend using its [object syntax](/guide/essentials/class-and-style#binding-to-objects-1) and only allowing users to provide values for specific properties it's safe for them to control, like this:
+તમારા વપરાશકર્તાઓને ક્લિકજેકિંગથી સંપૂર્ણપણે સુરક્ષિત રાખવા માટે, અમે માત્ર સેન્ડબોક્સ્ડ ઇફ્રેમની અંદર CSS પર સંપૂર્ણ નિયંત્રણની મંજૂરી આપવાની ભલામણ કરીએ છીએ. વૈકલ્પિક રીતે, જ્યારે સ્ટાઇલ બાઇન્ડિંગ દ્વારા વપરાશકર્તા નિયંત્રણ પ્રદાન કરવામાં આવે, ત્યારે અમે તેના [ઓબ્જેક્ટ સિન્ટેક્સ (object syntax)](/guide/essentials/class-and-style#binding-to-objects-1) નો ઉપયોગ કરવાની ભલામણ કરીએ છીએ અને વપરાશકર્તાઓને માત્ર તે વિશિષ્ટ પ્રોપર્ટીઝ માટે વેલ્યુઝ પ્રદાન કરવાની મંજૂરી આપે છે જે તેમના માટે નિયંત્રિત કરવા માટે સુરક્ષિત છે, આના જેવી:
```vue-html
- click me
+ મને ક્લિક કરો
```
-### JavaScript Injection {#javascript-injection}
+### JavaScript ઇન્જેક્શન (JavaScript Injection) {#javascript-injection}
-We strongly discourage ever rendering a `
-# KeepAlive {#keepalive}
+# કીપએલાઇવ (KeepAlive) {#keepalive}
-`` is a built-in component that allows us to conditionally cache component instances when dynamically switching between multiple components.
+`` એ એક બિલ્ટ-ઇન ઘટક છે જે આપણને બહુવિધ ઘટકો વચ્ચે ડાયનેમિકલી સ્વિચ કરતી વખતે કમ્પોનન્ટ ઇન્સ્ટન્સને કેશ (cache) કરવાની મંજૂરી આપે છે.
-## Basic Usage {#basic-usage}
+## મૂળભૂત વપરાશ (Basic Usage) {#basic-usage}
-In the Component Basics chapter, we introduced the syntax for [Dynamic Components](/guide/essentials/component-basics#dynamic-components), using the `` special element:
+કમ્પોનન્ટ બેઝિક્સ (Component Basics) પ્રકરણમાં, આપણે `` સ્પેશિયલ એલિમેન્ટનો ઉપયોગ કરીને [ડાયનેમિક કમ્પોનન્ટ્સ](/guide/essentials/component-basics#dynamic-components) માટેનો સિન્ટેક્સ રજૂ કર્યો હતો:
```vue-html
```
-By default, an active component instance will be unmounted when switching away from it. This will cause any changed state it holds to be lost. When this component is displayed again, a new instance will be created with only the initial state.
+ડિફોલ્ટ રૂપે, જ્યારે કોઈ સક્રિય કમ્પોનન્ટ ઇન્સ્ટન્સમાંથી સ્વિચ કરવામાં આવે ત્યારે તે અનમાઉન્ટ થઈ જશે. આનાથી તે ધરાવેલી કોઈપણ બદલાયેલી સ્ટેટ ખોવાઈ જશે. જ્યારે આ કમ્પોનન્ટ ફરીથી પ્રદર્શિત થાય છે, ત્યારે માત્ર પ્રારંભિક સ્ટેટ (initial state) સાથે નવો ઇન્સ્ટન્સ બનાવવામાં આવશે.
-In the example below, we have two stateful components - A contains a counter, while B contains a message synced with an input via `v-model`. Try updating the state of one of them, switch away, and then switch back to it:
+નીચેના ઉદાહરણમાં, આપણી પાસે બે સ્ટેટફુલ પ્રોજક્ટ્સ (components) છે - A માં કાઉન્ટર છે, જ્યારે B માં `v-model` દ્વારા ઇનપુટ સાથે સિંક કરેલ મેસેજ છે. તેમાંથી એકની સ્ટેટ અપડેટ કરવાનો પ્રયાસ કરો, સ્વિચ કરો અને પછી તેના પર પાછા સ્વિચ કરો:
-You'll notice that when switched back, the previous changed state would have been reset.
+તમે જોશો કે જ્યારે પાછા સ્વિચ કરવામાં આવે ત્યારે, અગાઉની બદલાયેલી સ્ટેટ રિસેટ થઈ ગઈ હશે.
-Creating fresh component instance on switch is normally useful behavior, but in this case, we'd really like the two component instances to be preserved even when they are inactive. To solve this problem, we can wrap our dynamic component with the `` built-in component:
+સ્વિચ પર નવો ઘટક ઇન્સ્ટન્સ બનાવવો એ સામાન્ય રીતે ઉપયોગી વર્તન છે, પરંતુ આ કિસ્સામાં, આપણે ખરેખર ઇચ્છીએ છીએ કે બે ઘટક ઇન્સ્ટન્સ નિષ્ક્રિય હોય ત્યારે પણ સચવાયેલા રહે. આ સમસ્યાને ઉકેલવા માટે, આપણે આપણા ડાયનેમિક કમ્પોનન્ટને `` બિલ્ટ-ઇન કમ્પોનન્ટ સાથે લપેટી શકીએ છીએ:
```vue-html
-
+
```
-Now, the state will be persisted across component switches:
+હવે, ઘટક સ્વિચ દરમિયાન સ્ટેટ સચવાયેલી રહેશે:
-[Try it in the Playground](https://play.vuejs.org/#eNqtUsFOwzAM/RWrl4IGC+cqq2h3RFw495K12YhIk6hJi1DVf8dJSllBaAJxi+2XZz8/j0lhzHboeZIl1NadMA4sd73JKyVaozsHI9hnJqV+feJHmODY6RZS/JEuiL1uTTEXtiREnnINKFeAcgZUqtbKOqj7ruPKwe6s2VVguq4UJXEynAkDx1sjmeMYAdBGDFBLZu2uShre6ioJeaxIduAyp0KZ3oF7MxwRHWsEQmC4bXXDJWbmxpjLBiZ7DwptMUFyKCiJNP/BWUbO8gvnA+emkGKIgkKqRrRWfh+Z8MIWwpySpfbxn6wJKMGV4IuSs0UlN1HVJae7bxYvBuk+2IOIq7sLnph8P9u5DJv5VfpWWLaGqTzwZTCOM/M0IaMvBMihd04ruK+lqF/8Ajxms8EFbCiJxR8khsP6ncQosLWnWV6a/kUf2nqu75Fby04chA0iPftaYryhz6NBRLjdtajpHZTWPio=)
+[Playground માં તે અજમાવી જુઓ](https://play.vuejs.org/#eNqtUsFOwzAM/RWrl4IGC+cqq2h3RFw495K12YhIk6hJi1DVf8dJSllBaAJxi+2XZz8/j0lhzHboeZIl1NadMA4sd73JKyVaozsHI9hnJqV+feJHmODY6RZS/JEuiL1uTTEXtiREnnINKFeAcgZUqtbKOqj7ruPKwe6s2VVguq4UJXEynAkDx1sjmeMYAdBGDFBLZu2uShre6ioJeaxIduAyp0KZ3oF7MxwRHWsEQmC4bXXDJWbmxpjLBiZ7DwptMUFyKCiJNP/BWUbO8gvnA+emkGKIgkKqRrRWfh+Z8MIWwpySpfbxn6wJKMGV4IuSs0UlN1HVJae7bxYvBuk+2IOIq7sLnph8P9u5DJv5VfpWWLaGqTzwZTCOM/M0IaMvBMihd04ruK+lqF/8Ajxms8EFbCiJxR8khsP6ncQosLWnWV6a/kUf2nqu75Fby04chA0iPftaYryhz6NBRLndtajpHZTWPio=)
-[Try it in the Playground](https://play.vuejs.org/#eNqtU8tugzAQ/JUVl7RKWveMXFTIseofcHHAiawasPxArRD/3rVNSEhbpVUrIWB3x7PM7jAkuVL3veNJmlBTaaFsVraiUZ22sO0alcNedw2s7kmIPHS1ABQLQDEBAMqWvwVQzffMSQuDz1aI6VreWpPCEBtsJppx4wE1s+zmNoIBNLdOt8cIjzut8XAKq3A0NAIY/QNveFEyi8DA8kZJZjlGALQWPVSSGfNYJjVvujIJeaxItuMyo6JVzoJ9VxwRmtUCIdDfNV3NJWam5j7HpPOY8BEYkwxySiLLP1AWkbK4oHzmXOVS9FFOSM3jhFR4WTNfRslcO54nSwJKcCD4RsnZmJJNFPXJEl8t88quOuc39fCrHalsGyWcnJL62apYNoq12UQ8DLEFjCMy+kKA7Jy1XQtPlRTVqx+Jx6zXOJI1JbH4jejg3T+KbswBzXnFlz9Tjes/V/3CjWEHDsL/OYNvdCE8Wu3kLUQEhy+ljh+brFFu)
+[Playground માં તે અજમાવી જુઓ](https://play.vuejs.org/#eNqtU8tugzAQ/JUVl7RKWveMXFTIseofcHHAiawasPxArRD/3rVNSEhbpVUrIWB3x7PM7jAkuVL3veNJmlBTaaFsVraiUZ22sO0alcNedw2s7kmIPHS1ABQLQDEBAMqWvwVQzffMSQuDz1aI6VreWpPCEBtsJppx4wE1s+zmNoIBNLdOt8cIjzut8XAKq3A0NAIY/QNveFEyi8DA8kZJZjlGALQWPVSSGfNYJjVvujIJeaxItuMyo6JVzoJ9VxwRmtUCIdDfNV3NJWam5j7HpPOY8BEYkwxySiLLP1AWkbK4oHzmXOVS9FFOSM3jhFR4WTNfRslcO54nSwJKcCD4RsnZmJJNFPXJEl8t88quOuc39fCrHalsGyWcnJL62apYNoq12UQ8DLEFjCMy+kKA7Jy1XQtPlRTVqx+Jx6zXOJI1JbH4jejg3T+KbswBzXnFlz9Tjes/V/3CjWEHDsL/OYNvdCE8Wu3kLUQEhy+ljh+brFFu)
:::tip
-When used in [in-DOM templates](/guide/essentials/component-basics#in-dom-template-parsing-caveats), it should be referenced as ``.
+જ્યારે [in-DOM templates](/guide/essentials/component-basics#in-dom-template-parsing-caveats) માં ઉપયોગ થાય છે, ત્યારે તેને `` તરીકે ઓળખવામાં આવવું જોઈએ.
:::
-## Include / Exclude {#include-exclude}
+## ઇન્ક્લુડ / એક્સક્લુડ (Include / Exclude) {#include-exclude}
-By default, `` will cache any component instance inside. We can customize this behavior via the `include` and `exclude` props. Both props can be a comma-delimited string, a `RegExp`, or an array containing either types:
+ડિફોલ્ટ રૂપે, `` અંદરના કોઈપણ કમ્પોનન્ટ ઇન્સ્ટન્સને કેશ કરશે. આપણે `include` અને `exclude` પ્રોપ્સ દ્વારા આ વર્તનને કસ્ટમાઇઝ કરી શકીએ છીએ. બંને પ્રોપ્સ અલ્પવિરામથી અલગ કરેલી સ્ટ્રિંગ, `RegExp` અથવા બંને પ્રકારો ધરાવતા એરે હોઈ શકે છે:
```vue-html
-
+
-
+
-
+
```
-The match is checked against the component's [`name`](/api/options-misc#name) option, so components that need to be conditionally cached by `KeepAlive` must explicitly declare a `name` option.
+મેચ કમ્પોનન્ટના [`name`](/api/options-misc#name) ઓપ્શન સામે તપાસવામાં આવે છે, તેથી જે કમ્પોનન્ટ્સને `KeepAlive` દ્વારા કેશ કરવાની જરૂર છે તેમણે સ્પષ્ટપણે `name` ઓપ્શન જાહેર કરવો જોઈએ.
:::tip
-Since version 3.2.34, a single-file component using `
```
@@ -114,30 +114,30 @@ onDeactivated(() => {
-A kept-alive component can register lifecycle hooks for these two states using [`activated`](/api/options-lifecycle#activated) and [`deactivated`](/api/options-lifecycle#deactivated) hooks:
+કીપ-એલાઈવ કમ્પોનન્ટ [`activated`](/api/options-lifecycle#activated) અને [`deactivated`](/api/options-lifecycle#deactivated) હૂક્સનો ઉપયોગ કરીને આ બે સ્ટેટ્સ માટે લાઇફસાયકલ હૂક્સ રજીસ્ટર કરી શકે છે:
```js
export default {
activated() {
- // called on initial mount
- // and every time it is re-inserted from the cache
+ // પ્રારંભિક માઉન્ટ પર કૉલ કરવામાં આવે છે
+ // અને દર વખતે જ્યારે તેને કેશમાંથી ફરીથી દાખલ કરવામાં આવે છે
},
deactivated() {
- // called when removed from the DOM into the cache
- // and also when unmounted
+ // જ્યારે DOM માંથી કેશમાં દૂર કરવામાં આવે ત્યારે કૉલ કરવામાં આવે છે
+ // અને જ્યારે અનમાઉન્ટ કરવામાં આવે ત્યારે પણ
}
}
```
-Note that:
+નોંધ લો કે:
-- `onActivated``activated` is also called on mount, and `onDeactivated``deactivated` on unmount.
+- `onActivated``activated` માઉન્ટ પર પણ કહેવાય છે, અને `onDeactivated``deactivated` અનમાઉન્ટ પર પણ કહેવાય છે.
-- Both hooks work for not only the root component cached by ``, but also the descendant components in the cached tree.
+- બંને હૂક્સ માત્ર `` દ્વારા કેશ કરાયેલ રૂટ ઘટક માટે જ નહીં, પણ કેશ કરેલા ટ્રીમાં વંશજ ઘટકો (descendant components) માટે પણ કામ કરે છે.
---
-**Related**
+**સંબંધિત**
-- [`` API reference](/api/built-in-components#keepalive)
+- [`` API રિફરન્સ](/api/built-in-components#keepalive)
diff --git a/src/guide/built-ins/suspense.md b/src/guide/built-ins/suspense.md
index 1478e495f9..a57fe7a64b 100644
--- a/src/guide/built-ins/suspense.md
+++ b/src/guide/built-ins/suspense.md
@@ -2,41 +2,41 @@
outline: deep
---
-# Suspense {#suspense}
+# સસ્પેન્સ (Suspense) {#suspense}
-:::warning Experimental Feature
-`` is an experimental feature. It is not guaranteed to reach stable status and the API may change before it does.
+:::warning પ્રાયોગિક સુવિધા (Experimental Feature)
+`` એ એક પ્રાયોગિક સુવિધા છે. તે સ્ટેબલ સ્ટેટસ સુધી પહોંચશે તેની કોઈ ગેરંટી નથી અને તે થાય તે પહેલા API બદલાઈ શકે છે.
:::
-`` is a built-in component for orchestrating async dependencies in a component tree. It can render a loading state while waiting for multiple nested async dependencies down the component tree to be resolved.
+`` એ કમ્પોનન્ટ ટ્રીમાં એસિંક ડિપેન્ડન્સીસને ઓર્કેસ્ટ્રેટ કરવા માટેનું બિલ્ટ-ઇન ઘટક છે. તે કમ્પોનન્ટ ટ્રીમાં બહુવિધ નેસ્ટેડ એસિંક ડિપેન્ડન્સીસ રિઝોલ્વ થવાની રાહ જોતી વખતે લોડિંગ સ્ટેટ રેન્ડર કરી શકે છે.
-## Async Dependencies {#async-dependencies}
+## એસિંક ડિપેન્ડન્સીસ (Async Dependencies) {#async-dependencies}
-To explain the problem `` is trying to solve and how it interacts with these async dependencies, let's imagine a component hierarchy like the following:
+`` જે સમસ્યા હલ કરવાનો પ્રયાસ કરી રહ્યું છે અને તે આ એસિંક ડિપેન્ડન્સીસ સાથે કેવી રીતે ક્રિયાપ્રતિક્રિયા કરે છે તે સમજાવવા માટે, ચાલો નીચે મુજબના કમ્પોનન્ટ વંશવેલો (hierarchy) ની કલ્પના કરીએ:
```
└─
├─
- │ └─ (component with async setup())
+ │ └─ (એસિંક setup() વાળો ઘટક)
└─
- ├─ (async component)
- └─ (async component)
+ ├─ (એસિંક ઘટક)
+ └─ (એસિંક ઘટક)
```
-In the component tree there are multiple nested components whose rendering depends on some async resource to be resolved first. Without ``, each of them will need to handle its own loading / error and loaded states. In the worst case scenario, we may see three loading spinners on the page, with content displayed at different times.
+કમ્પોનન્ટ ટ્રીમાં બહુવિધ નેસ્ટેડ ઘટકો છે જેનું રેન્ડરિંગ કેટલીક એસિંક રિસોર્સ પર આધાર રાખે છે જે પહેલાથી રિઝોલ્વ થવા જોઈએ. `` વિના, તેમાંના દરેકે પોતાના લોડિંગ / એરર અને લોડેડ સ્ટેટ્સને હેન્ડલ કરવાની જરૂર પડશે. સૌથી ખરાબ પરિસ્થિતિમાં, આપણે પેજ પર ત્રણ લોડિંગ સ્પિનર્સ જોઈ શકીએ છીએ, જેમાં વિવિધ સમયે કન્ટેન્ટ પ્રદર્શિત થાય છે.
-The `` component gives us the ability to display top-level loading / error states while we wait on these nested async dependencies to be resolved.
+`` ઘટક આપણને ટોપ-લેવલ લોડિંગ / એરર સ્ટેટ્સ પ્રદર્શિત કરવાની ક્ષમતા આપે છે જ્યારે આપણે આ નેસ્ટેડ એસિંક ડિપેન્ડન્સીસ રિઝોલ્વ થવાની રાહ જોતા હોઈએ.
-There are two types of async dependencies that `` can wait on:
+ત્યાં બે પ્રકારની એસિંક ડિપેન્ડન્સીસ છે જેના પર `` રાહ જોઈ શકે છે:
-1. Components with an async `setup()` hook. This includes components using `
-# TransitionGroup {#transitiongroup}
+# ટ્રાન્ઝિશનગ્રુપ (TransitionGroup) {#transitiongroup}
-`` is a built-in component designed for animating the insertion, removal, and order change of elements or components that are rendered in a list.
+`` એ એક બિલ્ટ-ઇન ઘટક છે જે લિસ્ટમાં રેન્ડર થયેલા એલિમેન્ટ્સ અથવા કમ્પોનન્ટ્સના ઇન્સર્શન (insertion), રિમૂવલ (removal) અને ઓર્ડર ચેન્જ (order change) ને એનિમેટ કરવા માટે રચાયેલ છે.
-## Differences from `` {#differences-from-transition}
+## `` થી તફાવત {#differences-from-transition}
-`` supports the same props, CSS transition classes, and JavaScript hook listeners as ``, with the following differences:
+`` સમાન પ્રોપ્સ, CSS ટ્રાન્ઝિશન ક્લાસીસ અને JavaScript હૂક લિસનર્સને `` ની જેમ જ સપોર્ટ કરે છે, જેમાં નીચેના તફાવતો છે:
-- By default, it doesn't render a wrapper element. But you can specify an element to be rendered with the `tag` prop.
+- ડિફોલ્ટ રૂપે, તે રેપર એલિમેન્ટ (wrapper element) રેન્ડર કરતું નથી. પરંતુ તમે `tag` પ્રોપ સાથે રેન્ડર કરવા માટે એલિમેન્ટ ઉલ્લેખ કરી શકો છો.
-- [Transition modes](./transition#transition-modes) are not available, because we are no longer alternating between mutually exclusive elements.
+- [ટ્રાન્ઝિશન મોડ્સ](./transition#transition-modes) ઉપલબ્ધ નથી, કારણ કે આપણે હવે પરસ્પર વિશિષ્ટ ઘટકો (mutually exclusive elements) વચ્ચે વૈકલ્પિક રીતે બદલાતા નથી.
-- Elements inside are **always required** to have a unique `key` attribute.
+- અંદરના એલિમેન્ટ્સ માટે હંમેશા અનન્ય `key` એટ્રિબ્યુટ હોવું **જરૂરી** છે.
-- CSS transition classes will be applied to individual elements in the list, **not** to the group / container itself.
+- CSS ટ્રાન્ઝિશન ક્લાસીસ લિસ્ટમાં વ્યક્તિગત એલિમેન્ટ્સ પર લાગુ કરવામાં આવશે, ગ્રુપ / કન્ટેનર પર **નહીં**.
:::tip
-When used in [in-DOM templates](/guide/essentials/component-basics#in-dom-template-parsing-caveats), it should be referenced as ``.
+જ્યારે [in-DOM templates](/guide/essentials/component-basics#in-dom-template-parsing-caveats) માં ઉપયોગ થાય છે, ત્યારે તેને `` તરીકે ઓળખવામાં આવવું જોઈએ.
:::
-## Enter / Leave Transitions {#enter-leave-transitions}
+## એન્ટર / લીવ ટ્રાન્ઝિશન (Enter / Leave Transitions) {#enter-leave-transitions}
-Here is an example of applying enter / leave transitions to a `v-for` list using ``:
+અહીં `` નો ઉપયોગ કરીને `v-for` લિસ્ટમાં એન્ટર / લીવ ટ્રાન્ઝિશન લાગુ કરવાનું ઉદાહરણ છે:
```vue-html
@@ -50,12 +50,12 @@ Here is an example of applying enter / leave transitions to a `v-for` list using
-## Move Transitions {#move-transitions}
+## મુવ ટ્રાન્ઝિશન (Move Transitions) {#move-transitions}
-The above demo has some obvious flaws: when an item is inserted or removed, its surrounding items instantly "jump" into place instead of moving smoothly. We can fix this by adding a few additional CSS rules:
+ઉપરોક્ત ડેમોમાં કેટલીક સ્પષ્ટ ખામીઓ છે: જ્યારે કોઈ આઇટમ દાખલ કરવામાં આવે અથવા દૂર કરવામાં આવે, ત્યારે તેની આસપાસની આઇટમ્સ સરળતાથી ખસવાને બદલે તરત જ "જમ્પ" કરીને તેની જગ્યાએ આવી જાય છે. અમે કેટલાક વધારાના CSS નિયમો ઉમેરીને આને ઠીક કરી શકીએ છીએ:
```css{1,13-17}
-.list-move, /* apply transition to moving elements */
+.list-move, /* ખસેડતા ઘટકો પર ટ્રાન્ઝિશન લાગુ કરો */
.list-enter-active,
.list-leave-active {
transition: all 0.5s ease;
@@ -67,26 +67,26 @@ The above demo has some obvious flaws: when an item is inserted or removed, its
transform: translateX(30px);
}
-/* ensure leaving items are taken out of layout flow so that moving
- animations can be calculated correctly. */
+/* ખાતરી કરો કે બહાર નીકળતી આઇટમ્સ લેઆઉટ પ્રવાહમાંથી બહાર કાઢવામાં આવે છે
+ જેથી કરીને મૂવિંગ એનિમેશનની ગણતરી યોગ્ય રીતે કરી શકાય. */
.list-leave-active {
position: absolute;
}
```
-Now it looks much better - even animating smoothly when the whole list is shuffled:
+હવે તે ઘણું સારું લાગે છે - જ્યારે આખું લિસ્ટ શફલ (shuffled) થાય ત્યારે પણ સરળતાથી એનિમેટ થાય છે:
-[Full Example](/examples/#list-transition)
+[સંપૂર્ણ ઉદાહરણ](/examples/#list-transition)
-### Custom TransitionGroup classes {#custom-transitiongroup-classes}
+### કસ્ટમ ટ્રાન્ઝિશનગ્રુપ ક્લાસીસ {#custom-transitiongroup-classes}
-You can also specify custom transition classes for the moving element by passing the `moveClass` prop to ``, just like [custom transition classes on ``](/guide/built-ins/transition.html#custom-transition-classes).
+તમે `` ને `moveClass` પ્રોપ પાસ કરીને મૂવિંગ એલિમેન્ટ માટે કસ્ટમ ટ્રાન્ઝિશન ક્લાસીસ પણ સ્પષ્ટ કરી શકો છો, બિલકુલ [`` પર કસ્ટમ ટ્રાન્ઝિશન ક્લાસીસ](/guide/built-ins/transition.html#custom-transition-classes) ની જેમ.
-## Staggering List Transitions {#staggering-list-transitions}
+## સ્ટેગર્ડ લિસ્ટ ટ્રાન્ઝિશન (Staggering List Transitions) {#staggering-list-transitions}
-By communicating with JavaScript transitions through data attributes, it's also possible to stagger transitions in a list. First, we render the index of an item as a data attribute on the DOM element:
+ડેટા એટ્રિબ્યુટ્સ દ્વારા JavaScript ટ્રાન્ઝિશન સાથે વાતચીત કરીને, લિસ્ટમાં ટ્રાન્ઝિશનને સ્ટેગર (stagger) કરવું પણ શક્ય છે. પ્રથમ, અમે DOM એલિમેન્ટ પર ડેટા એટ્રિબ્યુટ તરીકે આઇટમની ઇન્ડેક્સ (index) રેન્ડર કરીએ છીએ:
```vue-html{11}
```
-Then, in JavaScript hooks, we animate the element with a delay based on the data attribute. This example is using the [GSAP library](https://gsap.com/) to perform the animation:
+પછી, JavaScript હૂક્સમાં, અમે ડેટા એટ્રિબ્યુટના આધારે વિલંબ (delay) સાથે એલિમેન્ટને એનિમેટ કરીએ છીએ. આ ઉદાહરણ એનિમેશન કરવા માટે [GSAP લાઇબ્રેરી](https://gsap.com/) નો ઉપયોગ કરી રહ્યું છે:
```js{5}
function onEnter(el, done) {
@@ -123,17 +123,17 @@ function onEnter(el, done) {
-[Full Example in the Playground](https://play.vuejs.org/#eNqlVMuu0zAQ/ZVRNklRm7QLWETtBW4FSFCxYkdYmGSSmjp28KNQVfl3xk7SFyvEponPGc+cOTPNOXrbdenRYZRHa1Nq3lkwaF33VEjedkpbOIPGeg6lajtnsYIeaq1aiOlSfAlqDOtG3L8SUchSSWNBcPrZwNdCAqVqTZND/KxdibBDjKGf3xIfWXngCNs9k4/Udu/KA3xWWnPz1zW0sOOP6CcnG3jv9ImIQn67SvrpUJ9IE/WVxPHsSkw97gbN0zFJZrB5grNPrskcLUNXac2FRZ0k3GIbIvxLSsVTq3bqF+otM5jMUi5L4So0SSicHplwOKOyfShdO1lariQo+Yy10vhO+qwoZkNFFKmxJ4Gp6ljJrRe+vMP3yJu910swNXqXcco1h0pJHDP6CZHEAAcAYMydwypYCDAkJRdX6Sts4xGtUDAKotIVs9Scpd4q/A0vYJmuXo5BSm7JOIEW81DVo77VR207ZEf8F23LB23T+X9VrbNh82nn6UAz7ASzSCeANZe0AnBctIqqbIoojLCIIBvoL5pJw31DH7Ry3VDKsoYinSii4ZyXxhBQM2Fwwt58D7NeoB8QkXfDvwRd2XtceOsCHkwc8KCINAk+vADJppQUFjZ0DsGVGT3uFn1KSjoPeKLoaYtvCO/rIlz3vH9O5FiU/nXny/pDT6YGKZngg0/Zg1GErrMbp6N5NHxJFi3N/4dRkj5IYf5ULxCmiPJpI4rIr4kHimhvbWfyLHOyOzQpNZZ57jXNy4nRGFLTR/0fWBqe7w==)
+[Playground માં સંપૂર્ણ ઉદાહરણ](https://play.vuejs.org/#eNqlVMuu0zAQ/ZVRNklRm7QLWETtBW4FSFCxYkdYmGSSmjp28KNQVfl3xk7SFyvEponPGc+cOTPNOXrbdenRYZRHa1Nq3lkwaF33VEjedkpbOIPGeg6lajtnsYIeaq1aiOlSfAlqDOtG3L8SUchSSWNBcPrZwNdCAqVqTZND/KxdibBDjKGf3xIfWXngCNs9k4/Udu/KA3xWWnPz1zW0sOOP6CcnG3jv9ImIQn67SvrpUJ9IE/WVxPHsSkw97gbN0zFJZrB5grNPrskcLUNXac2FRZ0k3GIbIvxLSsVTq3bqF+otM5jMUi5L4So0SSicHplwOKOyfShdO1lariQo+Yy10vhO+qwoZkNFFKmxJ4Gp6ljJrRe+vMP3yJu910swNXqXcco1h0pJHDP6CZHEAAcAYMydwypYCDAkJRdX6Sts4xGtUDAKotIVs9Scpd4q/A0vYJmuXo5BSm7JOIEW81DVo77VR207ZEf8F23LB23T+X9VrbNh82nn6UAz7ASzSCeANZe0AnBctIqqbIoojLCIIBvoL5pJw31DH7Ry3VDKsoYinSii4ZyXxhBQM2Fwwt58D7NeoB8QkXfDvwRd2XtceOsCHkwc8KCINAk+vADJppQUFjZ0DsGVGT3uFn1KSjoPeKLoaYtvCO/rIlz3vH9O5FiU/nXny/pDT6YGKZngg0/Zg1GErrMbp6N5NHxJFi3N/4dRkj5IYf5ULxCmiPJpI4rIr4kHimhvbWfyLHOyOzQpNZZ57jXNy4nRGFLTR/0fWBqe7w==)
-[Full Example in the Playground](https://play.vuejs.org/#eNqtVE2P0zAQ/SujXNqgNmkPcIjaBbYCJKg4cSMcTDJNTB07+KNsVfW/M3aabNpyQltViT1vPPP8Zian6H3bJgeHURatTKF5ax9yyZtWaQuVYS3stGpg4peTXOayUNJYEJwea/ieS4ATNKbKYPKoXYGwRZzAeTYGPrNizxE2NZO30KZ2xR6+Kq25uTuGFrb81vrFyQo+On0kIJc/PCV8CmxL3DEnLJy8e8ksm8bdGkCjdVr2O4DfDvWRgtGN/JYC0SOkKVTTOotl1jv3hi3d+DngENILkey4sKinU26xiWH9AH6REN/Eqq36g3rDDE7jhMtCuBLN1NbcJIFEHN9RaNDWqjQDAyUfcac0fpA+CYoRCRSJsUeBiWpZwe2RSrK4w2rkVe2rdYG6LD5uH3EGpZI4iuurTdwDNBjpRJclg+UlhP914UnMZfIGm8kIKVEwciYivhoGLQlQ4hO8gkWyfD1yVHJDKgu0mAUmPXLuxRkYb5Ed8H8YL/7BeGx7Oa6hkLmk/yodBoo21BKtYBZpB7DikroKDvNGUeZ1HoVmyCNIO/ibZtJwy5X8pJVru9CWVeTpRB51+6wwhgw7Jgz2tnc/Q6/M0ZeWwKvmGZye0Wu78PIGexC6swdGxEnw/q6HOYUkt9DwMwhKxfS6GpY+KPHc45G8+6EYAV7reTjucf/uwUtSmvvTME1wDuISlVTwTqf0RiiyrtKR0tEs6r5l84b645dRkr5zoT8oXwBMHg2Tlke+jbwhj2prW5OlqZPtvkroYqnH3lK9nLgI46scnf8Cn22kBA==)
+[Playground માં સંપૂર્ણ ઉદાહરણ](https://play.vuejs.org/#eNqtVE2P0zAQ/SujXNqgNmkPcIjaBbYCJKg4cSMcTDJNTB07+KNsVfW/M3aabNpyQltViT1vPPP8Zian6H3bJgeHURatTKF5ax9yyZtWaQuVYS3stGpg4peTXOayUNJYEJwea/ieS4ATNKbKYPKoXYGwRZzAeTYGPrNizxE2NZO30KZ2xR6+Kq25uTuGFrb81vrFyQo+On0kIJc/PCV8CmxL3DEnLJy8e8ksm8bdGkCjdVr2O4DfDvWRgtGN/JYC0SOkKVTTOotl1jv3hi3d+DngENILkey4sKinU26xiWH9AH6REN/Eqq36g3rDDE7jhMtCuBLN1NbcJIFEHN9RaNDWqjQDAyUfcac0fpA+CYoRCRSJsUeBiWpZwe2RSrK4w2rkVe2rdYG6LD5uH3EGpZI4iuurTdwDNBjpRJclg+UlhP914UnMZfIGm8kIKVEwciYivhoGLQlQ4hO8gkWyfD1yVHJDKgu0mAUmPXLuxRkYb5Ed8H8YL/7BeGx7Oa6hkLmk/yodBoo21BKtYBZpB7DikroKDvNGUeZ1HoVmyCNIO/ibZtJwy5X8pJVru9CWVeTpRB51+6wwhgw7Jgz2tnc/Q6/M0ZeWwKvmGZye0Wu78PIGexC6swdGxEnw/q6HOYUkt9DwMwhKxfS6GpY+KPHc45G8+6EYAV7reTjucf/uwUtSmvvTME1wDuISlVTwTqf0RiiyrtKR0tEs6r5l84b645dRkr5zoT8oXwBMHg2Tlke+jbwhj2prW5OlqZPtvkroYqnH3lK9nLgI46scnf8Cn22kBA==)
---
-**Related**
+**સંબંધિત**
-- [`` API reference](/api/built-in-components#transitiongroup)
+- [`` API રિફરન્સ](/api/built-in-components#transitiongroup)
diff --git a/src/guide/built-ins/transition.md b/src/guide/built-ins/transition.md
index 0d46248c2e..0bfaf2c318 100644
--- a/src/guide/built-ins/transition.md
+++ b/src/guide/built-ins/transition.md
@@ -8,36 +8,36 @@ import BetweenElements from './transition-demos/BetweenElements.vue'
import BetweenComponents from './transition-demos/BetweenComponents.vue'
-# Transition {#transition}
+# ટ્રાન્ઝિશન (Transition) {#transition}
-Vue offers two built-in components that can help work with transitions and animations in response to changing state:
+Vue પરિસ્થિતિ (state) બદલવાના જવાબમાં ટ્રાન્ઝિશન અને એનિમેશન સાથે કામ કરવામાં મદદ કરી શકે તેવા બે બિલ્ટ-ઇન ઘટકો પ્રદાન કરે છે:
-- `` for applying animations when an element or component is entering and leaving the DOM. This is covered on this page.
+- જ્યારે કોઈ એલિમેન્ટ અથવા કમ્પોનન્ટ DOM માં પ્રવેશી રહ્યું હોય (entering) અને બહાર નીકળી રહ્યું હોય (leaving) ત્યારે એનિમેશન લાગુ કરવા માટે ``. જે આ પેજ પર આવરી લેવામાં આવ્યું છે.
-- `` for applying animations when an element or component is inserted into, removed from, or moved within a `v-for` list. This is covered in [the next chapter](/guide/built-ins/transition-group).
+- જ્યારે કોઈ એલિમેન્ટ અથવા કમ્પોનન્ટ `v-for` લિસ્ટમાં દાખલ થાય, તેમાંથી દૂર કરવામાં આવે અથવા તેની અંદર ખસેડવામાં આવે ત્યારે એનિમેશન લાગુ કરવા માટે ``. આ [આગામી પ્રકરણમાં](/guide/built-ins/transition-group) આવરી લેવામાં આવ્યું છે.
-Aside from these two components, we can also apply animations in Vue using other techniques such as toggling CSS classes or state-driven animations via style bindings. These additional techniques are covered in the [Animation Techniques](/guide/extras/animation) chapter.
+આ બે ઘટકો સિવાય, આપણે Vue માં અન્ય તકનીકોનો ઉપયોગ કરીને પણ એનિમેશન લાગુ કરી શકીએ છીએ જેમ કે CSS ક્લાસ ટૉગલ કરવા અથવા સ્ટાઇલ બાઈન્ડિંગ્સ દ્વારા સ્ટેટ-ડ્રાઇવન એનિમેશન્સ. આ વધારાની તકનીકો [એનિમેશન તકનીકો (Animation Techniques)](/guide/extras/animation) પ્રકરણમાં આવરી લેવામાં આવી છે.
-## The `` Component {#the-transition-component}
+## `` કમ્પોનન્ટ {#the-transition-component}
-`` is a built-in component: this means it is available in any component's template without having to register it. It can be used to apply enter and leave animations on elements or components passed to it via its default slot. The enter or leave can be triggered by one of the following:
+`` એ એક બિલ્ટ-ઇન ઘટક છે: આનો અર્થ એ છે કે તે કોઈપણ ઘટકના ટેમ્પલેટમાં તેને રજીસ્ટર કર્યા વિના ઉપલબ્ધ છે. તેનો ઉપયોગ તેના ડિફોલ્ટ સ્લોટ દ્વારા પસાર કરાયેલા એલિમેન્ટ્સ અથવા કમ્પોનન્ટ્સ પર એન્ટર (enter) અને લીવ (leave) એનિમેશન લાગુ કરવા માટે થઈ શકે છે. પ્રવેશવું અથવા છોડવું નીચેનામાંથી એક દ્વારા ટ્રિગર થઈ શકે છે:
-- Conditional rendering via `v-if`
-- Conditional display via `v-show`
-- Dynamic components toggling via the `` special element
-- Changing the special `key` attribute
+- `v-if` દ્વારા કન્ડિશનલ રેન્ડરિંગ
+- `v-show` દ્વારા કન્ડિશનલ ડિસ્પ્લે
+- `` સ્પેશિયલ એલિમેન્ટ દ્વારા ડાયનેમિક કમ્પોનન્ટ્સ ટૉગલિંગ
+- સ્પેશિયલ `key` એટ્રિબ્યુટ બદલવું
-This is an example of the most basic usage:
+આ સૌથી મૂળભૂત વપરાશનું ઉદાહરણ છે:
```vue-html
-
hello
+
હેલો!
```
```css
-/* we will explain what these classes do next! */
+/* અમે આગળ સમજાવીશું કે આ ક્લાસ શું કરે છે! */
.v-enter-active,
.v-leave-active {
transition: opacity 0.5s ease;
@@ -53,54 +53,54 @@ This is an example of the most basic usage:
-[Try it in the Playground](https://play.vuejs.org/#eNpVkEFuwyAQRa8yZZNWqu1sunFJ1N4hSzYUjRNUDAjGVJHluxcCipIV/OG/pxEr+/a+TwuykfGogvYEEWnxR2H17F0gWCHgBBtMwc2wy9WdsMIqZ2OuXtwfHErhlcKCb8LyoVoynwPh7I0kzAmA/yxEzsKXMlr9HgRr9Es5BTue3PlskA+1VpFTkDZq0i3niYfU6anRmbqgMY4PZeH8OjwBfHhYIMdIV1OuferQEoZOKtIJ328TgzJhm8BabHR3jeC8VJqusO8/IqCM+CnsVqR3V/mfRxO5amnkCPuK5B+6rcG2fydshks=)
+[Playground માં તે અજમાવી જુઓ](https://play.vuejs.org/#eNpVkEFuwyAQRa8yZZNWqu1sunFJ1N4hSzYUjRNUDAjGVJHluxcCipIV/OG/pxEr+/a+TwuykfGogvYEEWnxR2H17F0gWCHgBBtMwc2wy9WdsMIqZ2OuXtwfHErhlcKCb8LyoVoynwPh7I0kzAmA/yxEzsKXMlr9HgRr9Es5BTue3PlskA+1VpFTkDZq0i3niYfU6anRmbqgMY4PZeH8OjwBfHhYIMdIV1OuferQEoZOKtIJ328TgzJhm8BabHR3jeC8VJqusO8/IqCM+CnsVqR3V/mfRxO5amnkCPuK5B+6rcG2fydshks=)
-[Try it in the Playground](https://play.vuejs.org/#eNpVkMFuAiEQhl9lyqlNuouXXrZo2nfwuBeKs0qKQGBAjfHdZZfVrAmB+f/M/2WGK/v1vs0JWcdEVEF72vQWz94Fgh0OMhmCa28BdpLk+0etAQJSCvahAOLBnTqgkLA6t/EpVzmCP7lFEB69kYRFAYi/ROQs/Cij1f+6ZyMG1vA2vj3bbN1+b1Dw2lYj2yBt1KRnXRwPudHDnC6pAxrjBPe1n78EBF8MUGSkixnLNjdoCUMjFemMn5NjUGacnboqPVkdOC+Vpgus2q8IKCN+T+suWENwxyWJXKXMyQ5WNVJ+aBqD3e6VSYoi)
+[Playground માં તે અજમાવી જુઓ](https://play.vuejs.org/#eNpVkMFuAiEQhl9lyqlNuouXXrZo2nfwuBeKs0qKQGBAjfHdZZfVrAmB+f/M/2WGK/v1vs0JWcdEVEF72vQWz94Fgh0OMhmCa28BdpLk+0etAQJSCvahAOLBnTqgkLA6t/EpVzmCP7lFEB69kYRFAYi/ROQs/Cij1f+6ZyMG1vA2vj3bbN1+b1Dw2lYj2yBt1KRnXRwPudHDnC6pAxrjBPe1n78EBF8MUGSkixnLNjdoCUMjFemMn5NjUGacnboqPVkdOC+Vpgus2q8IKCN+T+suWENwxyWJXKXMyQ5WNVJ+aBqD3e6VSYoi)
:::tip
-`` only supports a single element or component as its slot content. If the content is a component, the component must also have only one single root element.
+`` તેના સ્લોટ કન્ટેન્ટ તરીકે માત્ર સિંગલ એલિમેન્ટ અથવા કમ્પોનન્ટને સપોર્ટ કરે છે. જો કન્ટેન્ટ કમ્પોનન્ટ હોય, તો કમ્પોનન્ટમાં પણ માત્ર એક જ રૂટ એલિમેન્ટ હોવો જોઈએ.
:::
-When an element in a `` component is inserted or removed, this is what happens:
+જ્યારે `` કમ્પોનન્ટમાં કોઈ એલિમેન્ટ દાખલ કરવામાં આવે અથવા દૂર કરવામાં આવે, ત્યારે આ થાય છે:
-1. Vue will automatically sniff whether the target element has CSS transitions or animations applied. If it does, a number of [CSS transition classes](#transition-classes) will be added / removed at appropriate timings.
+૧. Vue આપમેળે તે જોશે કે ટાર્ગેટ એલિમેન્ટમાં CSS ટ્રાન્ઝિશન અથવા એનિમેશન લાગુ કરવામાં આવ્યા છે કે નહીં. જો એમ હોય, તો યોગ્ય સમયે સંખ્યાબંધ [CSS ટ્રાન્ઝિશન ક્લાસીસ](#transition-classes) ઉમેરવામાં / દૂર કરવામાં આવશે.
-2. If there are listeners for [JavaScript hooks](#javascript-hooks), these hooks will be called at appropriate timings.
+૨. જો [JavaScript હૂક્સ](#javascript-hooks) માટે લિસનર્સ હોય, તો આ હૂક્સ યોગ્ય સમયે કૉલ કરવામાં આવશે.
-3. If no CSS transitions / animations are detected and no JavaScript hooks are provided, the DOM operations for insertion and/or removal will be executed on the browser's next animation frame.
+૩. જો કોઈ CSS ટ્રાન્ઝિશન / એનિમેશન શોધી શકાતું નથી અને કોઈ JavaScript હૂક્સ આપવામાં આવ્યા નથી, તો ઇન્સર્શન (insertion) અને/અથવા રિમૂવલ (removal) માટેના DOM ઓપરેશન્સ બ્રાઉઝરની આગામી એનિમેશન ફ્રેમ પર અમલમાં આવશે.
-## CSS-Based Transitions {#css-based-transitions}
+## CSS-આધારિત ટ્રાન્ઝિશન {#css-based-transitions}
-### Transition Classes {#transition-classes}
+### ટ્રાન્ઝિશન ક્લાસીસ (Transition Classes) {#transition-classes}
-There are six classes applied for enter / leave transitions.
+એન્ટર / લીવ ટ્રાન્ઝિશન માટે છ ક્લાસીસ લાગુ કરવામાં આવે છે.
-
+
-1. `v-enter-from`: Starting state for enter. Added before the element is inserted, removed one frame after the element is inserted.
+૧. `v-enter-from`: એન્ટર માટે પ્રારંભિક અવસ્થા. એલિમેન્ટ દાખલ થાય તે પહેલાં ઉમેરવામાં આવે છે, જે એલિમેન્ટ દાખલ થયાની એક ફ્રેમ પછી દૂર કરવામાં આવે છે.
-2. `v-enter-active`: Active state for enter. Applied during the entire entering phase. Added before the element is inserted, removed when the transition/animation finishes. This class can be used to define the duration, delay and easing curve for the entering transition.
+૨. `v-enter-active`: એન્ટર માટે એક્ટિવ સ્ટેટ. સમગ્ર પ્રવેશના તબક્કા (entering phase) દરમિયાન લાગુ કયારે આવે છે. એલિમેન્ટ દાખલ થાય તે પહેલાં ઉમેરવામાં આવે છે, ટ્રાન્ઝિશન/એનિમેશન સમાપ્ત થાય ત્યારે દૂર કરવામાં આવે છે. આ ક્લાસનો ઉપયોગ પ્રવેશ ટ્રાન્ઝિશન માટે ડ્યુરેશન (duration), વિલંબ (delay) અને ઇઝિંગ કર્વ (easing curve) વ્યાખ્યાયિત કરવા માટે થઈ શકે છે.
-3. `v-enter-to`: Ending state for enter. Added one frame after the element is inserted (at the same time `v-enter-from` is removed), removed when the transition/animation finishes.
+૩. `v-enter-to`: એન્ટર માટે અંતિમ સ્થિતિ. એલિમેન્ટ દાખલ થયાની એક ફ્રેમ પછી ઉમેરવામાં આવે છે (જે જ સમયે `v-enter-from` દૂર કરવામાં આવે છે), ટ્રાન્ઝિશન/એનિમેશન સમાપ્ત થાય ત્યારે દૂર કરવામાં આવે છે.
-4. `v-leave-from`: Starting state for leave. Added immediately when a leaving transition is triggered, removed after one frame.
+૪. `v-leave-from`: લીવ માટે પ્રારંભિક સ્થિતિ. જ્યારે લીવિંગ ટ્રાન્ઝિશન ટ્રિગર થાય ત્યારે તરત જ ઉમેરવામાં આવે છે, એક ફ્રેમ પછી દૂર કરવામાં આવે છે.
-5. `v-leave-active`: Active state for leave. Applied during the entire leaving phase. Added immediately when a leaving transition is triggered, removed when the transition/animation finishes. This class can be used to define the duration, delay and easing curve for the leaving transition.
+૫. `v-leave-active`: લીવ માટે એક્ટિવ સ્ટેટ. સમગ્ર બહાર નીકળવાના તબક્કા (leaving phase) દરમિયાન લાગુ કરવામાં આવે છે. જ્યારે લીવિંગ ટ્રાન્ઝિશન ટ્રિગર થાય ત્યારે તરત જ ઉમેરવામાં આવે છે, ટ્રાન્ઝિશન/એનિમેશન સમાપ્ત થાય ત્યારે દૂર કરવામાં આવે છે. આ ક્લાસનો ઉપયોગ બહાર નીકળતા ટ્રાન્ઝિશન માટે સમયગાળો, વિલંબ અને ઇઝિંગ કર્વ વ્યાખ્યાયિત કરવા માટે થઈ શકે છે.
-6. `v-leave-to`: Ending state for leave. Added one frame after a leaving transition is triggered (at the same time `v-leave-from` is removed), removed when the transition/animation finishes.
+૬. `v-leave-to`: લીવ માટે અંતિમ સ્થિતિ. જ્યારે લીવિંગ ટ્રાન્ઝિશન ટ્રિગર થાય તેની એક ફ્રેમ પછી ઉમેરવામાં આવે છે (તે જ સમયે `v-leave-from` દૂર કરવામાં આવે છે), ટ્રાન્ઝિશન/એનિમેશન સમાપ્ત થાય ત્યારે દૂર કરવામાં આવે છે.
-`v-enter-active` and `v-leave-active` give us the ability to specify different easing curves for enter / leave transitions, which we'll see an example of in the following sections.
+`v-enter-active` અને `v-leave-active` અમને એન્ટર / લીવ ટ્રાન્ઝિશન માટે અલગ-અલગ ઇઝિંગ કર્વ્સ સ્પષ્ટ કરવાની ક્ષમતા આપે છે, જેનું ઉદાહરણ આપણે આગામી વિભાગોમાં જોઈશું.
-### Named Transitions {#named-transitions}
+### નામવાળા ટ્રાન્ઝિશન (Named Transitions) {#named-transitions}
-A transition can be named via the `name` prop:
+`name` પ્રોપ દ્વારા ટ્રાન્ઝિશનને નામ આપી શકાય છે:
```vue-html
@@ -108,7 +108,7 @@ A transition can be named via the `name` prop:
```
-For a named transition, its transition classes will be prefixed with its name instead of `v`. For example, the applied class for the above transition will be `fade-enter-active` instead of `v-enter-active`. The CSS for the fade transition should look like this:
+નામવાળા ટ્રાન્ઝિશન માટે, તેના ટ્રાન્ઝિશન ક્લાસીસ `v` ને બદલે તેના નામથી શરૂ થશે. ઉદાહરણ તરીકે, ઉપરોક્ત ટ્રાન્ઝિશન માટે લાગુ શૈલી `v-enter-active` ને બદલે `fade-enter-active` હશે. ફેડ ટ્રાન્ઝિશન માટેનું CSS આના જેવું દેખાવું જોઈએ:
```css
.fade-enter-active,
@@ -122,22 +122,22 @@ For a named transition, its transition classes will be prefixed with its name in
}
```
-### CSS Transitions {#css-transitions}
+### CSS ટ્રાન્ઝિશન (CSS Transitions) {#css-transitions}
-`` is most commonly used in combination with [native CSS transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions), as seen in the basic example above. The `transition` CSS property is a shorthand that allows us to specify multiple aspects of a transition, including properties that should be animated, duration of the transition, and [easing curves](https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function).
+મૂળભૂત ઉદાહરણમાં જોયું તેમ `` નો સૌથી સામાન્ય રીતે [નેટિવ CSS ટ્રાન્ઝિશન](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions) ના સંયોજનમાં ઉપયોગ કરવામાં આવે છે. `transition` CSS પ્રોપર્ટી એક શોર્ટહેન્ડ છે જે આપણને એનિમેટેડ પ્રોપર્ટીઝ, ટ્રાન્ઝિશનનો સમયગાળો અને [ઇઝિંગ કર્વ્સ (easing curves)](https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function) સહિત ટ્રાન્ઝિશનના બહુવિધ પાસાઓને સ્પષ્ટ કરવાની મંજૂરી આપે છે.
-Here is a more advanced example that transitions multiple properties, with different durations and easing curves for enter and leave:
+અહીં એક વધુ અદ્યતન ઉદાહરણ છે જે બહુવિધ પ્રોપર્ટીઝનું ટ્રાન્ઝિશન કરે છે, જેમાં પ્રવેશવા અને બહાર નીકળવા માટે અલગ-અલગ ડ્યુરેશન અને ઇઝિંગ કર્વ્સ છે:
```vue-html
-
hello
+
હેલો!
```
```css
/*
- Enter and leave animations can use different
- durations and timing functions.
+ એન્ટર અને લીવ એનિમેશન વિવિધ સમયગાળા (durations)
+ અને ટાઇમિંગ ફંક્શન્સનો ઉપયોગ કરી શકે છે.
*/
.slide-fade-enter-active {
transition: all 0.3s ease-out;
@@ -158,25 +158,25 @@ Here is a more advanced example that transitions multiple properties, with diffe
-[Try it in the Playground](https://play.vuejs.org/#eNqFkc9uwjAMxl/F6wXQKIVNk1AX0HbZC4zDDr2E4EK0NIkStxtDvPviFQ0OSFzyx/m+n+34kL16P+lazMpMRBW0J4hIrV9WVjfeBYIDBKzhCHVwDQySdFDZyipnY5Lu3BcsWDCk0OKosqLoKcmfLoSNN5KQbyTWLZGz8KKMVp+LKju573ivsuXKbbcG4d3oDcI9vMkNiqL3JD+AWAVpoyadGFY2yATW5nVSJj9rkspDl+v6hE/hHRrjRMEdpdfiDEkBUVxWaEWkveHj5AzO0RKGXCrSHcKBIfSPKEEaA9PJYwSUEXPX0nNlj8y6RBiUHd5AzCOodq1VvsYfjWE4G6fgEy/zMcxG17B9ZTyX8bV85C5y1S40ZX/kdj+GD1P/zVQA56XStC9h2idJI/z7huz4CxoVvE4=)
+[Playground માં તે અજમાવી જુઓ](https://play.vuejs.org/#eNqFkc9uwjAMxl/F6wXQKIVNk1AX0HbZC4zDDr2E4EK0NIkStxtDvPviFQ0OSFzyx/m+n+34kL16P+lazMpMRBW0J4hIrV9WVjfeBYIDBKzhCHVwDQySdFDZyipnY5Lu3BcsWDCk0OKosqLoKcmfLoSNN5KQbyTWLZGz8KKMVp+LKju573ivsuXKbbcG4d3oDcI9vMkNiqL3JD+AWAVpoyadGFY2yATW5nVSJj9rkspDl+v6hE/hHRrjRMEdpdfiDEkBUVxWaEWkveHj5AzO0RKGXCrSHcKBIfSPKEEaA9PJYwSUEXPX0nNlj8y6RBiUHd5AzCOodq1VvsYfjWE4G6fgEy/zMcxG17B9ZTyX8bV85C5y1S40ZX/kdj+GD1P/zVQA56XStC9h2idJI/z7huv4CxoVvE4=)
-[Try it in the Playground](https://play.vuejs.org/#eNqFkc1uwjAMgF/F6wk0SmHTJNQFtF32AuOwQy+hdSFamkSJ08EQ776EbMAkJKTIf7I/O/Y+ezVm3HvMyoy52gpDi0rh1mhL0GDLvSTYVwqg4cQHw2QDWCRv1Z8H4Db6qwSyHlPkEFUQ4bHixA0OYWckJ4wesZUn0gpeainqz3mVRQzM4S7qKlss9XotEd6laBDu4Y03yIpUE+oB2NJy5QSJwFC8w0iIuXkbMkN9moUZ6HPR/uJDeINSalaYxCjOkBBgxeWEijnayWiOz+AcFaHNeU2ix7QCOiFK4FLCZPzoALnDXHt6Pq7hP0Ii7/EGYuag9itR5yv8FmgH01EIPkUxG8F0eA2bJmut7kbX+pG+6NVq28WTBTN+92PwMDHbSAXQhteCdiVMUpNwwuMassMP8kfAJQ==)
+[Playground માં તે અજમાવી જુઓ](https://play.vuejs.org/#eNqFkc1uwjAMgF/F6wk0SmHTJNQFtF32AuOwQy+hdSFamkSJ08EQ776EbMAkJKTIf7I/O/Y+ezVm3HvMyoy52gpDi0rh1mhL0GDLvSTYVwqg4cQHw2QDWCRv1Z8H4Db6qwSyHlPkEFUQ4bHixA0OYWckJ4wesZUn0gpeainqz3mVRQzM4S7qKlss9XotEd6laBDu4Y03yIpUE+oB2NJy5QSJwFC8w0iIuXkbMkN9moUZ6HPR/uJDeINSalaYxCjOkBBgxeWEijnayWiOz+AcFaHNeU2ix7QCOiFK4FLCZPzoALnDXHt6Pq7hP0Ii7/EGYuag9itR5yv8FmgH01EIPkUxG8F0eA2bJmut7kbX+pG+6NVq28WTBTN+92PwMDHbSAXQhteCdiVMUpNwwuMassMP8kfAJQ==)
-### CSS Animations {#css-animations}
+### CSS એનિમેશન્સ (CSS Animations) {#css-animations}
-[Native CSS animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations) are applied in the same way as CSS transitions, with the difference being that `*-enter-from` is not removed immediately after the element is inserted, but on an `animationend` event.
+[નેટિવ CSS એનિમેશન્સ](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations) CSS ટ્રાન્ઝિશનની જેમ જ લાગુ કરવામાં આવે છે, તફાવત એ છે કે એલિમેન્ટ દાખલ થયા પછી તરત જ `*-enter-from` દૂર કરવામાં આવતું નથી, પરંતુ `animationend` ઇવેન્ટ પર દૂર કરવામાં આવે છે.
-For most CSS animations, we can simply declare them under the `*-enter-active` and `*-leave-active` classes. Here's an example:
+મોટાભાગના CSS એનિમેશન્સ માટે, આપણે તેને ફક્ત `*-enter-active` અને `*-leave-active` ક્લાસ હેઠળ જાહેર કરી શકીએ છીએ. અહીં એક ઉદાહરણ છે:
```vue-html
- Hello here is some bouncy text!
+ હેલો અહીં કેટલીક ઉછળતી ટેક્સ્ટ છે!
```
@@ -205,18 +205,18 @@ For most CSS animations, we can simply declare them under the `*-enter-active` a
-[Try it in the Playground](https://play.vuejs.org/#eNqNksGOgjAQhl9lJNmoBwRNvCAa97YP4JFLbQZsLG3TDqzG+O47BaOezCYkpfB9/0wHbsm3c4u+w6RIyiC9cgQBqXO7yqjWWU9wA4813KH2toUpo9PKVEZaExg92V/YRmBGvsN5ZcpsTGGfN4St04Iw7qg8dkTWwF5qJc/bKnnYk7hWye5gm0ZjmY0YKwDlwQsTFCnWjGiRpaPtjETG43smHPSpqh9pVQKBrjpyrfCNMilZV8Aqd5cNEF4oFVo1pgCJhtBvnjEAP6i1hRN6BBUg2BZhKHUdvMmjWhYHE9dXY/ygzN4PasqhB75djM2mQ7FUSFI9wi0GCJ6uiHYxVsFUGcgX67CpzP0lahQ9/k/kj9CjDzgG7M94rT1PLLxhQ0D+Na4AFI9QW98WEKTQOMvnLAOwDrD+wC0Xq/Ubusw/sU+QL/45hskk9z8Bddbn)
+[Playground માં તે અજમાવી જુઓ](https://play.vuejs.org/#eNqNksGOgjAQhl9lJNmoBwRNvCAa97YP4JFLbQZsLG3TDqzG+O47BaOezCYkpfB9/0wHbsm3c4u+w6RIyiC9cgQBqXO7yqjWWU9wA4813KH2toUpo9PKVEZaExg92V/YRmBGvsN5ZcpsTGGfN4St04Iw7qg8dkTWwF5qJc/bKnnYk7hWye5gm0ZjmY0YKwDlwQsTFCnWjGiRpaPtjETG43smHPSpqh9pVQKBrjpyrfCNMilZV8Aqd5cNEF4oFVo1pgCJhtBvnjEAP6i1hRN6BBUg2BZhKHUdvMmjWhYHE9dXY/ygzN4PasqhB75djM2mQ7FUSFI9wi0GCJ6uiHYxVsFUGcgX67CpzP0lahQ9/k/kj9CjDzgG7M94rT1PLLxhQ0D+Na4AFI9QW98WEKTQOMvnLAOwDrD+wC0Xq/Ubusw/sU+QL/45hskk9z8Bddbn)
-[Try it in the Playground](https://play.vuejs.org/#eNqNUs2OwiAQfpWxySZ66I8mXioa97YP4LEXrNNKpEBg2tUY330pqOvJmBBgyPczP1yTb2OyocekTJirrTC0qRSejbYEB2x4LwmulQI4cOLTWbwDWKTeqkcE4I76twSyPcaX23j4zS+WP3V9QNgZyQnHiNi+J9IKtrUU9WldJaMMrGEynlWy2em2lcjyCPMUALazXDlBwtMU79CT9rpXNXp4tGYGhlQ0d7UqAUcXOeI6bluhUtKmhEVhzisgPFPKpWhVCTUqQrt6ygD8oJQajmgRhAOnO4RgdQm8yd0tNzGv/D8x/8Dy10IVCzn4axaTTYNZymsSA8YuciU6PrLL6IKpUFBkS7cKXXwQJfIBPyP6IQ1oHUaB7QkvjfUdcy+wIFB8PeZIYwmNtl0JruYSp8XMk+/TXL7BzbPF8gU6L95hn8D4OUJnktsfM1vavg==)
+[Playground માં તે અજમાવી જુઓ](https://play.vuejs.org/#eNqNUs2OwiAQfpWxySZ66I8mXioa97YP4LEXrNNKpEBg2tUY330pqOvJmBBgyPczP1yTb2OyocekTJirrTC0qRSejbYEB2x4LwmulQI4cOLTWbwDWKTeqkcE4I76twSyPcaX23j4zS+WP3V9QNgZyQnHiNi+J9IKtrUU9WldJaMMrGEynlWy2em2lcjyCPMUALazXDlBwtMU79CT9rpXNXp4tGYGhlQ0d7UqAUcXOeI6bluhUtKmhEvhzisgPFPKpWhVCTUqQrt6ygD8oJQajmgRhAOnO4RgdQm8yd0tNzGv/D8x/8Dy10IVCzn4axaTTYNZymsSA8YuciU6PrLL6IKpUFBkS7cKXXwQJfIBPyP6IQ1oHUaB7QkvjfUdcy+wIFB8PeZIYwmNtl0JruYSp8XMk+/TXL7BzbPF8gU6L95hn8D4OUJnktsfM1vavg==)
-### Custom Transition Classes {#custom-transition-classes}
+### કસ્ટમ ટ્રાન્ઝિશન ક્લાસીસ (Custom Transition Classes) {#custom-transition-classes}
-You can also specify custom transition classes by passing the following props to ``:
+તમે `` ને નીચેના પ્રોપ્સ પસાર કરીને કસ્ટમ ટ્રાન્ઝિશન ક્લાસીસ પણ સ્પષ્ટ કરી શકો છો:
- `enter-from-class`
- `enter-active-class`
@@ -225,56 +225,56 @@ You can also specify custom transition classes by passing the following props to
- `leave-active-class`
- `leave-to-class`
-These will override the conventional class names. This is especially useful when you want to combine Vue's transition system with an existing CSS animation library, such as [Animate.css](https://daneden.github.io/animate.css/):
+આ પરંપરાગત ક્લાસ નામોને ઓવરરાઇડ કરશે. આ ખાસ કરીને ઉપયોગી છે જ્યારે તમે Vue ની ટ્રાન્ઝિશન સિસ્ટમને અસ્તિત્વમાં હોય તેવી CSS એનિમેશન લાઇબ્રેરી સાથે જોડવા માંગતા હો, જેમ કે [Animate.css](https://daneden.github.io/animate.css/):
```vue-html
-
+
-
hello
+
હેલો!
```
-[Try it in the Playground](https://play.vuejs.org/#eNqNUctuwjAQ/BXXF9oDsZB6ogbRL6hUcbSEjLMhpn7JXtNWiH/vhqS0R3zxPmbWM+szf02pOVXgSy6LyTYhK4A1rVWwPsWM7MwydOzCuhw9mxF0poIKJoZC0D5+stUAeMRc4UkFKcYpxKcEwSenEYYM5b4ixsA2xlnzsVJ8Yj8Mt+LrbTwcHEgxwojCmNxmHYpFG2kaoxO0B2KaWjD6uXG6FCiKj00ICHmuDdoTjD2CavJBCna7KWjZrYK61b9cB5pI93P3sQYDbxXf7aHHccpVMolO7DS33WSQjPXgXJRi2Cl1xZ8nKkjxf0dBFvx2Q7iZtq94j5jKUgjThmNpjIu17ZzO0JjohT7qL+HsvohJWWNKEc/NolncKt6Goar4y/V7rg/wyw9zrLOy)
+[Playground માં તે અજમાવી જુઓ](https://play.vuejs.org/#eNqNUctuwjAQ/BXXF9oDsZB6ogbRL6hUcbSEjLMhpn7JXtNWiH/vhqS0R3zxPmbWM+szf02pOVXgSy6LyTYhK4A1rVWwPsWM7MwydOzCuhw9mxF0poIKJoZC0D5+stUAeMRc4UkFKcYpxKcEwSenEYYM5b4ixsA2xlnzsVJ8Yj8Mt+LrbTwcHEgxwojCmNxmHYpFG2kaoxO0B2KaWjD6uXG6FCiKj00ICHmuDdoTjD2CavJBCna7KWjZrYK61b9cB5pI93P3sQYDbxXf7aHHccpVMolO7DS33WSQjPXgXJRi2Cl1xZ8nKkjxf0dBFvx2Q7iZtq94j5jKUgjThmNpjIu17ZzO0JjohT7qL+HsvohJWWNKEc/NolncKt6Goar4y/V7rg/wyw9zrLOy)
-[Try it in the Playground](https://play.vuejs.org/#eNqNUcFuwjAM/RUvp+1Ao0k7sYDYF0yaOFZCJjU0LE2ixGFMiH9f2gDbcVKU2M9+tl98Fm8hNMdMYi5U0tEEXraOTsFHho52mC3DuXUAHTI+PlUbIBLn6G4eQOr91xw4ZqrIZXzKVY6S97rFYRqCRabRY7XNzN7BSlujPxetGMvAAh7GtxXLtd/vLSlZ0woFQK0jumTY+FJt7ORwoMLUObEfZtpiSpRaUYPkmOIMNZsj1VhJRWeGMsFmczU6uCOMHd64lrCQ/s/d+uw0vWf+MPuea5Vp5DJ0gOPM7K4Ci7CerPVKhipJ/moqgJJ//8ipxN92NFdmmLbSip45pLmUunOH1Gjrc7ezGKnRfpB4wJO0ZpvkdbJGpyRfmufm+Y4Mxo1oK16n9UwNxOUHwaK3iQ==)
+[Playground માં તે અજમાવી જુઓ](https://play.vuejs.org/#eNqNUcFuwjAM/RUvp+1Ao0k7sYDYF0yaOFZCJjU0LE2ixGFMiH9f2gDbcVKU2M9+tl98Fm8hNMdMYi5U0tEEXraOTsFHho52mC3DuXUAHTI+PlUbIBLn6G4eQOr91xw4ZqrIZXzKVY6S97rFYRqCRabRY7XNzN7BSlujPxetGMvAAh7GtxXLtd/vLSlZ0woFQK0jumTY+FJt7ORwoMLUObEfZtpiSpRaUYPkmOIMNZsj1VhJRWeGMsFmczU6uCOMHd64lrCQ/s/d+uw0vWf+MPuea5Vp5DJ0gOPM7K4Ci7CerPVKhipJ/moqgJJ//8ipxN92NFdmmLbSip45pLmUunOH1Gjrc7ezGKnRfpB4wJO0ZpvkdbJGpyRfmufm+Y4Mxo1oK16n9UwNxOUHwaK3iQ==)
-### Using Transitions and Animations Together {#using-transitions-and-animations-together}
+### ટ્રાન્ઝિશન અને એનિમેશનનો સાથે ઉપયોગ {#using-transitions-and-animations-together}
-Vue needs to attach event listeners in order to know when a transition has ended. It can either be `transitionend` or `animationend`, depending on the type of CSS rules applied. If you are only using one or the other, Vue can automatically detect the correct type.
+ટ્રાન્ઝિશન ક્યારે સમાપ્ત થયું તે જાણવા માટે Vue એ ઇવેન્ટ લિસનર્સ જોડવાની જરૂર છે. તે લાગુ કરેલ CSS નિયમોના પ્રકાર પર આધાર રાખીને `transitionend` અથવા `animationend` હોઈ શકે છે. જો તમે માત્ર એક અથવા બીજાનો ઉપયોગ કરી રહ્યાં છો, તો Vue આપમેળે સાચો પ્રકાર શોધી શકે છે.
-However, in some cases you may want to have both on the same element, for example having a CSS animation triggered by Vue, along with a CSS transition effect on hover. In these cases, you will have to explicitly declare the type you want Vue to care about by passing the `type` prop, with a value of either `animation` or `transition`:
+જો કે, કેટલાક કિસ્સાઓમાં તમે સમાન ઘટક પર બંને રાખવા ઈચ્છી શકો છો, ઉદાહરણ તરીકે Vue દ્વારા ટ્રિગર કરાયેલ CSS એનિમેશન હોવું, તેની સાથે હોવર (hover) પર CSS ટ્રાન્ઝિશન ઇફેક્ટ હોવી. આ કિસ્સાઓમાં, તમારે `type` પ્રોપ પાસ કરીને Vue જેની કાળજી લેવા માંગતા હોય તે પ્રકાર સ્પષ્ટપણે જાહેર કરવો પડશે, જેમાં `animation` અથવા `transition` ની કિંમત હશે:
```vue-html
...
```
-### Nested Transitions and Explicit Transition Durations {#nested-transitions-and-explicit-transition-durations}
+### નેસ્ટેડ ટ્રાન્ઝિશન અને સ્પષ્ટ ટ્રાન્ઝિશન ડ્યુરેશન્સ {#nested-transitions-and-explicit-transition-durations}
-Although the transition classes are only applied to the direct child element in ``, we can transition nested elements using nested CSS selectors:
+જોકે ટ્રાન્ઝિશન ક્લાસીસ માત્ર `` માં બાળ (child) એલિમેન્ટ પર લાગુ કરવામાં આવે છે, આપણે નેસ્ટેડ CSS સિલેક્ટર્સનો ઉપયોગ કરીને નેસ્ટેડ એલિમેન્ટ્સનું ટ્રાન્ઝિશન કરી શકીએ છીએ:
```vue-html
- Hello
+ હેલો!
```
```css
-/* rules that target nested elements */
+/* નેસ્ટેડ એલિમેન્ટ્સને ટાર્ગેટ કરતા નિયમો */
.nested-enter-active .inner,
.nested-leave-active .inner {
transition: all 0.3s ease-in-out;
@@ -286,21 +286,21 @@ Although the transition classes are only applied to the direct child element in
opacity: 0;
}
-/* ... other necessary CSS omitted */
+/* ... જરૂર મુજબ અન્ય CSS */
```
-We can even add a transition delay to the nested element on enter, which creates a staggered enter animation sequence:
+અમે પ્રવેશ પર નેસ્ટેડ એલિમેન્ટમાં ટ્રાન્ઝિશન વિલંબ (delay) પણ ઉમેરી શકીએ છીએ, જે સ્ટેગર્ડ (staggered) એન્ટર એનિમેશન સિક્વન્સ બનાવે છે:
```css{3}
-/* delay enter of nested element for staggered effect */
+/* સ્ટેગર્ડ અસર માટે નેસ્ટેડ એલિમેન્ટના એન્ટરમાં વિલંબ કરો */
.nested-enter-active .inner {
transition-delay: 0.25s;
}
```
-However, this creates a small issue. By default, the `` component attempts to automatically figure out when the transition has finished by listening to the **first** `transitionend` or `animationend` event on the root transition element. With a nested transition, the desired behavior should be waiting until the transitions of all inner elements have finished.
+જો કે, આ એક નાની સમસ્યા ઉભી કરે છે. ડિફોલ્ટ રૂપે, `` કમ્પોનન્ટ રૂટ ટ્રાન્ઝિશન એલિમેન્ટ પરની **પ્રથમ** `transitionend` અથવા `animationend` ઇવેન્ટને સાંભળીને ટ્રાન્ઝિશન ક્યારે સમાપ્ત થયું છે તે આપમેળે શોધવાનો પ્રયાસ કરે છે. નેસ્ટેડ ટ્રાન્ઝિશન સાથે, ઇચ્છિત વર્તન તમામ આંતરિક તત્વોના ટ્રાન્ઝિશન સમાપ્ત થાય ત્યાં સુધી રાહ જોવાનું હોવું જોઈએ.
-In such cases you can specify an explicit transition duration (in milliseconds) using the `duration` prop on the `` component. The total duration should match the delay plus transition duration of the inner element:
+આવા કિસ્સાઓમાં તમે `` કમ્પોનન્ટ પર `duration` પ્રોપનો ઉપયોગ કરીને સ્પષ્ટ ટ્રાન્ઝિશન ડ્યુરેશન (મિલિસેકન્ડમાં) સ્પષ્ટ કરી શકો છો. કુલ સમયગાળો વિલંબ ઉપરાંત આંતરિક તત્વના ટ્રાન્ઝિશન સમયગાળા સાથે મેળ ખાતો હોવો જોઈએ:
```vue-html
...
@@ -308,27 +308,27 @@ In such cases you can specify an explicit transition duration (in milliseconds)
-[Try it in the Playground](https://play.vuejs.org/#eNqVVd9v0zAQ/leO8LAfrE3HNKSFbgKmSYMHQNAHkPLiOtfEm2NHttN2mvq/c7bTNi1jgFop9t13d9995ziPyfumGc5bTLJkbLkRjQOLrm2uciXqRhsHj2BwBiuYGV3DAUEPcpUrrpUlaKUXcOkBh860eJSrcRqzUDxtHNaNZA5pBzCets5pBe+4FPz+Mk+66Bf+mSdXE12WEsdphMWQiWHKCicoLCtaw/yKIs/PR3kCitVIG4XWYUEJfATFFGIO84GYdRUIyCWzlra6dWg2wA66dgqlts7c+d8tSqk34JTQ6xqb9TjdUiTDOO21TFvrHqRfDkPpExiGKvBITjdl/L40ulVFBi8R8a3P17CiEKrM4GzULIOlFmpQoSgrl8HpKFpX3kFZu2y0BNhJxznvwaJCA1TEYcC4E3MkKp1VIptjZ43E3KajDJiUMBqeWUBmcUBUqJGYOT2GAiV7gJAA9Iy4GyoBKLH2z+N0W3q/CMC2yCCkyajM63Mbc+9z9mfvZD+b071MM23qLC69+j8PvX5HQUDdMC6cL7BOTtQXCJwpas/qHhWIBdYtWGgtDWNttWTmThu701pf1W6+v1Hd8Xbz+k+VQxmv8i7Fv1HZn+g/iv2nRkjzbd6npf/Rkz49DifQ3dLZBBYOJzC4rqgCwsUbmLYlCAUVU4XsCd1NrCeRHcYXb1IJC/RX2hEYCwJTvHYVMZoavbBI09FmU+LiFSzIh0AIXy1mqZiFKaKCmVhiEVJ7GftHZTganUZ56EYLL3FykjhL195MlMM7qxXdmEGDPOG6boRE86UJVPMki+p4H01WLz4Fm78hSdBo5xXy+yfsd3bpbXny1SA1M8c82fgcMyW66L75/hmXtN44a120ktDPOL+h1bL1HCPsA42DaPdwge3HcO/TOCb2ZumQJtA15Yl65Crg84S+BdfPtL6lezY8C3GkZ7L6Bc1zNR0=)
+[Playground માં તે અજમાવી જુઓ](https://play.vuejs.org/#eNqVVd9v0zAQ/leO8LAfrE3HNKSFbgKmSYMHQNAHkPLiOtfEm2NHttN2mvq/c7bTNi1jgFop9t13d9995ziPyfumGc5bTLJkbLkRjQOLrm2uciXqRhsHj2BwBiuYGV3DAUEPcpUrrpUlaKUXcOkBh860eJSrcRqzUDxtHNaNZA5pBzCets5pBe+4FPz+Mk+66Bf+mSdXE12WEsdphMWQiWHKCicoLCtaw/yKIs/PR3kCitVIG4XWYUEJfATFFGIO84GYdRUIyCWzlra6dWg2wA66dgqlts7c+d8tSqk34JTQ6xqb9TjdUiTDOO21TFvrHqRfDkPpExiGKvBITjdl/L40ulVFBi8R8a3P17CiEKrM4GzULIOlFmpQoSgrl8HpKFpX3kFZu2y0BNhJxznvwaJCA1TEYcC4E3MkKp1VIptjZ43E3KajDJiUMBqeWUBmcUBUqJGYOT2GAiV7gJAA9Iy4GyoBKLH2z+N0W3q/CMC2yCCkyajM63Mbc+9z9mfvZD+b071MM23qLC69+j8PvX5HQUDdMC6cL7BOTtQXCJwpas/qHhWIBdYtWGgtDWNttWTmThu701pf1W6+v1Hd8Xbz+k+VQxmv8i7Fv1HZn+g/iv2nRkjzbd6npf/Rkz49DifQ3dLZBBYOJzC4rqgCwsUbmLYlCAUVU4XsCd1NrCeRHcYXb1IJC/RX2hEYCwJTvHYVMZoavbBI09FmU+LiFSzIh0AIXy1mqZiFKaKCmVhiEVJ7GftHZTganUZ56EYLL3FykjhL195MlMM7qxXdmEGDPOG6boRE86UJVPMki+p4H01WLz4Fm78hSdBo5xXy+yfsd3bpbXny1SA1M8c82fgcMyW66L75/hmXtN44a120ktDPOL+h1bL1HCPsA42DaPdwge3HcO/TOCb2ZumQJtA15Yl65Crg84S+BdfPtL6lezY8C3GkZ7L6Bc1zNR0=)
-If necessary, you can also specify separate values for enter and leave durations using an object:
+જો જરૂરી હોય તો, તમે ઓબ્જેક્ટનો ઉપયોગ કરીને એન્ટર અને લીવ ડ્યુરેશન માટે અલગ વેલ્યુ પણ સ્પષ્ટ કરી શકો છો:
```vue-html
...
```
-### Performance Considerations {#performance-considerations}
+### પરફોર્મન્સ સંબંધિત બાબતો (Performance Considerations) {#performance-considerations}
-You may notice that the animations shown above are mostly using properties like `transform` and `opacity`. These properties are efficient to animate because:
+તમે નોંધશો કે મહાર બતાવેલા એનિમેશન મોટે ભાગે `transform` અને `opacity` જેવી પ્રોપર્ટીઝનો ઉપયોગ કરે છે. આ પ્રોપર્ટીઝ એનિમેટ કરવા માટે કાર્યક્ષમ છે કારણ કે:
-1. They do not affect the document layout during the animation, so they do not trigger expensive CSS layout calculation on every animation frame.
+૧. તેઓ એનિમેશન દરમિયાન દસ્તાવેજના લેઆઉટને અસર કરતા નથી, તેથી તેઓ દરેક એનિમેશન ફ્રેમ પર મોંઘા CSS લેઆઉટની ગણતરી (layout calculation) ટ્રિગર કરતા નથી.
-2. Most modern browsers can leverage GPU hardware acceleration when animating `transform`.
+૨. મોટાભાગના આધુનિક બ્રાઉઝર્સ `transform` ને એનિમેટ કરતી વખતે GPU હાર્ડવેર એક્સિલરેશનનો લાભ લઈ શકે છે.
-In comparison, properties like `height` or `margin` will trigger CSS layout, so they are much more expensive to animate, and should be used with caution.
+તેનાથી વિપરીત, `height` અથવા `margin` જેવી પ્રોપર્ટીઝ CSS લેઆઉટને ટ્રિગર કરશે, તેથી તેને એનિમેટ કરવા માટે ઘણું મોંઘું છે અને સાવચેતી સાથે ઉપયોગ કરવો જોઈએ.
-## JavaScript Hooks {#javascript-hooks}
+## JavaScript હૂક્સ (Hooks) {#javascript-hooks}
-You can hook into the transition process with JavaScript by listening to events on the `` component:
+તમે `` કમ્પોનન્ટ પરની ઇવેન્ટ્સ સાંભળીને JavaScript સાથે ટ્રાન્ઝિશન પ્રક્રિયામાં હૂક કરી શકો છો:
```vue-html
```js
-// called before the element is inserted into the DOM.
-// use this to set the "enter-from" state of the element
+// એલિમેન્ટને DOM માં દાખલ કરવામાં આવે તે પહેલાં કૉલ કરવામાં આવે છે.
+// એલિમેન્ટની "enter-from" સ્થિતિ સેટ કરવા માટે આનો ઉપયોગ કરો
function onBeforeEnter(el) {}
-// called one frame after the element is inserted.
-// use this to start the entering animation.
+// એલિમેન્ટ દાખલ થયાની એક ફ્રેમ પછી કૉલ કરવામાં આવે છે.
+// પ્રવેશી રહેલા (entering) એનિમેશનને શરૂ કરવા માટે આનો ઉપયોગ કરો.
function onEnter(el, done) {
- // call the done callback to indicate transition end
- // optional if used in combination with CSS
+ // ટ્રાન્ઝિશનનો અંત સૂચવવા માટે ડન (done) કોલબેકને કૉલ કરો
+ // જો CSS સાથે સંયોજનમાં ઉપયોગ કરવામાં આવે તો વૈકલ્પિક
done()
}
-// called when the enter transition has finished.
+// જ્યારે પ્રવેશ ટ્રાન્ઝિશન પૂર્ણ થાય ત્યારે કૉલ કરવામાં આવે છે.
function onAfterEnter(el) {}
-// called when the enter transition is cancelled before completion.
+// જ્યારે એન્ટર ટ્રાન્ઝિશન પૂર્ણ થાય તે પહેલાં રદ કરવામાં આવે ત્યારે કૉલ કરવામાં આવે છે.
function onEnterCancelled(el) {}
-// called before the leave hook.
-// Most of the time, you should just use the leave hook
+// લીવ હૂક પહેલાં કૉલ કરવામાં આવે છે.
+// મોટાભાગે, તમારે ફક્ત લીવ હૂકનો ઉપયોગ કરવો જોઈએ
function onBeforeLeave(el) {}
-// called when the leave transition starts.
-// use this to start the leaving animation.
+// જ્યારે બહાર નીકળવાનું (leave) ટ્રાન્ઝિશન શરૂ થાય ત્યારે કૉલ કરવામાં આવે છે.
+// લીવિંગ એનિમેશન શરૂ કરવા માટે આનો ઉપયોગ કરો.
function onLeave(el, done) {
- // call the done callback to indicate transition end
- // optional if used in combination with CSS
+ // ટ્રાન્ઝિશનનો અંત સૂચવવા માટે ડન (done) કોલબેકને કૉલ કરો
+ // જો CSS સાથે સંયોજનમાં ઉપયોગ કરવામાં આવે તો વૈકલ્પિક
done()
}
-// called when the leave transition has finished and the
-// element has been removed from the DOM.
+// જ્યારે લીવ ટ્રાન્ઝિશન સમાપ્ત થાય અને
+// એલિમેન્ટને DOM માંથી દૂર કરવામાં આવે ત્યારે કૉલ કરવામાં આવે છે.
function onAfterLeave(el) {}
-// only available with v-show transitions
+// ફક્ત v-show ટ્રાન્ઝિશન સાથે ઉપલબ્ધ છે
function onLeaveCancelled(el) {}
```
@@ -393,41 +393,41 @@ function onLeaveCancelled(el) {}
export default {
// ...
methods: {
- // called before the element is inserted into the DOM.
- // use this to set the "enter-from" state of the element
+ // એલિમેન્ટને DOM માં દાખલ કરવામાં આવે તે પહેલાં કૉલ કરવામાં આવે છે.
+ // એલિમેન્ટની "enter-from" સ્થિતિ સેટ કરવા માટે આનો ઉપયોગ કરો
onBeforeEnter(el) {},
- // called one frame after the element is inserted.
- // use this to start the animation.
+ // એલિમેન્ટ દાખલ થયાની એક ફ્રેમ પછી કૉલ કરવામાં આવે છે.
+ // એનિમેશન શરૂ કરવા માટે આનો ઉપયોગ કરો.
onEnter(el, done) {
- // call the done callback to indicate transition end
- // optional if used in combination with CSS
+ // ટ્રાન્ઝિશનનો અંત સૂચવવા માટે ડન (done) કોલબેકને કૉલ કરો
+ // જો CSS સાથે સંયોજનમાં ઉપયોગ કરવામાં આવે તો વૈકલ્પિક
done()
},
- // called when the enter transition has finished.
+ // જ્યારે પ્રવેશ ટ્રાન્ઝિશન પૂર્ણ થાય ત્યારે કૉલ કરવામાં આવે છે.
onAfterEnter(el) {},
- // called when the enter transition is cancelled before completion.
+ // જ્યારે એન્ટર ટ્રાન્ઝિશન પૂર્ણ થાય તે પહેલાં રદ કરવામાં આવે ત્યારે કૉલ કરવામાં આવે છે.
onEnterCancelled(el) {},
- // called before the leave hook.
- // Most of the time, you should just use the leave hook.
+ // લીવ હૂક પહેલાં કૉલ કરવામાં આવે છે.
+ // મોટાભાગે, તમારે ફક્ત લીવ હૂકનો ઉપયોગ કરવો જોઈએ.
onBeforeLeave(el) {},
- // called when the leave transition starts.
- // use this to start the leaving animation.
+ // જ્યારે બહાર નીકળવાનું (leave) ટ્રાન્ઝિશન શરૂ થાય ત્યારે કૉલ કરવામાં આવે છે.
+ // લીવિંગ એનિમેશન શરૂ કરવા માટે આનો ઉપયોગ કરો.
onLeave(el, done) {
- // call the done callback to indicate transition end
- // optional if used in combination with CSS
+ // ટ્રાન્ઝિશનનો અંત સૂચવવા માટે ડન (done) કોલબેકને કૉલ કરો
+ // જો CSS સાથે સંયોજનમાં ઉપયોગ કરવામાં આવે તો વૈકલ્પિક
done()
},
- // called when the leave transition has finished and the
- // element has been removed from the DOM.
+ // જ્યારે લીવ ટ્રાન્ઝિશન સમાપ્ત થાય અને
+ // એલિમેન્ટને DOM માંથી દૂર કરવામાં આવે ત્યારે કૉલ કરવામાં આવે છે.
onAfterLeave(el) {},
- // only available with v-show transitions
+ // ફક્ત v-show ટ્રાન્ઝિશન સાથે ઉપલબ્ધ છે
onLeaveCancelled(el) {}
}
}
@@ -435,9 +435,9 @@ export default {
-These hooks can be used in combination with CSS transitions / animations or on their own.
+આ હૂકનો ઉપયોગ CSS ટ્રાન્ઝિશન / એનિમેશન સાથે અથવા તેની જાતે જ કરી શકાય છે.
-When using JavaScript-only transitions, it is usually a good idea to add the `:css="false"` prop. This explicitly tells Vue to skip auto CSS transition detection. Aside from being slightly more performant, this also prevents CSS rules from accidentally interfering with the transition:
+માત્ર JavaScript-ઓન્લી ટ્રાન્ઝિશનનો ઉપયોગ કરતી વખતે, `:css="false"` પ્રોપ ઉમેરવી સામાન્ય રીતે સારો વિચાર છે. આ સ્પષ્ટપણે Vue ને ઓટો CSS ટ્રાન્ઝિશન ડિટેક્શન છોડવાનું કહે છે. થોડું વધુ પરફોર્મન્ટ હોવા ઉપરાંત, આ CSS નિયમોને આકસ્મિક રીતે ટ્રાન્ઝિશનમાં દખલ કરતા અટકાવે છે:
```vue-html{3}
```
-With `:css="false"`, we are also fully responsible for controlling when the transition ends. In this case, the `done` callbacks are required for the `@enter` and `@leave` hooks. Otherwise, the hooks will be called synchronously and the transition will finish immediately.
+`:css="false"` સાથે, ટ્રાન્ઝિશન ક્યારે સમાપ્ત થાય છે તે નિયંત્રિત કરવા માટે આપણે સંપૂર્ણપણે જવાબદાર છીએ. આ કિસ્સામાં, `@enter` અને `@leave` હૂક્સ માટે `done` કોલબેક્સ જરૂરી છે. અન્યથા, હૂક્સ સિંક્રનસ રીતે કૉલ કરવામાં આવશે અને ટ્રાન્ઝિશન તરત જ સમાપ્ત થઈ જશે.
-Here's a demo using the [GSAP library](https://gsap.com/) to perform the animations. You can, of course, use any other animation library you want, for example [Anime.js](https://animejs.com/) or [Motion One](https://motion.dev/):
+એનિમેશન કરવા માટે [GSAP લાઇબ્રેરી](https://gsap.com/) નો ઉપયોગ કરીને ડેમો અહીં છે. તમે, અલબત્ત, અન્ય કોઈપણ એનિમેશન લાઇબ્રેરીનો ઉપયોગ કરી શકો છો જે તમે ઇચ્છો છો, ઉદાહરણ તરીકે [Anime.js](https://animejs.com/) અથવા [Motion One](https://motion.dev/):
-[Try it in the Playground](https://play.vuejs.org/#eNqNVMtu2zAQ/JUti8I2YD3i1GigKmnaorcCveTQArpQFCWzlkiCpBwHhv+9Sz1qKYckJ3FnlzvD2YVO5KvW4aHlJCGpZUZoB5a7Vt9lUjRaGQcnMLyEM5RGNbDA0sX/VGWpHnB/xEQmmZIWe+zUI9z6m0tnWr7ymbKVzAklQclvvFSG/5COmyWvV3DKJHTdQiRHZN0jAJbRmv9OIA432/UE+jODlKZMuKcErnx8RrazP8woR7I1FEryKaVTU8aiNdRfwWZTQtQwi1HAGF/YB4BTyxNY8JpaJ1go5K/WLTfhdg1Xq8V4SX5Xja65w0ovaCJ8Jvsnpwc+l525F2XH4ac3Cj8mcB3HbxE9qnvFMRzJ0K3APuhIjPefmTTyvWBAGvWbiDuIgeNYRh3HCCDNW+fQmHtWC7a/zciwaO/8NyN3D6qqap5GfVnXAC89GCqt8Bp77vu827+A+53AJrOFzMhQdMnO8dqPpMO74Yx4wqxFtKS1HbBOMdIX4gAMffVp71+Qq2NG4BCIcngBKk8jLOvfGF30IpBGEwcwtO6p9sdwbNXPIadsXxnVyiKB9x83+c3N9WePN9RUQgZO6QQ2sT524KMo3M5Pf4h3XFQ7NwFyZQpuAkML0doEtvEHhPvRDPRkTfq/QNDgRvy1SuIvpFOSDQmbkWTckf7hHsjIzjltkyhqpd5XIVNN5HNfGlW09eAcMp3J+R+pEn7L)
+[Playground માં તે અજમાવી જુઓ](https://play.vuejs.org/#eNqNVMtu2zAQ/JUti8I2YD3i1GigKmnaorcCveTQArpQFCWzlkiCpBwHhv+9Sz1qKYckJ3FnlzvD2YVO5KvW4aHlJCGpZUZoB5a7Vt9lUjRaGQcnMLyEM5RGNbDA0sX/VGWpHnB/xEQmmZIWe+zUI9z6m0tnWr7ymbKVzAklQclvvFSG/5COmyWvV3DKJHTdQiRHZN0jAJbRmv9OIA432/UE+jODlKZMuKcErnx8RrazP8woR7I1FEryKaVTU8aiNdRfwWZTQtQwi1HAGF/YB4BTyxNY8JpaJ1go5K/WLTfhdg1Xq8V4SX5Xja65w0ovaCJ8Jvsnpwc+l525F2XH4ac3Cj8mcB3HbxE9qnvFMRzJ0K3APuhIjPefmTTyvWBAGvWbiDuIgeNYRh3HCCDNW+fQmHtWC7a/zciwaO/8NyN3D6qqap5GfVnXAC89GCqt8Bp77vu827+A+53AJrOFzMhQdMnO8dqPpMO74Yx4wqxFtKS1HbBOMdIX4gAMffVp71+Qq2NG4BCIcngBKk8jLOvfGF30IpBGEwcwtO6p9sdwbNXPIadsXxnVyiKB9x83+c3N9WePN9RUQgZO6QQ2sT524KMo3M5Pf4h3XFQ7NwFyZQpuAkML0doEtvEHhPvRDPRkTfq/QNDgRvy1SuIvpFOSDQmbkWTckf7hHsjIzjltkyhqpd5XIVNN5HNfGlW09eAcMp3J+R+pEn7L)
-[Try it in the Playground](https://play.vuejs.org/#eNqNVFFvmzAQ/is3pimNlABNF61iaddt2tukvfRhk/xiwIAXsJF9pKmq/PedDTSwh7ZSFLjvzvd9/nz4KfjatuGhE0ES7GxmZIu3TMmm1QahtLyFwugGFu51wRQAU+Lok7koeFcjPDk058gvlv07gBHYGTVGALbSDwmg6USPnNzjtHL/jcBK5zZxxQwZavVNFNqIHwqF8RUAWs2jn4IffCfqQz+mik5lKLWi3GT1hagHRU58aAUSshpV2YzX4ncCcbjZDp099GcG6ZZnEh8TuPR8S0/oTJhQjmQryLUSU0rUU8a8M9wtoWZTQtIwi0nAGJ/ZB0BwKxJYiJpblFko1a8OLzbhdgWXy8WzP99109YCqdIJmgifyfYuzmUzfFF2HH56o/BjAldx/BbRo7pXHKMjGbrl1IcciWn9fyaNfC8YsIueR5wCFFTGUVAEsEs7pOmDu6yW2f6GBW5o4QbeuScLbu91WdZiF/VlvgEtujdcWek09tx3qZ+/tXAzQU1mA8mCoeicneO1OxKP9yM+4ElmLaEFr+2AecVEn8sDZOSrSzv/1qk+sgAOa1kMOyDlu4jK+j1GZ70E7KKJAxRafKzdazi26s8h5dm+NLpTeQLvP27S6+urz/7T5aaUao26TWATt0cPPsgcK3f6Q1wJWVY4AVJtcmHWhueyo89+G38guD+agT5YBf39s25oIv5arehu8krYkLAs8BeG86DfuANYUCG2NomiTrX7Msx0E7ncl0bnXT04566M4PQPykWaWw==)
+[Playground માં તે અજમાવી જુઓ](https://play.vuejs.org/#eNqNVFFvmzAQ/is3pimNlABNF61iaddt2tukvfRhk/xiwIAXsJF9pKmq/PedDTSwh7ZSFLjvzvd9/nz4KfjatuGhE0ES7GxmZIu3TMmm1QahtLyFwugGFu51wRQAU+Lok7koeFcjPDk058gvlv07gBHYGTVGALbSDwmg6USPnNzjtHL/jcBK5zZxxQwZavVNFNqIHwqF8RUAWs2jn4IffCfqQz+mik5lKLWi3GT1hagHRU58aAUSshpV2YzX4ncCcbjZDp099GcG6ZZnEh8TuPR8S0/oTJhQjmQryLUSU0rUU8a8M9wtoWZTQtIwi0nAGJ/ZB0BwKxJYiJpblFko1a8OLzbhdgWXy8WzP99109YCqdIJmgifyfYuzmUzfFF2HH56o/BjAldx/BbRo7pXHKMjGbrl1IcciWn9fyaNfC8YsIueR5wCFFTGUVAEsEs7pOmDu6yW2f6GBW5o4QbeuScLbu91WdZiF/VlvgEtujdcWek09tx3qZ+/tXAzQU1mA8mCoeicneO1OxKP9yM+4ElmLaEFr+2AecVEn8sDZOSrSzv/1qk+sgAOa1kMOyDlu4jK+j1GZ70E7KKJAxRafKzdazi26s8h5dm+NLpTeQLvP27S6+urz/7T5aaUao26TWATt0cPPsgcK3f6Q1wJWVY4AVJtcmHWhueyo89+G38guD+agT5YBf39s25oIv5arehu8krYkLAs8BeG86DfuANYUCG2NomiTrX7Msx0E7ncl0bnXT04566M4PQPykWaWw==)
-## Reusable Transitions {#reusable-transitions}
+## પુનઃઉપયોગી ટ્રાન્ઝિશન (Reusable Transitions) {#reusable-transitions}
-Transitions can be reused through Vue's component system. To create a reusable transition, we can create a component that wraps the `` component and passes down the slot content:
+Vue ની કમ્પોનન્ટ સિસ્ટમ દ્વારા ટ્રાન્ઝિશનનો ફરીથી ઉપયોગ કરી શકાય છે. પુનઃઉપયોગી ટ્રાન્ઝિશન બનાવવા માટે, આપણે એક કમ્પોનન્ટ બનાવી શકીએ છીએ જે `` કમ્પોનન્ટને લપેટી લે છે અને સ્લોટ કન્ટેન્ટ નીચે પસાર કરે છે:
```vue{6} [MyTransition.vue]
-
+
-
+
```
-Now `MyTransition` can be imported and used just like the built-in version:
+હવે `MyTransition` ને બ્રાઉઝર-લક્ષી વર્ઝનની જેમ જ ઇમ્પોર્ટ અને ઉપયોગ કરી શકાય છે:
```vue-html
-
Hello
+
હેલો!
```
-## Transition on Appear {#transition-on-appear}
+## દેખાવ પર ટ્રાન્ઝિશન (Transition on Appear) {#transition-on-appear}
-If you also want to apply a transition on the initial render of a node, you can add the `appear` prop:
+જો તમે નોડના પ્રારંભિક રેન્ડર (initial render) પર ટ્રાન્ઝિશન પણ લાગુ કરવા માંગતા હો, તો તમે `appear` પ્રોપ ઉમેરી શકો છો:
```vue-html
@@ -511,9 +511,9 @@ If you also want to apply a transition on the initial render of a node, you can
```
-## Transition Between Elements {#transition-between-elements}
+## એલિમેન્ટ્સ વચ્ચે ટ્રાન્ઝિશન {#transition-between-elements}
-In addition to toggling an element with `v-if` / `v-show`, we can also transition between two elements using `v-if` / `v-else` / `v-else-if`, as long as we make sure that there is only one element being shown at any given moment:
+`v-if` / `v-show` સાથે એલિમેન્ટને ટૉગલ કરવા ઉપરાંત, આપણે `v-if` / `v-else` / `v-else-if` નો ઉપયોગ કરીને બે એલિમેન્ટ્સ વચ્ચે ટ્રાન્ઝિશન પણ કરી શકીએ છીએ, જો આપણે ખાતરી કરીએ કે કોઈપણ ક્ષણે માત્ર એક જ એલિમેન્ટ બતાવવામાં આવી રહ્યો છે:
```vue-html
@@ -525,13 +525,13 @@ In addition to toggling an element with `v-if` / `v-show`, we can also transitio
-[Try it in the Playground](https://play.vuejs.org/#eNqdk8tu2zAQRX9loI0SoLLcFN2ostEi6BekmwLa0NTYJkKRBDkSYhj+9wxJO3ZegBGu+Lhz7syQ3Bd/nJtNIxZN0QbplSMISKNbdkYNznqCPXhcwwHW3g5QsrTsTGekNYGgt/KBBCEsouimDGLCvrztTFtnGGN4QTg4zbK4ojY4YSDQTuOiKwbhN8pUXm221MDd3D11xfJeK/kIZEHupEagrbfjZssxzAgNs5nALIC2VxNILUJg1IpMxWmRUAY9U6IZ2/3zwgRFyhowYoieQaseq9ElDaTRrkYiVkyVWrPiXNdiAcequuIkPo3fMub5Sg4l9oqSevmXZ22dwR8YoQ74kdsL4Go7ZTbR74HT/KJfJlxleGrG8l4YifqNYVuf251vqOYr4llbXz4C06b75+ns1a3BPsb0KrBy14Aymnerlbby8Vc8cTajG35uzFITpu0t5ufzHQdeH6LBsezEO0eJVbB6pBiVVLPTU6jQEPpKyMj8dnmgkQs+HmQcvVTIQK1hPrv7GQAFt9eO9Bk6fZ8Ub52Qiri8eUo+4dbWD02exh79v/nBP+H2PStnwz/jelJ1geKvk/peHJ4BoRZYow==)
+[Playground માં તે અજમાવી જુઓ](https://play.vuejs.org/#eNqdk8tu2zAQRX9loI0SoLLcFN2ostEi6BekmwLa0NTYJkKRBDkSYhj+9wxJO3ZegBGu+Lhz7syQ3Bd/nJtNIxZN0QbplSMISKNbdkYNznqCPXhcwwHW3g5QsrTsTGekNYGgt/KBBCEsouimDGLCvrztTFtnGGN4QTg4zbK4ojY4YSDQTuOiKwbhN8pUXm221MDd3D11xfJeK/kIZEHupEagrbfjZssxzAgNs5nALIC2VxNILUJg1IpMxWmRUAY9U6IZ2/3zwgRFyhowYoieQaseq9ElDaTRrkYiVkyVWrPiXNdiAcequuIkPo3fMub5Sg4l9oqSevmXZ22dwR8YoQ74kdsL4Go7ZTbR74HT/KJfJlxleGrG8l4YifqNYVuf251vqOYr4llbXz4C06b75+ns1a3BPsb0KrBy14Aymnerlbby8Vc8cTajG35uzFITpu0t5ufzHQdeH6LBsezEO0eJVbB6pBiVVLPTU6jQEPpKyMj8dnmgkQs+HmQcvVTIQK1hPrv7GQAFt9eO9Bk6fZ8Ub52Qiri8eUo+4dbWD02exh79v/nBP+H2PStnwz/jelJ1geKvk/peHJ4BoRZYow==)
-## Transition Modes {#transition-modes}
+## ટ્રાન્ઝિશન મોડ્સ (Transition Modes) {#transition-modes}
-In the previous example, the entering and leaving elements are animated at the same time, and we had to make them `position: absolute` to avoid the layout issue when both elements are present in the DOM.
+અગાઉના ઉદાહરણમાં, પ્રવેશતા અને બહાર નીકળતા એલિમેન્ટ્સ સમાન સમયે એનિમેટેડ હોય છે, અને જ્યારે બંને એલિમેન્ટ્સ DOM માં હાજર હોય ત્યારે લેઆઉટની સમસ્યા ટાળવા માટે આપણે તેને `position: absolute` બનાવવા પડ્યા હતા.
-However, in some cases this isn't an option, or simply isn't the desired behavior. We may want the leaving element to be animated out first, and for the entering element to only be inserted **after** the leaving animation has finished. Orchestrating such animations manually would be very complicated - luckily, we can enable this behavior by passing `` a `mode` prop:
+જો કે, કેટલાક કિસ્સાઓમાં આ વિકલ્પ નથી હોતો, અથવા ફક્ત તે ઇચ્છિત વર્તન હોતું નથી. અમે ઈચ્છી શકીએ છીએ કે બહાર નીકળતું એલિમેન્ટ પહેલા એનિમેટેડ થઈ જાય અને પ્રવેશતું એલિમેન્ટ લીવિંગ એનિમેશન સમાપ્ત થયા **પછી જ** દાખલ કરવામાં આવે. આવા એનિમેશનને મેન્યુઅલી ઓર્કેસ્ટ્રેટ કરવું ખૂબ જ જટિલ હશે - સદનસીબે, આપણે `` ને `mode` પ્રોપ પસાર કરીને આ વર્તનને સક્ષમ કરી શકીએ છીએ:
```vue-html
@@ -539,15 +539,15 @@ However, in some cases this isn't an option, or simply isn't the desired behavio
```
-Here's the previous demo with `mode="out-in"`:
+`mode="out-in"` સાથેનો અગાઉનો ડેમો અહીં છે:
-`` also supports `mode="in-out"`, although it's much less frequently used.
+`` એ `mode="in-out"` ને પણ સપોર્ટ કરે છે, જોકે તેનો ઉપયોગ ભાગ્યે જ થાય છે.
-## Transition Between Components {#transition-between-components}
+## કમ્પોનન્ટ્સ વચ્ચે ટ્રાન્ઝિશન {#transition-between-components}
-`` can also be used around [dynamic components](/guide/essentials/component-basics#dynamic-components):
+`` નો ઉપયોગ [ડાયનેમિક કમ્પોનન્ટ્સ](/guide/essentials/component-basics#dynamic-components) ની આસપાસ પણ થઈ શકે છે:
```vue-html
@@ -559,18 +559,18 @@ Here's the previous demo with `mode="out-in"`:
-[Try it in the Playground](https://play.vuejs.org/#eNqtksFugzAMhl/F4tJNKtDLLoxWKnuDacdcUnC3SCGJiMmEqr77EkgLbXfYYZyI8/v77dinZG9M5npMiqS0dScMgUXqzY4p0RrdEZzAfnEp9fc7HuEMx063sPIZq6viTbdmHy+yfDwF5K2guhFUUcBUnkNvcelBGrjTooHaC7VCRXBAoT6hQTRyAH2w2DlsmKq1sgS8JuEwUCfxdgF7Gqt5ZqrMp+58X/5A2BrJCcOJSskPKP0v+K8UyvQENBjcsqTjjdAsAZe2ukHpI3dm/q5wXPZBPFqxZAf7gCrzGfufDlVwqB4cPjqurCChFSjeBvGRN+iTA9afdE+pUD43FjG/bSHsb667Mr9qJot89vCBMl8+oiotDTL8ZsE39UnYpRN0fQlK5A5jEE6BSVdiAdrwWtAAm+zFAnKLr0ydA3pJDDt0x/PrMrJifgGbKdFPfCwpWU+TuWz5omzfVCNcfJJ5geL8pqtFn5E07u7fSHFOj6TzDyUDNEM=)
+[Playground માં તે અજમાવી જુઓ](https://play.vuejs.org/#eNqtksFugzAMhl/F4tJNKtDLLoxWKnuDacdcUnC3SCGJiMmEqr77EkgLbXfYYZyI8/v77dinZG9M5npMiqS0dScMgUXqzY4p0RrdEZzAfnEp9fc7HuEMx063sPIZq6viTbdmHy+yfDwF5K2guhFUUcBUnkNvcelBGrjTooHaC7VCRXBAoT6hQTRyAH2w2DlsmKq1sgS8JuEwUCfxdgF7Gqt5ZqrMp+58X/5A2BrJCcOJSskPKP0v+K8UyvQENBjcsqTjjdAsAZe2ukHpI3dm/q5wXPZBPFqxZAf7gCrzGfufDlVwqB4cPjqurCChFSjeBvGRN+iTA9afdE+pUD43FjG/bSHsb667Mr9qJot89vCBMl8+oiotDTL8ZsE39UnYpRN0fQlK5A5jEE6BSVdiAdrwWtAAm+zFAnKLr0ydA3pJDDt0x/PrMrJifgGbKdFPfCwpWU+TuWz5omzfVCNcfJJ5geL8pqtFn5E07u7fSHFOj6TzDyUDNEM=)
-[Try it in the Playground](https://play.vuejs.org/#eNqtks9ugzAMxl/F4tJNamGXXVhWqewVduSSgStFCkkUDFpV9d0XJyn9t8MOkxBg5/Pvi+Mci51z5TxhURdi7LxytG2NGpz1BB92cDvYezvAqqxixNLVjaC5ETRZ0Br8jpIe93LSBMfWAHRBYQ0aGms4Jvw6Q05rFvSS5NNzEgN4pMmbcwQgO1Izsj5CalhFRLDj1RN/wis8olpaCQHh4LQk5IiEll+owy+XCGXcREAHh+9t4WWvbFvAvBlsjzpk7gx5TeqJtdG4LbawY5KoLtR/NGjYoHkw+PTSjIqUNWDkwOK97DHUMjVEdqKNMqE272E5dajV+JvpVlSLJllUF4+QENX1ERox0kHzb8m+m1CEfpOgYYgpqVHOmJNpgLQQa7BOdooO8FK+joByxLc4tlsiX6s7HtnEyvU1vKTCMO+4pWKdBnO+0FfbDk31as5HsvR+Hl9auuozk+J1/hspz+mRdPoBYtonzg==)
+[Playground માં તે અજમાવી જુઓ](https://play.vuejs.org/#eNqtks9ugzAMxl/F4tJNamGXXVhWqewVduSSgStFCkkUDFpV9d0XJyn9t8MOkxBg5/Pvi+Mci51z5TxhURdi7LxytG2NGpz1BB92cDvYezvAqqxixNLVjaC5ETRZ0Br8jpIe93LSBMfWAHRBYQ0aGms4Jvw6Q05rFvSS5NNzEgN4pMmbcwQgO1Izsj5CalhFRLDj1RN/wis8olpaCQHh4LQk5IiEll+owy+XCGXcREAHh+9t4WWvbFvAvBlsjzpk7gx5TeqJtdG4LbawY5KoLtR/NGjYoHkw+PTSjIqUNWDkwOK97DHUMjVEdqKNMqE272E5dajV+JvpVlSLJllUF4+QENX1ERox0kHzb8m+m1CEfpOgYYgpqVHOmJNpgLQQa7BOdooO8FK+joByxLc4tlsiX6s7HtnEyvU1vKTCMO+4pWKdBnO+0FfbDk31as5HsvR+Hl9auuozk+J1/hspz+mRdPoBYtonzg==)
-## Dynamic Transitions {#dynamic-transitions}
+## ડાયનેમિક ટ્રાન્ઝિશન (Dynamic Transitions) {#dynamic-transitions}
-`` props like `name` can also be dynamic! It allows us to dynamically apply different transitions based on state change:
+`` ના `name` જેવા પ્રોપ્સ પણ ડાયનેમિક હોઈ શકે છે! તે આપણને સ્ટેટ ચેન્જના આધારે વિવિધ ટ્રાન્ઝિશન ગતિશીલ રીતે લાગુ કરવાની મંજૂરી આપે છે:
```vue-html
@@ -578,15 +578,15 @@ Here's the previous demo with `mode="out-in"`:
```
-This can be useful when you've defined CSS transitions / animations using Vue's transition class conventions and want to switch between them.
+આ ત્યારે ઉપયોગી થઈ શકે છે જ્યારે તમે Vue ના ટ્રાન્ઝિશન ક્લાસ પરંપરાઓનો ઉપયોગ કરીને CSS ટ્રાન્ઝિશન / એનિમેશન વ્યાખ્યાયિત કર્યા હોય અને તેમની વચ્ચે સ્વિચ કરવા માંગતા હોવ.
-You can also apply different behavior in JavaScript transition hooks based on the current state of your component. Finally, the ultimate way of creating dynamic transitions is through [reusable transition components](#reusable-transitions) that accept props to change the nature of the transition(s) to be used. It may sound cheesy, but the only limit really is your imagination.
+તમે તમારા ઘટકની વર્તમાન સ્થિતિના આધારે JavaScript ટ્રાન્ઝિશન હૂક્સમાં અલગ વર્તન પણ લાગુ કરી શકો છો. છેલ્લે, ડાયનેમિક ટ્રાન્ઝિશન બનાવવાનો અંતિમ માર્ગ [પુનઃઉપયોગી ટ્રાન્ઝિશન કમ્પોનન્ટ્સ](#reusable-transitions) દ્વારા છે જે વાપરવા માટેના ટ્રાન્ઝિશનના સ્વભાવને બદલવા માટે પ્રોપ્સ સ્વીકારે છે. તે ચીઝી લાગી શકે છે, પરંતુ ખરેખર માત્ર તમારી કલ્પના જ સીમા છે.
-## Transitions with the Key Attribute {#transitions-with-the-key-attribute}
+## Key એટ્રિબ્યુટ સાથે ટ્રાન્ઝિશન {#transitions-with-the-key-attribute}
-Sometimes you need to force the re-render of a DOM element in order for a transition to occur.
+કેટલીકવાર તમારે ટ્રાન્ઝિશન થવા માટે DOM એલિમેન્ટને ફરીથી રેન્ડર કરવા માટે દબાણ કરવાની જરૂર હોય છે.
-Take this counter component for example:
+ઉદાહરણ તરીકે આ કાઉન્ટર (counter) ઘટક લો:
@@ -637,21 +637,21 @@ export default {
-If we had excluded the `key` attribute, only the text node would be updated and thus no transition would occur. However, with the `key` attribute in place, Vue knows to create a new `span` element whenever `count` changes and thus the `Transition` component has 2 different elements to transition between.
+જો આપણે `key` એટ્રિબ્યુટને બાકાત રાખ્યું હોત, તો માત્ર ટેક્સ્ટ નોડ અપડેટ કરવામાં આવ્યો હોત અને આ રીતે કોઈ ટ્રાન્ઝિશન થયું ન હોત. જો કે, `key` એટ્રિબ્યુટની હાજરીમાં, Vue જાણે છે કે જ્યારે પણ `count` બદલાય ત્યારે નવું `span` એલિમેન્ટ બનાવવાનું હોય છે અને આમ `Transition` કમ્પોનન્ટ પાસે ટ્રાન્ઝિશન કરવા માટે ૨ અલગ એલિમેન્ટ્સ હોય છે.
-[Try it in the Playground](https://play.vuejs.org/#eNp9UsFu2zAM/RVCl6Zo4nhYd/GcAtvQQ3fYhq1HXTSFydTKkiDJbjLD/z5KMrKgLXoTHx/5+CiO7JNz1dAja1gbpFcuQsDYuxtuVOesjzCCxx1MsPO2gwuiXnzkhhtpTYggbW8ibBJlUV/mBJXfmYh+EHqxuITNDYzcQGFWBPZ4dUXEaQnv6jrXtOuiTJoUROycFhEpAmi3agCpRQgbzp68cA49ZyV174UJKiprckxIcMJA84hHImc9oo7jPOQ0kQ4RSvH6WXW7JiV6teszfQpDPGqEIK3DLSGpQbazsyaugvqLDVx77JIhbqp5wsxwtrRvPFI7NWDhEGtYYVrQSsgELzOiUQw4I2Vh8TRgA9YJqeIR6upDABQh9TpTAPE7WN3HlxLp084Foi3N54YN1KWEVpOMkkO2ZJHsmp3aVw/BGjqMXJE22jml0X93STRw1pReKSe0tk9fMxZ9nzwVXP5B+fgK/hAOCePsh8dAt4KcnXJR+D3S16X07a9veKD3KdnZba+J/UbyJ+Zl0IyF9rk3Wxr7jJenvcvnrcz+PtweItKuZ1Np0MScMp8zOvkvb1j/P+776jrX0UbZ9A+fYSTP)
+[Playground માં તે અજમાવી જુઓ](https://play.vuejs.org/#eNp9UsFu2zAM/RVCl6Zo4nhYd/GcAtvQQ3fYhq1HXTSFydTKkiDJbjLD/z5KMrKgLXoTHx/5+CiO7JNz1dAja1gbpFcuQsDYuxtuVOesjzCCxx1MsPO2gwuiXnzkhhtpTYggbW8ibBJlUV/mBJXfmYh+EHqxuITNDYzcQGFWBPZ4dUXEaQnv6jrXtOuiTJoUROycFhEpAmi3agCpRQgbzp68cA49ZyV174UJKiprckxIcMJA84hHImc9oo7jPOQ0kQ4RSvH6WXW7JiV6teszfQpDPGqEIK3DLSGpQbazsyaugvqLDVx77JIhbqp5wsxwtrRvPFI7NWDhEGtYYVrQSsgELzOiUQw4I2Vh8TRgA9YJqeIR6upDABQh9TpTAPE7WN3HlxLp084Foi3N54YN1KWEVpOMkkO2ZJHsmp3aVw/BGjqMXJE22jml0X93STRw1pReKSe0tk9fMxZ9nzwVXP5B+fgK/hAOCePsh8dAt4KcnXJR+D3S16X07a9veKD3KdnZba+J/UbyJ+Zl0IyF9rk3Wxr7jJenvcvnrcz+PtweItKuZ1Np0MScMp8zOvkvb1j/P+776jrX0UbZ9A+fYSTP)
-[Try it in the Playground](https://play.vuejs.org/#eNp9U8tu2zAQ/JUFTwkSyw6aXlQ7QB85pIe2aHPUhZHWDhOKJMiVYtfwv3dJSpbbBgEMWJydndkdUXvx0bmi71CUYhlqrxzdVAa3znqCBtey0wT7ygA0kuTZeX4G8EidN+MJoLadoRKuLkdAGULfS12C6bSGDB/i3yFx2tiAzaRIjyoUYxesICDdDaczZq1uJrNETY4XFx8G5Uu4WiwW55PBA66txy8YyNvdZFNrlP4o/Jdpbq4M/5bzYxZ8IGydloR8Alg2qmcVGcKqEi9eOoe+EqnExXsvTVCkrBkQxoKTBspn3HFDmprp+32ODA4H9mLCKDD/R2E5Zz9+Ws5PpuBjoJ1GCLV12DASJdKGa2toFtRvLOHaY8vx8DrFMGdiOJvlS48sp3rMHGb1M4xRzGQdYU6REY6rxwHJGdJxwBKsk7WiHSyK9wFQhqh14gDyIVjd0f8Wa2/bUwOyWXwQLGGRWzicuChvKC4F8bpmrTbFU7CGL2zqiJm2Tmn03100DZUox5ddCam1ffmaMPJd3Cnj9SPWz6/gT2EbsUr88Bj4VmAljjWSfoP88mL59tc33PLzsdjaptPMfqP4E1MYPGOmfepMw2Of8NK0d238+JTZ3IfbLSFnPSwVB53udyX4q/38xurTuO+K6/Fqi8MffqhR/A==)
+[Playground માં તે અજમાવી જુઓ](https://play.vuejs.org/#eNp9U8tu2zAQ/JUFTwkSyw6aXlQ7QB85pIe2aHPUhZHWDhOKJMiVYtfwv3dJSpbbBgEMWJydndkdUXvx0bmi71CUYhlqrxzdVAa3znqCBtey0wT7ygA0kuTZeX4G8EidN+MJoLadoRKuLkdAGULfS12C6bSGDB/i3yFx2tiAzaRIjyoUYxesICDdDaczZq1uJrNETY4XFx8G5Uu4WiwW55PBA66txy8YyNvdZFNrlP4o/Jdpbq4M/5bzYxZ8IGydloR8Alg2qmcVGcKqEi9eOoe+EqnExXsvTVCkrBkQxoKTBspn3HFDmprp+32ODA4H9mLCKDD/R2E5Zz9+Ws5PpuBjoJ1GCLV12DASJdKGa2toFtRvLOHaY8vx8DrFMGdiOJvlS48sp3rMHGb1M4xRzGQdYU6REY6rxwHJGdJxwBKsk7WiHSyK9wFQhqh14gDyIVjd0f8Wa2/bUwOyWXwQLGGRWzicuChvKC4F8bpmrTbFU7CGL2zqiJm2Tmn03100DZUox5ddCam1ffmaMPJd3Cnj9SPWz6/gT2EbsUr88Bj4VmAljjWSfoP88mL59tc33PLzsdjaptPMfqP4E1MYPGOmfepMw2Of8NK0d238+JTZ3IfbLSFnPSwVB53udyX4q/38xurTuO+K6/Fqi8MffqhR/A==)
---
-**Related**
+**સંબંધિત**
-- [`` API reference](/api/built-in-components#transition)
+- [`` API રિફરન્સ](/api/built-in-components#transition)
diff --git a/src/guide/components/async.md b/src/guide/components/async.md
index ce2925fbbd..9647f6ee4f 100644
--- a/src/guide/components/async.md
+++ b/src/guide/components/async.md
@@ -1,24 +1,24 @@
-# Async Components {#async-components}
+# એસિંક કમ્પોનન્ટ્સ (Async Components) {#async-components}
-## Basic Usage {#basic-usage}
+## મૂળભૂત વપરાશ (Basic Usage) {#basic-usage}
-In large applications, we may need to divide the app into smaller chunks and only load a component from the server when it's needed. To make that possible, Vue has a [`defineAsyncComponent`](/api/general#defineasynccomponent) function:
+મોટી એપ્લિકેશન્સમાં, આપણે એપ્લિકેશનને નાના ટુકડાઓમાં વહેંચવાની જરૂર પડી શકે છે અને જ્યારે જરૂર હોય ત્યારે જ સર્વર પરથી ઘટક લોડ કરવાની જરૂર પડી શકે છે. તે શક્ય બનાવવા માટે, Vue પાસે [`defineAsyncComponent`](/api/general#defineasynccomponent) ફંક્શન છે:
```js
import { defineAsyncComponent } from 'vue'
const AsyncComp = defineAsyncComponent(() => {
return new Promise((resolve, reject) => {
- // ...load component from server
- resolve(/* loaded component */)
+ // ...સર્વર પરથી ઘટક લોડ કરો
+ resolve(/* લોડ કરેલ ઘટક */)
})
})
-// ... use `AsyncComp` like a normal component
+// ... `AsyncComp` નો સામાન્ય ઘટક જેવો ઉપયોગ કરો
```
-As you can see, `defineAsyncComponent` accepts a loader function that returns a Promise. The Promise's `resolve` callback should be called when you have retrieved your component definition from the server. You can also call `reject(reason)` to indicate the load has failed.
+જેમ તમે જોઈ શકો છો, `defineAsyncComponent` લોડર ફંક્શન સ્વીકારે છે જે પ્રોમિસ (Promise) પરત કરે છે. પ્રોમિસનું `resolve` કોલબેક ત્યારે કૉલ કરવું જોઈએ જ્યારે તમે સર્વર પરથી તમારી કમ્પોનન્ટની ડેફીનેશન મેળવી લો. લોડ નિષ્ફળ ગયો છે તે સૂચવવા માટે તમે `reject(reason)` ને પણ કૉલ કરી શકો છો.
-[ES module dynamic import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) also returns a Promise, so most of the time we will use it in combination with `defineAsyncComponent`. Bundlers like Vite and webpack also support the syntax (and will use it as bundle split points), so we can use it to import Vue SFCs:
+[ES મોડ્યુલ ડાયનેમિક ઇમ્પોર્ટ](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) પણ પ્રોમિસ પરત કરે છે, તેથી મોટાભાગના સમયે આપણે તેનો ઉપયોગ `defineAsyncComponent` સાથે સંયોજનમાં કરીશું. Vite અને webpack જેવા બંડલર્સ પણ આ સિન્ટેક્સને સપોર્ટ કરે છે (અને તેને બંડલ સ્પ્લિટ પોઈન્ટ્સ તરીકે ઉપયોગ કરશે), તેથી આપણે તેનો ઉપયોગ Vue SFCs ને ઇમ્પોર્ટ કરવા માટે કરી શકીએ છીએ:
```js
import { defineAsyncComponent } from 'vue'
@@ -28,9 +28,9 @@ const AsyncComp = defineAsyncComponent(() =>
)
```
-The resulting `AsyncComp` is a wrapper component that only calls the loader function when it is actually rendered on the page. In addition, it will pass along any props and slots to the inner component, so you can use the async wrapper to seamlessly replace the original component while achieving lazy loading.
+પરિણામી `AsyncComp` એ એક રેપર (wrapper) કમ્પોનન્ટ છે જે જ્યારે પેજ પર ખરેખર રેન્ડર થાય ત્યારે જ લોડર ફંક્શનને કૉલ કરે છે. આ ઉપરાંત, તે કોઈપણ પ્રોપ્સ અને સ્લોટ્સને આંતરિક ઘટકમાં પસાર કરશે, જેથી તમે લેઝી લોડિંગ (lazy loading) પ્રાપ્ત કરતી વખતે મૂળ ઘટકને સીમલેસ રીતે બદલવા માટે એસિંક રેપરનો ઉપયોગ કરી શકો.
-As with normal components, async components can be [registered globally](/guide/components/registration#global-registration) using `app.component()`:
+સામાન્ય ઘટકોની જેમ, એસિંક ઘટકો પણ `app.component()` નો ઉપયોગ કરીને [ગ્લોબલ રજીસ્ટર કરી શકાય છે](/guide/components/registration#global-registration):
```js
app.component('MyComponent', defineAsyncComponent(() =>
@@ -40,7 +40,7 @@ app.component('MyComponent', defineAsyncComponent(() =>
-You can also use `defineAsyncComponent` when [registering a component locally](/guide/components/registration#local-registration):
+[કમ્પોનન્ટને લોકલ રજીસ્ટર કરતી વખતે](/guide/components/registration#local-registration) તમે `defineAsyncComponent` નો ઉપયોગ પણ કરી શકો છો:
```vue
```
-The common scenario for disabling attribute inheritance is when attributes need to be applied to other elements besides the root node. By setting the `inheritAttrs` option to `false`, you can take full control over where the fallthrough attributes should be applied.
+એટ્રિબ્યુટ ઇનહેરિટન્સ ને અક્ષમ કરવા માટેનું સામાન્ય કારણ ત્યારે હોય છે જ્યારે એટ્રિબ્યુટ્સને રૂટ નોડ સિવાયના અન્ય એલિમેન્ટ્સ પર લાગુ કરવાની જરૂર હોય. `inheritAttrs` ઓપ્શનને `false` પર સેટ કરીને, તમે ફોલથ્રુ એટ્રિબ્યુટ્સ ક્યાં લાગુ કરવા જોઈએ તેના પર સંપૂર્ણ નિયંત્રણ લઈ શકો છો.
-These fallthrough attributes can be accessed directly in template expressions as `$attrs`:
+આ ફોલથ્રુ એટ્રિબ્યુટ્સને ટેમ્પલેટ એક્સપ્રેશન્સમાં સીધા જ `$attrs` તરીકે એક્સેસ કરી શકાય છે:
```vue-html
-Fallthrough attributes: {{ $attrs }}
+ફોલથ્રુ એટ્રિબ્યુટ્સ: {{ $attrs }}
```
-The `$attrs` object includes all attributes that are not declared by the component's `props` or `emits` options (e.g., `class`, `style`, `v-on` listeners, etc.).
+`$attrs` ઓબ્જેક્ટમાં એવા તમામ એટ્રિબ્યુટ્સનો સમાવેશ થાય છે જે ઘટકના `props` અથવા `emits` ઓપ્શન્સ (દા.ત., `class`, `style`, `v-on` લિસનર્સ, વગેરે) દ્વારા જાહેર કરવામાં આવતા નથી.
-Some notes:
+કેટલીક નોંધો:
-- Unlike props, fallthrough attributes preserve their original casing in JavaScript, so an attribute like `foo-bar` needs to be accessed as `$attrs['foo-bar']`.
+- પ્રોપ્સથી વિપરીત, ફોલથ્રુ એટ્રિબ્યુટ્સ જાવાસ્ક્રિપ્ટમાં તેમનું અસલ કેસિંગ જાળવી રાખે છે, તેથી `foo-bar` જેવા એટ્રિબ્યુટને `$attrs['foo-bar']` તરીકે એક્સેસ કરવાની જરૂર છે.
-- A `v-on` event listener like `@click` will be exposed on the object as a function under `$attrs.onClick`.
+- `@click` જેવા `v-on` ઇવેન્ટ લિસનરને ઓબ્જેક્ટ પર `$attrs.onClick` હેઠળ ફંક્શન તરીકે એક્સપોઝ કરવામાં આવશે.
-Using our `` component example from the [previous section](#attribute-inheritance) - sometimes we may need to wrap the actual `
```
@@ -145,4 +145,4 @@ While using aliases in `src`, don't start with `~`, anything after it is interpr
## Comments {#comments}
-Inside each block you shall use the comment syntax of the language being used (HTML, CSS, JavaScript, Pug, etc.). For top-level comments, use HTML comment syntax: ``
+દરેક block અંદર ઉપયોગ થતી language ની comment syntax (HTML, CSS, JavaScript, Pug, etc.) ઉપયોગ કરવી. Top-level comments માટે, HTML comment syntax ઉપયોગ કરો: ``
diff --git a/src/api/ssr.md b/src/api/ssr.md
index cb30cb8d60..a7b0afefc6 100644
--- a/src/api/ssr.md
+++ b/src/api/ssr.md
@@ -2,9 +2,9 @@
## renderToString() {#rendertostring}
-- **Exported from `vue/server-renderer`**
+- **`vue/server-renderer` માંથી Exported**
-- **Type**
+- **ટાઇપ (Type)**
```ts
function renderToString(
@@ -13,7 +13,7 @@
): Promise