add Vue School links

.vitepress/theme/components/VueSchoolLink.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="vueschool">
+    <a
+      :href="`${href}?friend=vuejs`"
+      target="_blank"
+      rel="sponsored noopener"
+      :title="title"
+    >
+      <slot>Watch a free video lesson on Vue School</slot>
+    </a>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    href: { type: String, required: true },
+    title: { type: String, required: true },
+  },
+}
+</script>
+<style scoped>
+.vueschool {
+  margin: 28px 0;
+  background-color: var(--vt-c-bg-soft);
+  padding: 1em 1.25em;
+  border-radius: 2px;
+  position: relative;
+  display: flex;
+  border-radius: 8px;
+}
+.vueschool a {
+  color: var(--c-text);
+  position: relative;
+  padding-left: 36px;
+}
+.vueschool a:before {
+  content: '';
+  position: absolute;
+  display: block;
+  width: 30px;
+  height: 30px;
+  top: calc(50% - 15px);
+  left: -4px;
+  border-radius: 50%;
+  background-color: #73abfe;
+}
+.vueschool 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>

.vitepress/theme/index.ts

@@ -3,6 +3,7 @@ import { h, App } from 'vue'
 import { VPTheme } from '@vue/theme'
 import Banner from './components/Banner.vue'
 import PreferenceSwitch from './components/PreferenceSwitch.vue'
+import VueSchoolLink from './components/VueSchoolLink.vue'
 import {
   preferComposition,
   preferSFC,
@@ -25,5 +26,6 @@ export default Object.assign({}, VPTheme, {
     app.provide('prefer-composition', preferComposition)
     app.provide('prefer-sfc', preferSFC)
     app.provide('filter-headers', filterHeadersByPreference)
+    app.component('VueSchoolLink', VueSchoolLink)
   }
 })

src/guide/components/events.md

@@ -2,6 +2,10 @@
 
 > This page assumes you've already read the [Components Basics](/guide/essentials/component-basics). Read that first if you are new to components.
 
+<div class="options-api">
+  <VueSchoolLink href="https://vueschool.io/lessons/defining-custom-events-emits" title="Free Vue.js Lesson on Defining Custom Events"/>
+</div>
+
 ## Emitting and Listening to Events
 
 A component can emit custom events directly in template expressions (e.g. in a `v-on` handler) using the built-in `$emit` function:

src/guide/components/props.md

@@ -2,6 +2,10 @@
 
 > This page assumes you've already read the [Components Basics](/guide/essentials/component-basics). Read that first if you are new to components.
 
+<div class="options-api">
+  <VueSchoolLink href="https://vueschool.io/lessons/vue-3-reusable-components-with-props" title="Free Vue.js Props Lesson"/>
+</div>
+
 ## Props Declaration
 
 Vue components require explicit props declaration so that Vue knows what external props passed to the component should be treated as fallthrough attributes (which will be discussed in the next section).

src/guide/components/slots.md

@@ -2,6 +2,8 @@
 
 > This page assumes you've already read the [Components Basics](/guide/essentials/component-basics). Read that first if you are new to components.
 
+<VueSchoolLink href="https://vueschool.io/lessons/vue-3-component-slots" title="Free Vue.js Slots Lesson"/>
+
 ## Slot Content and Outlet
 
 We have learned that components can accept props, which can be JavaScript values of any type. But how about template content? In some cases, we may want to pass a template fragment to a child component, and let the child component render the fragment within its own template.

src/guide/essentials/class-and-style.md

@@ -4,6 +4,14 @@ A common need for data binding is manipulating an element's class list and its i
 
 ## Binding HTML Classes
 
+<div class="options-api">
+  <VueSchoolLink href="https://vueschool.io/lessons/dynamic-css-classes-with-vue-3" title="Free Vue.js Dynamic CSS Classes Lesson"/>
+</div>
+
+<div class="composition-api">
+  <VueSchoolLink href="https://vueschool.io/lessons/vue-fundamentals-capi-dynamic-css-classes-with-vue" title="Free Vue.js Dynamic CSS Classes Lesson"/>
+</div>
+
 ### Binding to Objects
 
 We can pass an object to `:class` (short for `v-bind:class`) to dynamically toggle classes:

src/guide/essentials/computed.md

@@ -1,5 +1,13 @@
 # Computed Properties
 
+<div class="options-api">
+  <VueSchoolLink href="https://vueschool.io/lessons/computed-properties-in-vue-3" title="Free Vue.js Computed Properties Lesson"/>
+</div>
+
+<div class="composition-api">
+  <VueSchoolLink href="https://vueschool.io/lessons/vue-fundamentals-capi-computed-properties-in-vue-with-the-composition-api" title="Free Vue.js Computed Properties Lesson"/>
+</div>
+
 ## Basic Example
 
 In-template expressions are very convenient, but they are meant for simple operations. Putting too much logic in your templates can make them bloated and hard to maintain. For example, if we have an object with a nested array:

src/guide/essentials/conditional.md

@@ -1,5 +1,13 @@
 # Conditional Rendering
 
+<div class="options-api">
+  <VueSchoolLink href="https://vueschool.io/lessons/conditional-rendering-in-vue-3" title="Free Vue.js Conditional Rendering Lesson"/>
+</div>
+
+<div class="composition-api">
+  <VueSchoolLink href="https://vueschool.io/lessons/vue-fundamentals-capi-conditionals-in-vue" title="Free Vue.js Conditional Rendering Lesson"/>
+</div>
+
 <script setup>
 import { ref } from 'vue'
 const awesome = ref(true)

src/guide/essentials/event-handling.md

@@ -1,5 +1,9 @@
 # Event Handling
 
+<div class="options-api">
+  <VueSchoolLink href="https://vueschool.io/lessons/user-events-in-vue-3" title="Free Vue.js Events Lesson"/>
+</div>
+
 ## Listening to Events
 
 We can use the `v-on` directive, which we typically shorten to the `@` symbol, to listen to DOM events and run some JavaScript when they're triggered. The usage would be `v-on:click="handler"` or with the shortcut, `@click="handler"`.

src/guide/essentials/forms.md

@@ -15,6 +15,14 @@ const multiSelected = ref([])
 
 # Form Input Bindings
 
+<div class="options-api">
+  <VueSchoolLink href="https://vueschool.io/lessons/user-inputs-vue-devtools-in-vue-3" title="Free Lesson on User Inputs with Vue.js"/>
+</div>
+
+<div class="composition-api">
+  <VueSchoolLink href="https://vueschool.io/lessons/vue-fundamentals-capi-user-inputs-in-vue" title="Free Lesson on User Inputs with Vue.js"/>
+</div>
+
 When dealing with forms on the frontend, we often need to sync the state of form input elements with corresponding state in JavaScript. It can be cumbersome to manually wire up value bindings and change event listeners:
 
 ```vue-html

src/guide/essentials/list.md

@@ -1,5 +1,13 @@
 # List Rendering
 
+<div class="options-api">
+  <VueSchoolLink href="https://vueschool.io/lessons/list-rendering-in-vue-3" title="Free Vue.js List Rendering Lesson"/>
+</div>
+
+<div class="composition-api">
+  <VueSchoolLink href="https://vueschool.io/lessons/vue-fundamentals-capi-list-rendering-in-vue" title="Free Vue.js List Rendering Lesson"/>
+</div>
+
 ## `v-for`
 
 We can use the `v-for` directive to render a list of items based on an array. The `v-for` directive requires a special syntax in the form of `item in items`, where `items` is the source data array and `item` is an **alias** for the array element being iterated on:

src/guide/essentials/reactivity-fundamentals.md

@@ -165,6 +165,8 @@ Top-level imports and variables declared in `<script setup>` are automatically u
 
 ## Declaring Methods \*
 
+<VueSchoolLink href="https://vueschool.io/lessons/methods-in-vue-3" title="Free Vue.js Methods Lesson"/>
+
 To add methods to a component instance we use the `methods` option. This should be an object containing the desired methods:
 
 ```js{7-11}

src/guide/scaling-up/routing.md

@@ -3,6 +3,11 @@
 ## Official Router
 
 <!-- TODO update links -->
+<div>
+  <VueSchoolLink href="https://vueschool.io/courses/vue-router-4-for-everyone" title="Free Vue Router Course">
+    Watch a Free Video Course on Vue School
+  </VueSchoolLink>
+</div>
 
 For most Single Page Applications, it's recommended to use the officially-supported [vue-router library](https://github.com/vuejs/vue-router-next). For more details, see vue-router's [documentation](https://router.vuejs.org/).