Merge branch 'main' into feat/group-icons

Author: yuyinws

.vitepress/theme/components/ScrimbaLink.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="scrimba">
+    <a
+      :href="href"
+      target="_blank"
+      rel="sponsored noopener"
+      :title="title"
+    >
+      <slot>Watch a free interactive tutorial on 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: #2B2B2B; /* Scrimba's dark color */
+}
+.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> 

src/api/composition-api-lifecycle.md

@@ -210,7 +210,7 @@ Registers a hook to be called when an error propagating from a descendant compon
   In production, the 3rd argument (`info`) will be a shortened code instead of the full information string. You can find the code to string mapping in the [Production Error Code Reference](/error-reference/#runtime-errors).
   :::
 
-  You can modify component state in `errorCaptured()` to display an error state to the user. However, it is important that the error state should not render the original content that caused the error; otherwise the component will be thrown into an infinite render loop.
+  You can modify component state in `onErrorCaptured()` to display an error state to the user. However, it is important that the error state should not render the original content that caused the error; otherwise the component will be thrown into an infinite render loop.
 
   The hook can return `false` to stop the error from propagating further. See error propagation details below.
 

src/guide/components/v-model.md

@@ -1,5 +1,9 @@
 # Component v-model {#component-v-model}
 
+<ScrimbaLink href="https://scrimba.com/links/vue-component-v-model" title="Free Vue.js Component v-model Lesson" type="scrimba">
+  Watch an interactive video lesson on Scrimba
+</ScrimbaLink>
+
 ## Basic Usage {#basic-usage}
 
 `v-model` can be used on a component to implement a two-way binding.

src/guide/essentials/component-basics.md

@@ -1,5 +1,9 @@
 # Components Basics {#components-basics}
 
+<ScrimbaLink href="https://scrimba.com/links/vue-component-basics" title="Free Vue.js Components Basics Lesson" type="scrimba">
+  Watch an interactive video lesson on Scrimba
+</ScrimbaLink>
+
 Components allow us to split the UI into independent and reusable pieces, and think about each piece in isolation. It's common for an app to be organized into a tree of nested components:
 
 ![Component Tree](./images/components.png)

src/guide/essentials/template-syntax.md

@@ -1,5 +1,9 @@
 # Template Syntax {#template-syntax}
 
+<ScrimbaLink href="https://scrimba.com/links/vue-template-syntax" title="Free Vue.js Template Syntax Lesson" type="scrimba">
+  Watch an interactive video lesson on Scrimba
+</ScrimbaLink>
+
 Vue uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying component instance's data. All Vue templates are syntactically valid HTML that can be parsed by spec-compliant browsers and HTML parsers.
 
 Under the hood, Vue compiles the templates into highly-optimized JavaScript code. Combined with the reactivity system, Vue can intelligently figure out the minimal number of components to re-render and apply the minimal amount of DOM manipulations when the app state changes.

src/guide/quick-start.md

@@ -16,6 +16,8 @@ import { VTCodeGroup, VTCodeGroupTab } from '@vue/theme'
 
 - If you are already familiar with Node.js and the concept of build tools, you can also try a complete build setup right within your browser on [StackBlitz](https://vite.new/vue).
 
+- To get a walkthrough of the recommended setup, watch this interactive [Scrimba](http://scrimba.com/links/vue-quickstart) tutorial that shows you how to run, edit, and deploy your first Vue app.
+
 ## Creating a Vue Application {#creating-a-vue-application}
 
 :::tip Prerequisites

src/guide/typescript/composition-api.md

@@ -1,5 +1,9 @@
 # TypeScript with Composition API {#typescript-with-composition-api}
 
+<ScrimbaLink href="https://scrimba.com/links/vue-ts-composition-api" title="Free Vue.js TypeScript with Composition API Lesson" type="scrimba">
+  Watch an interactive video lesson on Scrimba
+</ScrimbaLink>
+
 > This page assumes you've already read the overview on [Using Vue with TypeScript](./overview).
 
 ## Typing Component Props {#typing-component-props}