vuejs-translations · szymonlicau · Jun 2, 2025 · May 28, 2025 · May 28, 2025 · May 29, 2025
diff --git a/.vitepress/inlined-scripts/restorePreference.js b/.vitepress/inlined-scripts/restorePreference.js
@@ -8,6 +8,6 @@
   restore('vue-docs-prefer-composition', 'prefer-composition', true)
   restore('vue-docs-prefer-sfc', 'prefer-sfc', true)
 
-  window.__VUE_BANNER_ID__ = 'vueconf2025'
-  restore(`vue-docs-banner-${__VUE_BANNER_ID__}`, 'banner-dismissed')
+  // window.__VUE_BANNER_ID__ = ''
+  // restore(`vue-docs-banner-${__VUE_BANNER_ID__}`, 'banner-dismissed')
 })()
diff --git a/.vitepress/theme/components/Banner.vue b/.vitepress/theme/components/Banner.vue
@@ -22,31 +22,16 @@ function dismiss() {
 
 <template>
   <div class="banner" v-if="open">
-    <p class="vt-banner-text">
-      <span class="vt-text-primary">
-        Vueconf.US
-      </span>
-      <span class="vt-tagline"> · The official Vue.js conf</span>
-      <span class="vt-place"> · Tampa, USA</span>
-      <span class="vt-date"> · 19-21 May 2025</span>
-      <a target="_blank" class="vt-primary-action"
-         href="https://vueconf.us/?utm_source=vuejs&utm_content=top_banner">
-        Register
-      </a>
-    </p>
+    <a target="_blank"></a>
     <button @click="dismiss">
       <VTIconPlus class="close" />
     </button>
-    <p class="vt-banner-text vt-coupon">
-      <span class="vt-text-primary">Use</span> VUEJSDOCS
-      <span class="vt-text-primary"> $200 off</span>
-    </p>
   </div>
 </template>
 
 <style>
 html:not(.banner-dismissed) {
-  --vt-banner-height: 60px;
+  --vt-banner-height: 30px;
 }
 </style>
 
@@ -65,12 +50,12 @@ html:not(.banner-dismissed) {
   font-weight: 600;
   color: #fff;
   background-color: var(--vt-c-green);
-  background: #0f172a;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-
+  background: linear-gradient(
+    90deg,
+    rgba(66, 184, 131, 1) 0%,
+    rgba(39, 179, 137, 1) 19%,
+    rgba(100, 126, 255, 1) 100%
+  );
 }
 
 .banner-dismissed .banner {
@@ -85,7 +70,7 @@ button {
   position: absolute;
   right: 0;
   top: 0;
-  padding: 10px 10px;
+  padding: 5px;
 }
 
 .close {
@@ -94,61 +79,10 @@ button {
   fill: #fff;
   transform: rotate(45deg);
 }
-
-.vt-banner-text {
-  color: #fff;
-  font-size: 16px;
-}
-
-.vt-text-primary {
-  color: #75c05e;
-}
-
-.vt-primary-action {
-  background: #75c05e;
-  color: #121c1a;
-  padding: 8px 15px;
-  border-radius: 5px;
-  font-size: 14px;
-  text-decoration: none;
-  margin: 0 10px;
-  font-weight: bold;
-}
-
-.vt-primary-action:hover {
-  text-decoration: none;
-  background: #c4d141;
-}
-
-@media (max-width: 1280px) {
-  .banner .vt-banner-text {
-    font-size: 14px;
-  }
-
-
-}
-
-@media (max-width: 780px) {
-  .vt-tagline {
-    display: none;
-  }
-  .vt-primary-action {
-    margin: 0 10px;
-    padding: 5px 5px;
-  }
-
-  .vt-time-now {
-    display: none;
-  }
-}
-
-@media (max-width: 560px) {
-
-  .vt-place {
+/*
+@media (max-width: 720px) {
+  a > span {
     display: none;
   }
-  .vt-date {
-    display: none;
-  }
-}
+} */
 </style>
diff --git a/.vitepress/theme/components/ScrimbaLink.vue b/.vitepress/theme/components/ScrimbaLink.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="scrimba">
+    <a
+      :href="href"
+      target="_blank"
+      rel="sponsored noopener"
+      :title="title"
+    >
+      <slot>Obejrzyj darmowy interaktywny tutorial w Scrimba</slot>
+    </a>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    href: { type: String, required: true },
+    title: { type: String, required: true }
+  }
+}
+</script>
+<style scoped>
+.scrimba {
+  margin: 28px 0;
+  background-color: var(--vt-c-bg-soft);
+  padding: 1em 1.25em;
+  border-radius: 2px;
+  position: relative;
+  display: flex;
+  border-radius: 8px;
+}
+.scrimba a {
+  color: var(--c-text);
+  position: relative;
+  padding-left: 36px;
+}
+.scrimba a:before {
+  content: '';
+  position: absolute;
+  display: block;
+  width: 30px;
+  height: 30px;
+  top: calc(50% - 15px);
+  left: -4px;
+  border-radius: 50%;
+  background-color: #73abfe;
+}
+.scrimba a:after {
+  content: '';
+  position: absolute;
+  display: block;
+  width: 0;
+  height: 0;
+  top: calc(50% - 5px);
+  left: 8px;
+  border-top: 5px solid transparent;
+  border-bottom: 5px solid transparent;
+  border-left: 8px solid #fff;
+}
+</style> 
diff --git a/.vitepress/theme/index.ts b/.vitepress/theme/index.ts
@@ -10,14 +10,15 @@ import {
 } from './components/preferences'
 import SponsorsAside from './components/SponsorsAside.vue'
 import VueSchoolLink from './components/VueSchoolLink.vue'
-import Banner from './components/Banner.vue'
+import ScrimbaLink from './components/ScrimbaLink.vue'
+// import Banner from './components/Banner.vue'
 // import TextAd from './components/TextAd.vue'
 
 export default Object.assign({}, VPTheme, {
   Layout: () => {
     // @ts-ignore
     return h(VPTheme.Layout, null, {
-      banner: () => h(Banner),
+      // banner: () => h(Banner),
       'sidebar-top': () => h(PreferenceSwitch),
       'sidebar-bottom': () => h(SecurityUpdateBtn),
       'aside-mid': () => h(SponsorsAside)
@@ -28,6 +29,7 @@ export default Object.assign({}, VPTheme, {
     app.provide('prefer-sfc', preferSFC)
     app.provide('filter-headers', filterHeadersByPreference)
     app.component('VueSchoolLink', VueSchoolLink)
+    app.component('ScrimbaLink', ScrimbaLink)
     // app.component('TextAd', TextAd)
   }
 })
diff --git a/src/api/composition-api-lifecycle.md b/src/api/composition-api-lifecycle.md
@@ -210,7 +210,7 @@ Rejestruje funkcje, która ma zostać wywołana, gdy zostanie przechwycony błą
   W produkcji, 3. argument (`info`) będzie skróconym kodem zamiast pełnego ciągu informacyjnego. Mapowanie kodu do ciągu można znaleźć w [Odniesienie do kodu błędu produkcyjnego](/error-reference/#runtime-errors).
   :::
 
-  Możesz zmodyfikować stan komponentu w `errorCaptured()`, aby wyświetlić użytkownikowi stan błędu. Ważne jest jednak, aby stan błędu nie renderował oryginalnej zawartości, która spowodowała błąd; w przeciwnym razie komponent zostanie wrzucony do nieskończonej pętli renderowania.
+  Możesz zmodyfikować stan komponentu w `onErrorCaptured()`, aby wyświetlić użytkownikowi stan błędu. Ważne jest jednak, aby stan błędu nie renderował oryginalnej zawartości, która spowodowała błąd; w przeciwnym razie komponent zostanie wrzucony do nieskończonej pętli renderowania.
 
   Funkcja może zwrócić `false`, aby zatrzymać dalsze rozprzestrzenianie się błędu. Zobacz szczegóły propagacji błędu poniżej.
 

diff --git a/src/guide/components/v-model.md b/src/guide/components/v-model.md
@@ -1,5 +1,9 @@
 # v-model w komponentach {#component-v-model}
 
+<ScrimbaLink href="https://scrimba.com/links/vue-component-v-model" title="Darmowa lekcja o v-model w komponentach Vue.js" type="scrimba">
+  Obejrzyj interaktywną lekcję w Scrimba
+</ScrimbaLink>
+
 ## Podstawowe użycie {#basic-usage}
 
 `v-model` może być używany w komponencie do implementacji dwukierunkowego wiązania danych.

diff --git a/src/guide/essentials/component-basics.md b/src/guide/essentials/component-basics.md
@@ -1,5 +1,9 @@
 # Podstawy komponentów {#components-basics}
 
+<ScrimbaLink href="https://scrimba.com/links/vue-component-basics" title="Darmowa lekcja o podstawach komponentów w Vue.js" type="scrimba">
+  Objerzyj interaktywną lekcję w Scrimba
+</ScrimbaLink>
+
 Komponenty pozwalają nam podzielić interfejs użytkownika na niezależne części wielokrotnego użytku oraz myśleć o każdej z nich w izolacji. Często aplikacja jest organizowana w strukturę komponentów zagnieżdżonych w drzewie:
 
 ![Drzewo komponentów](./images/components.png)

diff --git a/src/guide/essentials/template-syntax.md b/src/guide/essentials/template-syntax.md
@@ -1,5 +1,9 @@
 # Składnia szablonów {#template-syntax}
 
+<ScrimbaLink href="https://scrimba.com/links/vue-template-syntax" title="Darmowa lekcja o składni szablonów w Vue.js" type="scrimba">
+  Objerzyj interaktywną lekcję w Scrimba
+</ScrimbaLink>
+
 Vue wykorzystuje składnię szablonów opartą na HTML, która pozwala deklaratywnie powiązać renderowany DOM z danymi bazowej instancji komponentu. Wszystkie szablony Vue są składniowo poprawnym kodem HTML, który może być analizowany przez przeglądarki i parsery HTML zgodne ze specyfikacją.
 
 "Pod spodem" Vue kompiluje szablony do wysoko zoptymalizowanego kodu JavaScript. W połączeniu z systemem reaktywności Vue inteligentnie określa minimalną liczbę komponentów do ponownego renderowania i stosuje minimalne manipulacje DOM przy zmianie stanu aplikacji.

diff --git a/src/guide/quick-start.md b/src/guide/quick-start.md
@@ -16,6 +16,8 @@ import { VTCodeGroup, VTCodeGroupTab } from '@vue/theme'
 
 - Jeśli znasz już Node.js i koncepcję narzędzi do kompilacji, możesz również wypróbować pełną konfigurację kompilacji bezpośrednio w przeglądarce na [StackBlitz](https://vite.new/vue).
 
+- Aby posłuchać o rekomendowanej konfiguracji, obejrz ten interaktywny poradnik w [Scrimba](http://scrimba.com/links/vue-quickstart), który pokaże Ci jak uruchomić, edytować i zdeployować swoją pierwszą aplikację Vue.
+
 ## Tworzenie aplikacji Vue {#creating-a-vue-application}
 
 :::tip Wymagania wstępne

diff --git a/src/guide/typescript/composition-api.md b/src/guide/typescript/composition-api.md
@@ -1,5 +1,9 @@
 # TypeScript z Composition API {#typescript-with-composition-api}
 
+<ScrimbaLink href="https://scrimba.com/links/vue-ts-composition-api" title="Darmowa lekcja Vue.js o TypeScript z Composition API" type="scrimba">
+  Obejrzy interaktywną lekcję w Scrimba
+</ScrimbaLink>
+
 > Ta strona zakłada, że przeczytałeś już ogólne informacje o [Używaniu Vue z TypeScript](./overview).
 
 ## Typowanie Propsów Komponentu {#typing-component-props}