Skip to content

Commit 31fe4bb

Browse files
danielkellyiodanielkellyio
authored
docs: add Vue school links (vuejs#980)
1 parent 2c01a6e commit 31fe4bb

File tree

9 files changed

+106
-0
lines changed

9 files changed

+106
-0
lines changed

‎docs/.vitepress/components/VueSchoolLink.vue

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<template>
2+
<div class="vueschool">
3+
<a
4+
:href="`${href}?friend=vuerouter`"
5+
target="_blank"
6+
rel="sponsored noopener"
7+
:title="title"
8+
>
9+
<slot>Watch a free video lesson on Vue School</slot>
10+
</a>
11+
</div>
12+
</template>
13+
<script>
14+
export default {
15+
props: {
16+
href: { type: String, required: true },
17+
title: { type: String, required: true }
18+
},
19+
}
20+
</script>
21+
<style scoped>
22+
.vueschool {
23+
margin-top: 20px;
24+
background-color: #e7ecf3;
25+
padding: 1em 1.25em;
26+
border-radius: 2px;
27+
color: #486491;
28+
position: relative;
29+
display: flex;
30+
}
31+
.vueschool a {
32+
color: #486491 !important;
33+
position: relative;
34+
padding-left: 36px;
35+
}
36+
.vueschool a:before {
37+
content: '';
38+
position: absolute;
39+
display: block;
40+
width: 30px;
41+
height: 30px;
42+
top: calc(50% - 15px);
43+
left: -4px;
44+
border-radius: 50%;
45+
background-color: #73abfe;
46+
}
47+
.vueschool a:after {
48+
content: '';
49+
position: absolute;
50+
display: block;
51+
width: 0;
52+
height: 0;
53+
top: calc(50% - 5px);
54+
left: 8px;
55+
border-top: 5px solid transparent;
56+
border-bottom: 5px solid transparent;
57+
border-left: 8px solid #fff;
58+
}
59+
</style>

‎docs/.vitepress/theme/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import DefaultTheme from 'vitepress/dist/client/theme-default'
22
import Layout from './Layout.vue'
3+
import VueSchoolLink from '../components/VueSchoolLink.vue'
34

45
export default {
56
...DefaultTheme,
67
Layout,
78
enhanceApp({ app, router, siteData }) {
9+
app.component('VueSchoolLink', VueSchoolLink)
810
// app is the Vue 3 app instance from createApp()
911
// router is VitePress' custom router (see `lib/app/router.js`)
1012
// siteData is a ref of current site-level metadata.

‎docs/guide/advanced/lazy-loading.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
# Lazy Loading Routes
22

3+
<VueSchoolLink
4+
href="https://vueschool.io/lessons/lazy-loading-routes-vue-cli-only"
5+
title="Learn about lazy loading routes"
6+
/>
7+
38
When building apps with a bundler, the JavaScript bundle can become quite large, and thus affect the page load time. It would be more efficient if we can split each route's components into a separate chunks, and only load them when the route is visited.
49

510
Vue Router supports [dynamic imports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Dynamic_Imports) out of the box, meaning you can replace static imports with dynamic ones:

‎docs/guide/advanced/transitions.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
# Transitions
22

3+
<VueSchoolLink
4+
href="https://vueschool.io/lessons/route-transitions"
5+
title="Learn about route transitions"
6+
/>
7+
38
In order to use transitions on your route components and animate navigations, you need to use the [v-slot API](../../api/#router-view-s-v-slot):
49

510
```html

‎docs/guide/essentials/dynamic-matching.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
# Dynamic Route Matching with Params
22

3+
<VueSchoolLink
4+
href="https://vueschool.io/lessons/dynamic-routes"
5+
title="Learn about dynamic route matching with params"
6+
/>
7+
38
Very often we will need to map routes with the given pattern to the same component. For example we may have a `User` component which should be rendered for all users but with different user IDs. In Vue Router we can use a dynamic segment in the path to achieve that, we call that a _param_:
49

510
```js
@@ -45,6 +50,11 @@ A working demo of this example can be found [here](https://codesandbox.io/s/rout
4550

4651
## Reacting to Params Changes
4752

53+
<VueSchoolLink
54+
href="https://vueschool.io/lessons/reacting-to-param-changes"
55+
title="Learn how to react to param changes"
56+
/>
57+
4858
One thing to note when using routes with params is that when the user navigates from `/users/johnny` to `/users/jolyne`, **the same component instance will be reused**. Since both routes render the same component, this is more efficient than destroying the old instance and then creating a new one. **However, this also means that the lifecycle hooks of the component will not be called**.
4959

5060
To react to params changes in the same component, you can simply watch anything on the `$route` object, in this scenario, the `$route.params`:
@@ -77,6 +87,11 @@ const User = {
7787

7888
## Catch all / 404 Not found Route
7989

90+
<VueSchoolLink
91+
href="https://vueschool.io/lessons/404-not-found-page"
92+
title="Learn how to make a catch all/404 not found route"
93+
/>
94+
8095
Regular params will only match characters in between url fragments, separated by `/`. If we want to match **anything**, we can use a custom _param_ regexp by adding the regexp inside parentheses right after the _param_:
8196

8297
```js

‎docs/guide/essentials/history-mode.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
# Different History modes
22

3+
<VueSchoolLink
4+
href="https://vueschool.io/lessons/history-mode"
5+
title="Learn about the differences between Hash Mode and HTML5 Mode"
6+
/>
7+
38
The `history` option when creating the router instance allows us to choose among different history modes.
49

510
## Hash Mode

‎docs/guide/essentials/named-routes.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
# Named Routes
22

3+
<VueSchoolLink
4+
href="https://vueschool.io/lessons/named-routes"
5+
title="Learn about the named routes"
6+
/>
7+
38
Alongside the `path`, you can provide a `name` to any route. This has the following advantages:
49

510
- No hardcoded URLs

‎docs/guide/essentials/nested-routes.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
# Nested Routes
22

3+
<VueSchoolLink
4+
href="https://vueschool.io/lessons/nested-routes"
5+
title="Learn about nested routes"
6+
/>
7+
38
Some application's UIs are composed of components that are nested multiple levels deep. In this case, it is very common that the segments of a URL corresponds to a certain structure of nested components, for example:
49

510
```

‎docs/guide/essentials/passing-props.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
# Passing Props to Route Components
22

3+
<VueSchoolLink
4+
href="https://vueschool.io/lessons/route-props"
5+
title="Learn how to pass props to route components"
6+
/>
7+
38
Using `$route` in your component creates a tight coupling with the route which limits the flexibility of the component as it can only be used on certain URLs. While this is not necessarily a bad thing, we can decouple this behavior with a `props` option:
49

510
We can replace

0 commit comments

Comments
 (0)