Skip to content

Commit 24f373b

Browse files
70928manson70928manson
authored
Merge branch 'main' into patch-1
2 parents 4da0221 + fcee623 commit 24f373b

File tree

12 files changed

+99
-86
lines changed

12 files changed

+99
-86
lines changed

‎.vitepress/inlined-scripts/restorePreference.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,6 @@
88
restore('vue-docs-prefer-composition', 'prefer-composition', true)
99
restore('vue-docs-prefer-sfc', 'prefer-sfc', true)
1010

11-
window.__VUE_BANNER_ID__ = 'vueconf2025'
12-
restore(`vue-docs-banner-${__VUE_BANNER_ID__}`, 'banner-dismissed')
11+
// window.__VUE_BANNER_ID__ = ''
12+
// restore(`vue-docs-banner-${__VUE_BANNER_ID__}`, 'banner-dismissed')
1313
})()

‎.vitepress/theme/components/Banner.vue

Lines changed: 13 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -22,31 +22,16 @@ function dismiss() {
2222

2323
<template>
2424
<div class="banner" v-if="open">
25-
<p class="vt-banner-text">
26-
<span class="vt-text-primary">
27-
Vueconf.US
28-
</span>
29-
<span class="vt-tagline"> · The official Vue.js conf</span>
30-
<span class="vt-place"> · Tampa, USA</span>
31-
<span class="vt-date"> · 19-21 May 2025</span>
32-
<a target="_blank" class="vt-primary-action"
33-
href="https://vueconf.us/?utm_source=vuejs&utm_content=top_banner">
34-
Register
35-
</a>
36-
</p>
25+
<a target="_blank"></a>
3726
<button @click="dismiss">
3827
<VTIconPlus class="close" />
3928
</button>
40-
<p class="vt-banner-text vt-coupon">
41-
<span class="vt-text-primary">Use</span> VUEJSDOCS
42-
<span class="vt-text-primary"> $200 off</span>
43-
</p>
4429
</div>
4530
</template>
4631

4732
<style>
4833
html:not(.banner-dismissed) {
49-
--vt-banner-height: 60px;
34+
--vt-banner-height: 30px;
5035
}
5136
</style>
5237

@@ -65,12 +50,12 @@ html:not(.banner-dismissed) {
6550
font-weight: 600;
6651
color: #fff;
6752
background-color: var(--vt-c-green);
68-
background: #0f172a;
69-
display: flex;
70-
justify-content: center;
71-
align-items: center;
72-
73-
53+
background: linear-gradient(
54+
90deg,
55+
rgba(66, 184, 131, 1) 0%,
56+
rgba(39, 179, 137, 1) 19%,
57+
rgba(100, 126, 255, 1) 100%
58+
);
7459
}
7560
7661
.banner-dismissed .banner {
@@ -85,7 +70,7 @@ button {
8570
position: absolute;
8671
right: 0;
8772
top: 0;
88-
padding: 10px 10px;
73+
padding: 5px;
8974
}
9075
9176
.close {
@@ -94,61 +79,10 @@ button {
9479
fill: #fff;
9580
transform: rotate(45deg);
9681
}
97-
98-
.vt-banner-text {
99-
color: #fff;
100-
font-size: 16px;
101-
}
102-
103-
.vt-text-primary {
104-
color: #75c05e;
105-
}
106-
107-
.vt-primary-action {
108-
background: #75c05e;
109-
color: #121c1a;
110-
padding: 8px 15px;
111-
border-radius: 5px;
112-
font-size: 14px;
113-
text-decoration: none;
114-
margin: 0 10px;
115-
font-weight: bold;
116-
}
117-
118-
.vt-primary-action:hover {
119-
text-decoration: none;
120-
background: #c4d141;
121-
}
122-
123-
@media (max-width: 1280px) {
124-
.banner .vt-banner-text {
125-
font-size: 14px;
126-
}
127-
128-
129-
}
130-
131-
@media (max-width: 780px) {
132-
.vt-tagline {
133-
display: none;
134-
}
135-
.vt-primary-action {
136-
margin: 0 10px;
137-
padding: 5px 5px;
138-
}
139-
140-
.vt-time-now {
141-
display: none;
142-
}
143-
}
144-
145-
@media (max-width: 560px) {
146-
147-
.vt-place {
82+
/*
83+
@media (max-width: 720px) {
84+
a > span {
14885
display: none;
14986
}
150-
.vt-date {
151-
display: none;
152-
}
153-
}
87+
} */
15488
</style>

‎.vitepress/theme/components/ScrimbaLink.vue

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<template>
2+
<div class="scrimba">
3+
<a
4+
:href="href"
5+
target="_blank"
6+
rel="sponsored noopener"
7+
:title="title"
8+
>
9+
<slot>Watch a free interactive tutorial on Scrimba</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+
.scrimba {
23+
margin: 28px 0;
24+
background-color: var(--vt-c-bg-soft);
25+
padding: 1em 1.25em;
26+
border-radius: 2px;
27+
position: relative;
28+
display: flex;
29+
border-radius: 8px;
30+
}
31+
.scrimba a {
32+
color: var(--c-text);
33+
position: relative;
34+
padding-left: 36px;
35+
}
36+
.scrimba 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+
.scrimba 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>

‎.vitepress/theme/index.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,15 @@ import {
1010
} from './components/preferences'
1111
import SponsorsAside from './components/SponsorsAside.vue'
1212
import VueSchoolLink from './components/VueSchoolLink.vue'
13-
import Banner from './components/Banner.vue'
13+
import ScrimbaLink from './components/ScrimbaLink.vue'
14+
// import Banner from './components/Banner.vue'
1415
// import TextAd from './components/TextAd.vue'
1516

1617
export default Object.assign({}, VPTheme, {
1718
Layout: () => {
1819
// @ts-ignore
1920
return h(VPTheme.Layout, null, {
20-
banner: () => h(Banner),
21+
// banner: () => h(Banner),
2122
'sidebar-top': () => h(PreferenceSwitch),
2223
'sidebar-bottom': () => h(SecurityUpdateBtn),
2324
'aside-mid': () => h(SponsorsAside)
@@ -28,6 +29,7 @@ export default Object.assign({}, VPTheme, {
2829
app.provide('prefer-sfc', preferSFC)
2930
app.provide('filter-headers', filterHeadersByPreference)
3031
app.component('VueSchoolLink', VueSchoolLink)
32+
app.component('ScrimbaLink', ScrimbaLink)
3133
// app.component('TextAd', TextAd)
3234
}
3335
})

‎src/api/composition-api-lifecycle.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -210,7 +210,7 @@ Registers a hook to be called when an error propagating from a descendant compon
210210
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).
211211
:::
212212

213-
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.
213+
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.
214214

215215
The hook can return `false` to stop the error from propagating further. See error propagation details below.
216216

‎src/examples/src/crud/App/composition.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export default {
1515
)
1616

1717
watch(selected, (name) => {
18-
;[last.value, first.value] = name.split(', ')
18+
[last.value, first.value] = name.split(', ')
1919
})
2020

2121
function create() {

‎src/guide/components/v-model.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Component v-model {#component-v-model}
22

3+
<ScrimbaLink href="https://scrimba.com/links/vue-component-v-model" title="Free Vue.js Component v-model Lesson" type="scrimba">
4+
Watch an interactive video lesson on Scrimba
5+
</ScrimbaLink>
6+
37
## Basic Usage {#basic-usage}
48

59
`v-model` can be used on a component to implement a two-way binding.

‎src/guide/essentials/component-basics.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Components Basics {#components-basics}
22

3+
<ScrimbaLink href="https://scrimba.com/links/vue-component-basics" title="Free Vue.js Components Basics Lesson" type="scrimba">
4+
Watch an interactive video lesson on Scrimba
5+
</ScrimbaLink>
6+
37
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:
48

59
![Component Tree](./images/components.png)

‎src/guide/essentials/template-syntax.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Template Syntax {#template-syntax}
22

3+
<ScrimbaLink href="https://scrimba.com/links/vue-template-syntax" title="Free Vue.js Template Syntax Lesson" type="scrimba">
4+
Watch an interactive video lesson on Scrimba
5+
</ScrimbaLink>
6+
37
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.
48

59
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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@ import { VTCodeGroup, VTCodeGroupTab } from '@vue/theme'
1616

1717
- 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).
1818

19+
- 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.
20+
1921
## Creating a Vue Application {#creating-a-vue-application}
2022

2123
:::tip Prerequisites

‎src/guide/reusability/plugins.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ Use global properties scarcely, since it can quickly become confusing if too man
9797

9898
### Provide / Inject with Plugins {#provide-inject-with-plugins}
9999

100-
Plugins also allow us to use `inject` to provide a function or attribute to the plugin's users. For example, we can allow the application to have access to the `options` parameter to be able to use the translations object.
100+
Plugins also allow us to use `provide` to give plugin users access to a function or attribute. For example, we can allow the application to have access to the `options` parameter to be able to use the translations object.
101101

102102
```js{10}
103103
// plugins/i18n.js

‎src/guide/typescript/composition-api.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# TypeScript with Composition API {#typescript-with-composition-api}
22

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

0 commit comments

Comments
 (0)