17 |
27 |
18 |
21 |
22 | {{ product.name }}
19 |{{ product.description }}
20 |
23 |
26 | ${{ product.price }}
24 |FREE
25 |-
21 |
-
27 | 28 | 29 | 30 | 31 |32 | 42 |
43 |
Vue is awesome!
3 |Oh no 😢
4 | -------------------------------------------------------------------------------- /src/guide/best-practices/images/AccessiblePlaceholder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abdelaziz18003/docs/main/src/guide/best-practices/images/AccessiblePlaceholder.png -------------------------------------------------------------------------------- /src/tutorial/src/step-11/_hint/App/composition.js: -------------------------------------------------------------------------------- 1 | import ChildComp from './ChildComp.vue' 2 | 3 | export default { 4 | components: { 5 | ChildComp 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/ecosystem/themes.md: -------------------------------------------------------------------------------- 1 | --- 2 | page: true 3 | --- 4 | 5 | 8 | 9 |
2 |
3 |
4 |
5 |
--------------------------------------------------------------------------------
/src/tutorial/src/step-13/ChildComp/composition.js:
--------------------------------------------------------------------------------
1 | export default {
2 | emits: ['response'],
3 | setup(props, { emit }) {
4 | emit('response', 'hello from child')
5 | return {}
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/src/examples/src/markdown/import-map.json:
--------------------------------------------------------------------------------
1 | {
2 | "imports": {
3 | "marked": "https://cdn.jsdelivr.net/npm/marked/+esm",
4 | "lodash-es": "https://cdn.jsdelivr.net/npm/lodash-es/+esm"
5 | }
6 | }
7 |
--------------------------------------------------------------------------------
/src/partners/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | page: true
3 | footer: false
4 | ---
5 |
6 |
9 |
10 | Todo id: {{ todoId }}
2 | 3 |Loading...
4 |{{ todoData }}
5 |
--------------------------------------------------------------------------------
/src/tutorial/src/step-6/App/options.js:
--------------------------------------------------------------------------------
1 | export default {
2 | data() {
3 | return {
4 | awesome: true
5 | }
6 | },
7 | methods: {
8 | toggle() {
9 | // ...
10 | }
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/src/tutorial/src/step-3/App/composition.js:
--------------------------------------------------------------------------------
1 | import { ref } from 'vue'
2 |
3 | export default {
4 | setup() {
5 | const titleClass = ref('title')
6 |
7 | return {
8 | titleClass
9 | }
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/src/tutorial/src/step-9/App/composition.js:
--------------------------------------------------------------------------------
1 | import { ref } from 'vue'
2 |
3 | export default {
4 | setup() {
5 | const pElementRef = ref(null)
6 |
7 | return {
8 | pElementRef
9 | }
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/src/examples/src/modal/App/options.js:
--------------------------------------------------------------------------------
1 | import Modal from './Modal.vue'
2 |
3 | export default {
4 | components: {
5 | Modal
6 | },
7 | data() {
8 | return {
9 | showModal: false
10 | }
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/src/tutorial/src/step-4/_hint/App/options.js:
--------------------------------------------------------------------------------
1 | export default {
2 | data() {
3 | return {
4 | count: 0
5 | }
6 | },
7 | methods: {
8 | increment() {
9 | this.count++
10 | }
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | [*]
2 | charset = utf-8
3 | indent_style = space
4 | indent_size = 2
5 | end_of_line = lf
6 | insert_final_newline = true
7 | trim_trailing_whitespace = true
8 |
9 | [*.md]
10 | trim_trailing_whitespace = false
11 |
--------------------------------------------------------------------------------
/src/examples/src/grid/App/template.html:
--------------------------------------------------------------------------------
1 |
4 | Current component: B
8 | Message is: {{ msg }} 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/tutorial/src/step-15/App/options.js: -------------------------------------------------------------------------------- 1 | import JSConfetti from 'js-confetti' 2 | 3 | const confetti = new JSConfetti() 4 | 5 | export default { 6 | mounted() { 7 | this.showConfetti() 8 | }, 9 | methods: { 10 | showConfetti() { 11 | confetti.addConfetti() 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/tutorial/src/step-2/_hint/App/composition.js: -------------------------------------------------------------------------------- 1 | import { reactive, ref } from 'vue' 2 | 3 | export default { 4 | setup() { 5 | const counter = reactive({ count: 0 }) 6 | const message = ref('Hello World!') 7 | 8 | return { 9 | counter, 10 | message 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/guide/built-ins/keep-alive-demos/CompA.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 |Current component: A
8 | count: {{ count }} 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/tutorial/src/step-14/App/composition.js: -------------------------------------------------------------------------------- 1 | import { ref } from 'vue' 2 | import ChildComp from './ChildComp.vue' 3 | 4 | export default { 5 | components: { 6 | ChildComp 7 | }, 8 | setup() { 9 | const msg = ref('from parent') 10 | 11 | return { 12 | msg 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/tutorial/src/step-4/_hint/App/composition.js: -------------------------------------------------------------------------------- 1 | import { ref } from 'vue' 2 | 3 | export default { 4 | setup() { 5 | const count = ref(0) 6 | 7 | function increment() { 8 | count.value++ 9 | } 10 | 11 | return { 12 | count, 13 | increment 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/tutorial/src/step-5/App/composition.js: -------------------------------------------------------------------------------- 1 | import { ref } from 'vue' 2 | 3 | export default { 4 | setup() { 5 | const text = ref('') 6 | 7 | function onInput(e) { 8 | text.value = e.target.value 9 | } 10 | 11 | return { 12 | text, 13 | onInput 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/examples/src/svg/PolyGraph/template.html: -------------------------------------------------------------------------------- 1 |-
6 |
- 7 | {{ todo.text }} 8 | 9 | 10 |
2 |
9 | {{ evalCell(cells[c][r]) }}
10 |
11 |
--------------------------------------------------------------------------------
/src/examples/src/cells/App/composition.js:
--------------------------------------------------------------------------------
1 | import Cell from './Cell.vue'
2 | import { cells } from './store.js'
3 |
4 | export default {
5 | components: {
6 | Cell
7 | },
8 | setup() {
9 | const cols = cells.map((_, i) => String.fromCharCode(65 + i))
10 | return {
11 | cols,
12 | cells
13 | }
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/src/examples/src/crud/App/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | font-size: inherit;
3 | }
4 |
5 | input {
6 | display: block;
7 | margin-bottom: 10px;
8 | }
9 |
10 | select {
11 | float: left;
12 | margin: 0 1em 1em 0;
13 | width: 14em;
14 | }
15 |
16 | .buttons {
17 | clear: both;
18 | }
19 |
20 | button + button {
21 | margin-left: 5px;
22 | }
23 |
--------------------------------------------------------------------------------
/src/tutorial/src/step-15/App/composition.js:
--------------------------------------------------------------------------------
1 | import JSConfetti from 'js-confetti'
2 |
3 | const confetti = new JSConfetti()
4 |
5 | export default {
6 | setup() {
7 | function showConfetti() {
8 | confetti.addConfetti()
9 | }
10 |
11 | showConfetti()
12 |
13 | return {
14 | showConfetti
15 | }
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/src/examples/src/svg/AxisLabel/options.js:
--------------------------------------------------------------------------------
1 | import { valueToPoint } from './util.js'
2 |
3 | export default {
4 | props: {
5 | stat: Object,
6 | index: Number,
7 | total: Number
8 | },
9 | computed: {
10 | point: function () {
11 | return valueToPoint(+this.stat.value + 10, this.index, this.total)
12 | }
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/src/public/logo.svg:
--------------------------------------------------------------------------------
1 |
9 |
--------------------------------------------------------------------------------
/src/examples/src/handling-input/App/options.js:
--------------------------------------------------------------------------------
1 | export default {
2 | data() {
3 | return {
4 | message: 'Hello World!'
5 | }
6 | },
7 | methods: {
8 | reverseMessage() {
9 | this.message = this.message.split('').reverse().join('')
10 | },
11 | notify() {
12 | alert('navigation was prevented.')
13 | }
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/src/examples/src/modal/App/template.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | custom header
8 | 9 |{{ (elapsed / 1000).toFixed(1) }}s
6 |
7 |
8 | Duration:
9 | {{ (duration / 1000).toFixed(1) }}s
10 |
11 |
12 |
--------------------------------------------------------------------------------
/env.d.ts:
--------------------------------------------------------------------------------
1 | /// | 5 | | {{ c }} | 6 |
|---|---|
| {{ i - 1 }} | 11 |
12 | |
14 |
7 | {{ item }}
8 |
9 |
10 | -
2 |
8 |
{{ canBook ? '' : 'Return date must be after departure date.' }}
12 | -------------------------------------------------------------------------------- /src/examples/src/conditionals-and-loops/App/template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |-
7 |
- {{ item }} 8 |
List is not empty, but hidden.
10 |List is empty.
11 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "dist", 4 | "target": "esnext", 5 | "module": "esnext", 6 | "moduleResolution": "node", 7 | "esModuleInterop": true, 8 | "resolveJsonModule": true, 9 | "allowJs": true, 10 | "strict": true, 11 | "jsx": "preserve", 12 | "baseUrl": ".", 13 | "paths": { 14 | "@theme/*": [".vitepress/theme/*"] 15 | } 16 | }, 17 | "include": ["env.d.ts", "src/**/*", ".vitepress/**/*"] 18 | } 19 | -------------------------------------------------------------------------------- /src/examples/src/hello-world/App/composition.js: -------------------------------------------------------------------------------- 1 | import { ref } from 'vue' 2 | 3 | export default { 4 | setup() { 5 | // A "ref" is a reactive data source that stores a value. 6 | // Technically, we don't need to wrap the string with ref() 7 | // in order to display it, but we will see in the next 8 | // example why it is needed if we ever intend to change 9 | // the value. 10 | const message = ref('Hello World!') 11 | 12 | return { 13 | message 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/examples/src/markdown/App/composition.js: -------------------------------------------------------------------------------- 1 | import { marked } from 'marked' 2 | import { debounce } from 'lodash-es' 3 | import { ref, computed } from 'vue' 4 | 5 | export default { 6 | setup() { 7 | const input = ref('# hello') 8 | 9 | const output = computed(() => marked(input.value)) 10 | 11 | const update = debounce((e) => { 12 | input.value = e.target.value 13 | }, 100) 14 | 15 | return { 16 | input, 17 | output, 18 | update 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/examples/src/form-bindings/App/composition.js: -------------------------------------------------------------------------------- 1 | import { ref } from 'vue' 2 | 3 | export default { 4 | setup() { 5 | const text = ref('Edit me') 6 | const checked = ref(true) 7 | const checkedNames = ref(['Jack']) 8 | const picked = ref('One') 9 | const selected = ref('A') 10 | const multiSelected = ref(['A']) 11 | 12 | return { 13 | text, 14 | checked, 15 | checkedNames, 16 | picked, 17 | selected, 18 | multiSelected 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/examples/src/cells/Cell/composition.js: -------------------------------------------------------------------------------- 1 | import { ref } from 'vue' 2 | import { cells, evalCell } from './store.js' 3 | 4 | export default { 5 | props: { 6 | c: Number, 7 | r: Number 8 | }, 9 | setup(props) { 10 | const editing = ref(false) 11 | 12 | function update(e) { 13 | editing.value = false 14 | cells[props.c][props.r] = e.target.value.trim() 15 | } 16 | 17 | return { 18 | cells, 19 | editing, 20 | evalCell, 21 | update 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/examples/src/crud/App/template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | 9 | 10 | 15 | -------------------------------------------------------------------------------- /src/public/_headers: -------------------------------------------------------------------------------- 1 | /* 2 | X-Frame-Options: ALLOW-FROM https://staging.certification.vuejs.org https://certification.vuejs.org https://certificates.dev https://staging.certificates.dev https://alemira.com https://*.alemira.com 3 | Content-Security-Policy: frame-ancestors https://staging.certification.vuejs.org https://certification.vuejs.org https://certificates.dev https://staging.certificates.dev https://alemira.com https://*.alemira.com 4 | 5 | /assets/* 6 | cache-control: max-age=31536000 7 | cache-control: immutable 8 | -------------------------------------------------------------------------------- /src/tutorial/src/step-7/App/options.js: -------------------------------------------------------------------------------- 1 | // give each todo a unique id 2 | let id = 0 3 | 4 | export default { 5 | data() { 6 | return { 7 | newTodo: '', 8 | todos: [ 9 | { id: id++, text: 'Learn HTML' }, 10 | { id: id++, text: 'Learn JavaScript' }, 11 | { id: id++, text: 'Learn Vue' } 12 | ] 13 | } 14 | }, 15 | methods: { 16 | addTodo() { 17 | // ... 18 | this.newTodo = '' 19 | }, 20 | removeTodo(todo) { 21 | // ... 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/tutorial/src/step-8/App/template.html: -------------------------------------------------------------------------------- 1 | 5 |-
6 |
- 7 | 8 | {{ todo.text }} 9 | 10 | 11 |
-
6 |
- 7 | 8 | {{ todo.text }} 9 | 10 | 11 |
7 |
8 |
9 | {{stat.value}}
10 |
11 |
12 |
13 |
17 |
18 | {{ stats }}
19 |
--------------------------------------------------------------------------------
/src/tutorial/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | page: true
3 | title: Tutorial
4 | sidebar: false
5 | aside: false
6 | footer: false
7 | returnToTop: false
8 | ---
9 |
10 |
23 |
24 |
8 |
9 |
10 |
12 |
13 |
14 |
15 |
26 |
--------------------------------------------------------------------------------
/src/examples/src/markdown/App/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | }
4 |
5 | .editor {
6 | height: 100vh;
7 | display: flex;
8 | }
9 |
10 | .input,
11 | .output {
12 | overflow: auto;
13 | width: 50%;
14 | height: 100%;
15 | box-sizing: border-box;
16 | padding: 0 20px;
17 | }
18 |
19 | .input {
20 | border: none;
21 | border-right: 1px solid #ccc;
22 | resize: none;
23 | outline: none;
24 | background-color: #f6f6f6;
25 | font-size: 14px;
26 | font-family: 'Monaco', courier, monospace;
27 | padding: 20px;
28 | }
29 |
30 | code {
31 | color: #f66;
32 | }
33 |
--------------------------------------------------------------------------------
/src/tutorial/src/step-10/_hint/App/composition.js:
--------------------------------------------------------------------------------
1 | import { ref, watch } from 'vue'
2 |
3 | export default {
4 | setup() {
5 | const todoId = ref(1)
6 | const todoData = ref(null)
7 |
8 | async function fetchData() {
9 | todoData.value = null
10 | const res = await fetch(
11 | `https://jsonplaceholder.typicode.com/todos/${todoId.value}`
12 | )
13 | todoData.value = await res.json()
14 | }
15 |
16 | fetchData()
17 |
18 | watch(todoId, fetchData)
19 |
20 | return {
21 | todoId,
22 | todoData
23 | }
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/src/guide/extras/demos/Colors.vue:
--------------------------------------------------------------------------------
1 |
10 |
11 |
12 | hello
11 |
17 |
20 |
21 |
22 |
29 |
--------------------------------------------------------------------------------
/src/examples/src/svg/PolyGraph/options.js:
--------------------------------------------------------------------------------
1 | import AxisLabel from './AxisLabel.vue'
2 | import { valueToPoint } from './util.js'
3 |
4 | export default {
5 | components: {
6 | AxisLabel
7 | },
8 | props: {
9 | stats: Array
10 | },
11 | computed: {
12 | // a computed property for the polygon's points
13 | points() {
14 | const total = this.stats.length
15 | return this.stats
16 | .map((stat, i) => {
17 | const { x, y } = valueToPoint(stat.value, i, total)
18 | return `${x},${y}`
19 | })
20 | .join(' ')
21 | }
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/src/examples/src/grid/Grid/template.html:
--------------------------------------------------------------------------------
1 | Move your mouse across this div...
18 |x: {{ x }}
19 || 7 | {{ capitalize(key) }} 8 | 9 | 10 | | 11 |
|---|
| 16 | {{entry[key]}} 17 | | 18 |
No matches found.
-------------------------------------------------------------------------------- /src/tutorial/src/step-7/_hint/App/options.js: -------------------------------------------------------------------------------- 1 | // give each todo a unique id 2 | let id = 0 3 | 4 | export default { 5 | data() { 6 | return { 7 | newTodo: '', 8 | todos: [ 9 | { id: id++, text: 'Learn HTML' }, 10 | { id: id++, text: 'Learn JavaScript' }, 11 | { id: id++, text: 'Learn Vue' } 12 | ] 13 | } 14 | }, 15 | methods: { 16 | addTodo() { 17 | this.todos.push({ id: id++, text: this.newTodo }) 18 | this.newTodo = '' 19 | }, 20 | removeTodo(todo) { 21 | this.todos = this.todos.filter((t) => t !== todo) 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/examples/src/grid/App/composition.js: -------------------------------------------------------------------------------- 1 | import DemoGrid from './Grid.vue' 2 | import { ref } from 'vue' 3 | 4 | export default { 5 | components: { 6 | DemoGrid 7 | }, 8 | setup() { 9 | const searchQuery = ref('') 10 | const gridColumns = ['name', 'power'] 11 | const gridData = [ 12 | { name: 'Chuck Norris', power: Infinity }, 13 | { name: 'Bruce Lee', power: 9000 }, 14 | { name: 'Jackie Chan', power: 7000 }, 15 | { name: 'Jet Li', power: 8000 } 16 | ] 17 | 18 | return { 19 | searchQuery, 20 | gridColumns, 21 | gridData 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/examples/src/attribute-bindings/App/template.html: -------------------------------------------------------------------------------- 1 |2 | 3 | Hover your mouse over me for a few seconds to see my dynamically bound title! 4 | 5 |
6 | 7 | 11 |12 | This should be red... but click me to toggle it. 13 |
14 | 15 | 16 |17 | This should be green, and should toggle between green and blue on click. 18 |
19 | -------------------------------------------------------------------------------- /src/examples/src/tree/TreeItem/template.html: -------------------------------------------------------------------------------- 1 |
6 | {{ model.name }}
7 | [{{ isOpen ? '-' : '+' }}]
8 |
9 | -
10 |
14 |
- + 20 |
20 | Type a number:
21 |
23 |
24 |
25 |
31 |
--------------------------------------------------------------------------------
/src/tutorial/src/step-7/App/composition.js:
--------------------------------------------------------------------------------
1 | import { ref } from 'vue'
2 |
3 | export default {
4 | setup() {
5 | // give each todo a unique id
6 | let id = 0
7 |
8 | const newTodo = ref('')
9 | const todos = ref([
10 | { id: id++, text: 'Learn HTML' },
11 | { id: id++, text: 'Learn JavaScript' },
12 | { id: id++, text: 'Learn Vue' }
13 | ])
14 |
15 | function addTodo() {
16 | // ...
17 | newTodo.value = ''
18 | }
19 |
20 | function removeTodo(todo) {
21 | // ...
22 | }
23 |
24 | return {
25 | newTodo,
26 | todos,
27 | addTodo,
28 | removeTodo
29 | }
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/src/examples/src/modal/Modal/template.html:
--------------------------------------------------------------------------------
1 | {{ tweened.number.toFixed(0) }}
22 |
3 |
23 |
4 |
22 |
5 | default header
6 |
7 |
8 |
9 | default body
10 |
11 |
12 |
21 |
12 |
15 |
18 |
19 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/src/tutorial/src/step-15/description.md:
--------------------------------------------------------------------------------
1 | # You Did It! {#you-did-it}
2 |
3 | You have finished the tutorial!
4 |
5 | At this point, you should have a good idea of what it's like to work with Vue. However, we covered a lot of things really fast and glossed over the details, so definitely keep learning! As a next step, you can:
6 |
7 | - Set up a real Vue project on your machine by following the [Quick Start](/guide/quick-start).
8 |
9 | - Go through the [Main Guide](/guide/essentials/application), which covers all the topics we learned so far in greater details, and much more.
10 |
11 | - Check out some more practical [Examples](/examples/).
12 |
13 | We can't wait to see what you build next!
14 |
--------------------------------------------------------------------------------
/src/tutorial/src/step-8/App/options.js:
--------------------------------------------------------------------------------
1 | let id = 0
2 |
3 | export default {
4 | data() {
5 | return {
6 | newTodo: '',
7 | hideCompleted: false,
8 | todos: [
9 | { id: id++, text: 'Learn HTML', done: true },
10 | { id: id++, text: 'Learn JavaScript', done: true },
11 | { id: id++, text: 'Learn Vue', done: false }
12 | ]
13 | }
14 | },
15 | computed: {
16 | // ...
17 | },
18 | methods: {
19 | addTodo() {
20 | this.todos.push({ id: id++, text: this.newTodo, done: false })
21 | this.newTodo = ''
22 | },
23 | removeTodo(todo) {
24 | this.todos = this.todos.filter((t) => t !== todo)
25 | }
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/src/examples/src/handling-input/App/template.html:
--------------------------------------------------------------------------------
1 |
5 | {{ message }}
6 | 7 | 11 | 12 | 13 | 14 | 15 | 16 | 20 | 21 | A link with e.preventDefault() 22 | 23 | -------------------------------------------------------------------------------- /.vitepress/theme/components/SponsorsAside.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 13 | 14 | 15 | 26 | -------------------------------------------------------------------------------- /src/guide/built-ins/transition-demos/SlideFade.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 |
8 |
9 |
10 |
12 |
13 |
14 |
15 |
30 |
--------------------------------------------------------------------------------
/src/ecosystem/themes/ThemePage.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 | hello
11 |
9 |
10 | Themes
11 | Check out the themes, UI Kits, and plugins. You can see how a real-world application is built with Vue by our partners.
12 |
13 |
14 |
17 | Want to feature your themes here? Contact us!
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/src/tutorial/tutorial.data.ts:
--------------------------------------------------------------------------------
1 | import path from 'path'
2 | import { createMarkdownRenderer } from 'vitepress'
3 | import { readExamples, ExampleData } from '../examples/examples.data'
4 |
5 | export declare const data: Record| Code | 14 |Message | 15 |
|---|---|
| 23 | | 24 | |
13 |
14 |
15 |
16 |
17 |
19 |
20 |
21 |
24 |
25 |
--------------------------------------------------------------------------------
/.vitepress/theme/components/preferences.ts:
--------------------------------------------------------------------------------
1 | import { ref } from 'vue'
2 | import { AugmentedHeader } from '../../headerMdPlugin'
3 |
4 | export const inBrowser = typeof window !== 'undefined'
5 | const get = (key: string, defaultValue = false): boolean =>
6 | inBrowser
7 | ? JSON.parse(localStorage.getItem(key) || String(defaultValue))
8 | : defaultValue
9 |
10 | export const preferCompositionKey = 'vue-docs-prefer-composition'
11 | export const preferComposition = ref(get(preferCompositionKey, true))
12 |
13 | export const preferSFCKey = 'vue-docs-prefer-sfc'
14 | export const preferSFC = ref(get(preferSFCKey, true))
15 |
16 | export function filterHeadersByPreference(h: AugmentedHeader) {
17 | return preferComposition.value ? !h.optionsOnly : !h.compositionOnly
18 | }
19 |
--------------------------------------------------------------------------------
/src/examples/src/tree/TreeItem/options.js:
--------------------------------------------------------------------------------
1 | export default {
2 | name: 'TreeItem', // necessary for self-reference
3 | props: {
4 | model: Object
5 | },
6 | data() {
7 | return {
8 | isOpen: false
9 | }
10 | },
11 | computed: {
12 | isFolder() {
13 | return this.model.children && this.model.children.length
14 | }
15 | },
16 | methods: {
17 | toggle() {
18 | if (this.isFolder) {
19 | this.isOpen = !this.isOpen
20 | }
21 | },
22 | changeType() {
23 | if (!this.isFolder) {
24 | this.model.children = []
25 | this.addChild()
26 | this.isOpen = true
27 | }
28 | },
29 | addChild() {
30 | this.model.children.push({
31 | name: 'new stuff'
32 | })
33 | }
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/src/examples/src/list-transition/App/options.js:
--------------------------------------------------------------------------------
1 | import { shuffle } from 'lodash-es'
2 |
3 | const getInitialItems = () => [1, 2, 3, 4, 5]
4 | let id = getInitialItems().length + 1
5 |
6 | export default {
7 | data() {
8 | return {
9 | items: getInitialItems()
10 | }
11 | },
12 | methods: {
13 | insert() {
14 | const i = Math.round(Math.random() * this.items.length)
15 | this.items.splice(i, 0, id++)
16 | },
17 | reset() {
18 | this.items = getInitialItems()
19 | id = getInitialItems().length + 1
20 | },
21 | shuffle() {
22 | this.items = shuffle(this.items)
23 | },
24 | remove(item) {
25 | const i = this.items.indexOf(item)
26 | if (i > -1) {
27 | this.items.splice(i, 1)
28 | }
29 | }
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/src/examples/src/list-transition/App/style.css:
--------------------------------------------------------------------------------
1 | .container {
2 | position: relative;
3 | padding: 0;
4 | }
5 |
6 | .item {
7 | width: 100%;
8 | height: 30px;
9 | background-color: #f3f3f3;
10 | border: 1px solid #666;
11 | box-sizing: border-box;
12 | }
13 |
14 | /* 1. declare transition */
15 | .fade-move,
16 | .fade-enter-active,
17 | .fade-leave-active {
18 | transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
19 | }
20 |
21 | /* 2. declare enter from and leave to state */
22 | .fade-enter-from,
23 | .fade-leave-to {
24 | opacity: 0;
25 | transform: scaleY(0.01) translate(30px, 0);
26 | }
27 |
28 | /* 3. ensure leaving items are taken out of layout flow so that moving
29 | animations can be calculated correctly. */
30 | .fade-leave-active {
31 | position: absolute;
32 | }
33 |
--------------------------------------------------------------------------------
/src/examples/src/fetching-data/App/template.html:
--------------------------------------------------------------------------------
1 | Latest Vue Core Commits
2 | 3 | 8 | 9 | 10 |vuejs/vue@{{ currentBranch }}
11 |-
12 |
-
13 | {{ sha.slice(0, 7) }}
14 | -
15 | by 18 | at {{ formatDate(commit.author.date) }} 19 |
20 |
8 |
9 |
10 |
14 |
15 |
16 |
17 |
36 |
--------------------------------------------------------------------------------
/src/examples/src/timer/App/options.js:
--------------------------------------------------------------------------------
1 | export default {
2 | data() {
3 | return {
4 | duration: 15 * 1000,
5 | elapsed: 0
6 | }
7 | },
8 | created() {
9 | this.reset()
10 | },
11 | unmounted() {
12 | cancelAnimationFrame(this.handle)
13 | },
14 | computed: {
15 | progressRate() {
16 | return Math.min(this.elapsed / this.duration, 1)
17 | }
18 | },
19 | methods: {
20 | update() {
21 | this.elapsed = performance.now() - this.lastTime
22 | if (this.elapsed >= this.duration) {
23 | cancelAnimationFrame(this.handle)
24 | } else {
25 | this.handle = requestAnimationFrame(this.update)
26 | }
27 | },
28 | reset() {
29 | this.elapsed = 0
30 | this.lastTime = performance.now()
31 | this.update()
32 | }
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/src/tutorial/src/step-8/App/composition.js:
--------------------------------------------------------------------------------
1 | import { ref } from 'vue'
2 |
3 | export default {
4 | setup() {
5 | let id = 0
6 |
7 | const newTodo = ref('')
8 | const hideCompleted = ref(false)
9 | const todos = ref([
10 | { id: id++, text: 'Learn HTML', done: true },
11 | { id: id++, text: 'Learn JavaScript', done: true },
12 | { id: id++, text: 'Learn Vue', done: false }
13 | ])
14 |
15 | function addTodo() {
16 | todos.value.push({ id: id++, text: newTodo.value, done: false })
17 | newTodo.value = ''
18 | }
19 |
20 | function removeTodo(todo) {
21 | todos.value = todos.value.filter((t) => t !== todo)
22 | }
23 |
24 | return {
25 | newTodo,
26 | hideCompleted,
27 | todos,
28 | addTodo,
29 | removeTodo
30 | }
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/src/tutorial/src/step-8/_hint/App/options.js:
--------------------------------------------------------------------------------
1 | let id = 0
2 |
3 | export default {
4 | data() {
5 | return {
6 | newTodo: '',
7 | hideCompleted: false,
8 | todos: [
9 | { id: id++, text: 'Learn HTML', done: true },
10 | { id: id++, text: 'Learn JavaScript', done: true },
11 | { id: id++, text: 'Learn Vue', done: false }
12 | ]
13 | }
14 | },
15 | computed: {
16 | filteredTodos() {
17 | return this.hideCompleted
18 | ? this.todos.filter((t) => !t.done)
19 | : this.todos
20 | }
21 | },
22 | methods: {
23 | addTodo() {
24 | this.todos.push({ id: id++, text: this.newTodo, done: false })
25 | this.newTodo = ''
26 | },
27 | removeTodo(todo) {
28 | this.todos = this.todos.filter((t) => t !== todo)
29 | }
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/.github/workflows/automerge.yml:
--------------------------------------------------------------------------------
1 | name: Dependabot auto-merge
2 | on: pull_request
3 |
4 | permissions:
5 | pull-requests: write
6 | contents: write
7 |
8 | jobs:
9 | dependabot:
10 | runs-on: ubuntu-latest
11 | if: ${{ github.actor == 'dependabot[bot]' }}
12 | steps:
13 | - name: Dependabot metadata
14 | id: metadata
15 | uses: dependabot/fetch-metadata@v1.1.1
16 | with:
17 | github-token: '${{ secrets.GITHUB_TOKEN }}'
18 | - name: Enable auto-merge for theme
19 | if: ${{contains(steps.metadata.outputs.dependency-names, '@vue/theme') && steps.metadata.outputs.update-type != 'version-update:semver-major'}}
20 | run: gh pr merge --auto --merge "$PR_URL"
21 | env:
22 | PR_URL: ${{github.event.pull_request.html_url}}
23 | GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
24 |
--------------------------------------------------------------------------------
/src/ecosystem/themes/ThemeList.vue:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 | 11 | Hello here is some bouncy text! 12 |
13 |
8 |
14 |
15 |
16 |
42 |
--------------------------------------------------------------------------------
/src/examples/src/fetching-data/App/options.js:
--------------------------------------------------------------------------------
1 | const API_URL = `https://api.github.com/repos/vuejs/core/commits?per_page=3&sha=`
2 |
3 | export default {
4 | data: () => ({
5 | branches: ['main', 'v2-compat'],
6 | currentBranch: 'main',
7 | commits: null
8 | }),
9 |
10 | created() {
11 | // fetch on init
12 | this.fetchData()
13 | },
14 |
15 | watch: {
16 | // re-fetch whenever currentBranch changes
17 | currentBranch: 'fetchData'
18 | },
19 |
20 | methods: {
21 | async fetchData() {
22 | const url = `${API_URL}${this.currentBranch}`
23 | this.commits = await (await fetch(url)).json()
24 | },
25 | truncate(v) {
26 | const newline = v.indexOf('\n')
27 | return newline > 0 ? v.slice(0, newline) : v
28 | },
29 | formatDate(v) {
30 | return v.replace(/T|Z/g, ' ')
31 | }
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/src/examples/src/tree/App/composition.js:
--------------------------------------------------------------------------------
1 | import { ref } from 'vue'
2 | import TreeItem from './TreeItem.vue'
3 |
4 | export default {
5 | components: {
6 | TreeItem
7 | },
8 | setup() {
9 | const treeData = ref({
10 | name: 'My Tree',
11 | children: [
12 | { name: 'hello' },
13 | { name: 'world' },
14 | {
15 | name: 'child folder',
16 | children: [
17 | {
18 | name: 'child folder',
19 | children: [{ name: 'hello' }, { name: 'world' }]
20 | },
21 | { name: 'hello' },
22 | { name: 'world' },
23 | {
24 | name: 'child folder',
25 | children: [{ name: 'hello' }, { name: 'world' }]
26 | }
27 | ]
28 | }
29 | ]
30 | })
31 |
32 | return {
33 | treeData
34 | }
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/src/examples/src/tree/TreeItem/composition.js:
--------------------------------------------------------------------------------
1 | import { ref, computed } from 'vue'
2 |
3 | export default {
4 | name: 'TreeItem', // necessary for self-reference
5 | props: {
6 | model: Object
7 | },
8 | setup(props) {
9 | const isOpen = ref(false)
10 | const isFolder = computed(() => {
11 | return props.model.children && props.model.children.length
12 | })
13 |
14 | function toggle() {
15 | isOpen.value = !isOpen.value
16 | }
17 |
18 | function changeType() {
19 | if (!isFolder.value) {
20 | props.model.children = []
21 | addChild()
22 | isOpen.value = true
23 | }
24 | }
25 |
26 | function addChild() {
27 | props.model.children.push({ name: 'new stuff' })
28 | }
29 |
30 | return {
31 | isOpen,
32 | isFolder,
33 | toggle,
34 | changeType,
35 | addChild
36 | }
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/src/examples/src/svg/App/options.js:
--------------------------------------------------------------------------------
1 | import PolyGraph from './PolyGraph.vue'
2 |
3 | export default {
4 | components: {
5 | PolyGraph
6 | },
7 | data: () => ({
8 | newLabel: '',
9 | stats: [
10 | { label: 'A', value: 100 },
11 | { label: 'B', value: 100 },
12 | { label: 'C', value: 100 },
13 | { label: 'D', value: 100 },
14 | { label: 'E', value: 100 },
15 | { label: 'F', value: 100 }
16 | ]
17 | }),
18 | methods: {
19 | add(e) {
20 | e.preventDefault()
21 | if (!this.newLabel) return
22 | this.stats.push({
23 | label: this.newLabel,
24 | value: 100
25 | })
26 | this.newLabel = ''
27 | },
28 | remove(stat) {
29 | if (this.stats.length > 3) {
30 | this.stats.splice(this.stats.indexOf(stat), 1)
31 | } else {
32 | alert("Can't delete more!")
33 | }
34 | }
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/.vitepress/theme/components/sponsors.ts:
--------------------------------------------------------------------------------
1 | // shared data across instances so we load only once
2 |
3 | import { ref } from 'vue'
4 |
5 | declare global {
6 | const fathom: {
7 | trackGoal: (id: string, value: number) => any
8 | }
9 | }
10 |
11 | export interface Sponsor {
12 | url: string
13 | img: string
14 | name: string
15 | description?: string
16 | priority?: boolean
17 | }
18 |
19 | export interface SponsorData {
20 | special: Sponsor[]
21 | platinum: Sponsor[]
22 | platinum_china: Sponsor[]
23 | gold: Sponsor[]
24 | silver: Sponsor[]
25 | bronze: Sponsor[]
26 | }
27 |
28 | export const data = ref
9 |
13 |
10 |
12 |
3 |
12 |
13 |
14 |
56 |
--------------------------------------------------------------------------------
/src/examples/src/circle-drawer/App/template.html:
--------------------------------------------------------------------------------
1 |
18 |
19 |
4 |
5 |
7 |
11 |
5 |
7 |
8 |
20 |
21 |
22 |
23 |
24 |
25 |
28 |
--------------------------------------------------------------------------------
/src/guide/extras/demos/SpreadSheet.vue:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 | Adjust radius of circle at ({{ selected.cx }}, {{ selected.cy }})
26 | 27 || 13 | | {{ c }} | 14 |
|---|---|
| {{ i - 1 }} | 19 |
20 | |
22 |
22 |
23 |
24 |
25 |
26 | {{ item }}
27 |
28 |
29 |
30 |
31 |
32 |
43 |
--------------------------------------------------------------------------------
/src/tutorial/src/step-6/description.md:
--------------------------------------------------------------------------------
1 | # Conditional Rendering {#conditional-rendering}
2 |
3 | We can use the `v-if` directive to conditionally render an element:
4 |
5 | ```vue-html
6 | Vue is awesome!
7 | ``` 8 | 9 | This `` will be rendered only if the value of `awesome` is [truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy). If `awesome` changes to a [falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy) value, it will be removed from the DOM.
10 |
11 | We can also use `v-else` and `v-else-if` to denote other branches of the condition:
12 |
13 | ```vue-html
14 | Vue is awesome!
15 | Oh no 😢
16 | ```
17 |
18 | Currently, the demo is showing both ``s at the same time, and the button does nothing. Try to add `v-if` and `v-else` directives to them, and implement the `toggle()` method so that we can use the button to toggle between them.
19 |
20 | More details on `v-if`: Guide - Conditional Rendering
21 |
--------------------------------------------------------------------------------
/src/examples/src/svg/App/composition.js:
--------------------------------------------------------------------------------
1 | import PolyGraph from './PolyGraph.vue'
2 | import { ref, reactive } from 'vue'
3 |
4 | export default {
5 | components: {
6 | PolyGraph
7 | },
8 | setup() {
9 | const newLabel = ref('')
10 | const stats = reactive([
11 | { label: 'A', value: 100 },
12 | { label: 'B', value: 100 },
13 | { label: 'C', value: 100 },
14 | { label: 'D', value: 100 },
15 | { label: 'E', value: 100 },
16 | { label: 'F', value: 100 }
17 | ])
18 |
19 | function add(e) {
20 | e.preventDefault()
21 | if (!newLabel.value) return
22 | stats.push({
23 | label: newLabel.value,
24 | value: 100
25 | })
26 | newLabel.value = ''
27 | }
28 |
29 | function remove(stat) {
30 | if (stats.length > 3) {
31 | stats.splice(stats.indexOf(stat), 1)
32 | } else {
33 | alert("Can't delete more!")
34 | }
35 | }
36 |
37 | return {
38 | newLabel,
39 | stats,
40 | add,
41 | remove
42 | }
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/src/guide/extras/demos/spreadSheetStore.js:
--------------------------------------------------------------------------------
1 | import { reactive } from 'vue'
2 |
3 | const COLS = 3
4 | const ROWS = 3
5 |
6 | export const cells = reactive(
7 | Array.from(Array(COLS).keys()).map((i) =>
8 | Array.from(Array(ROWS).keys()).map((i) => '')
9 | )
10 | )
11 |
12 | // initial state for demo
13 | cells[0][0] = '1'
14 | cells[0][1] = '2'
15 | cells[0][2] = '= A0 + A1'
16 |
17 | // adapted from https://codesandbox.io/s/jotai-7guis-task7-cells-mzoit?file=/src/atoms.ts
18 | // by @dai-shi
19 | export function evalCell(exp) {
20 | if (!exp.startsWith('=')) {
21 | return exp
22 | }
23 |
24 | // = A1 + B2 ---> get(0,1) + get(1,2)
25 | exp = exp
26 | .slice(1)
27 | .replace(
28 | /\b([A-Z])(\d{1,2})\b/g,
29 | (_, c, r) => `get(${c.charCodeAt(0) - 65},${r})`
30 | )
31 |
32 | try {
33 | return new Function('get', `return ${exp}`)(getCellValue)
34 | } catch (e) {
35 | return `#ERROR ${e}`
36 | }
37 | }
38 |
39 | function getCellValue(c, r) {
40 | const val = evalCell(cells[c][r])
41 | const num = Number(val)
42 | return Number.isFinite(num) ? num : val
43 | }
44 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2019 vuejs
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/.github/scripts/tag-alert-blocks.js:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 |
3 | const { exec } = require('child_process')
4 |
5 | /**
6 | * Execute a command and return stdout as string.
7 | * @param {string} command
8 | * @returns {Promise}
9 | */
10 | function run(command) {
11 | return new Promise((resolve, reject) => {
12 | exec(command, { encoding: 'utf-8' }, (error, stdout) =>
13 | error ? reject(error) : resolve(stdout)
14 | )
15 | })
16 | }
17 |
18 | const ALERT_BLOCK = /^\+\s*:::\s?(\w+)/m
19 |
20 | async function isUsingAlertBlock(base = 'origin/master') {
21 | const result = await run(`git diff --name-only ${base}`)
22 | const files = (
23 | await Promise.all(
24 | result
25 | .trim()
26 | .split(/\r?\n/)
27 | .map(file =>
28 | run(`git diff ${base} -- ${file}`)
29 | .then(diff => ALERT_BLOCK.test(diff))
30 | .then(usesAlertBlock => (usesAlertBlock ? file : ''))
31 | )
32 | )
33 | ).filter(Boolean)
34 |
35 | if (files.length) {
36 | return true
37 | }
38 |
39 | return false
40 | }
41 |
42 | module.exports = { isUsingAlertBlock }
43 |
--------------------------------------------------------------------------------
/src/guide/extras/demos/DisabledButton.vue:
--------------------------------------------------------------------------------
1 |
13 |
14 |
15 |
16 |
17 |
18 | This feature is disabled!
21 |
22 |
23 |
24 |
25 |
54 |
--------------------------------------------------------------------------------
/.vitepress/theme/index.ts:
--------------------------------------------------------------------------------
1 | import './styles/index.css'
2 | import { h, App } from 'vue'
3 | import { VPTheme } from '@vue/theme'
4 | import PreferenceSwitch from './components/PreferenceSwitch.vue'
5 | import {
6 | preferComposition,
7 | preferSFC,
8 | filterHeadersByPreference
9 | } from './components/preferences'
10 | import SponsorsAside from './components/SponsorsAside.vue'
11 | import VueSchoolLink from './components/VueSchoolLink.vue'
12 | import Banner from './components/Banner.vue'
13 | // import TextAd from './components/TextAd.vue'
14 |
15 | export default Object.assign({}, VPTheme, {
16 | Layout: () => {
17 | // @ts-ignore
18 | return h(VPTheme.Layout, null, {
19 | banner: () => h(Banner),
20 | 'sidebar-top': () => h(PreferenceSwitch),
21 | 'aside-mid': () => h(SponsorsAside)
22 | })
23 | },
24 | enhanceApp({ app }: { app: App }) {
25 | app.provide('prefer-composition', preferComposition)
26 | app.provide('prefer-sfc', preferSFC)
27 | app.provide('filter-headers', filterHeadersByPreference)
28 | app.component('VueSchoolLink', VueSchoolLink)
29 | // app.component('TextAd', TextAd)
30 | }
31 | })
32 |
--------------------------------------------------------------------------------
/.vitepress/textAdMdPlugin.ts:
--------------------------------------------------------------------------------
1 | import MarkdownIt from 'markdown-it'
2 |
3 | const excludedPages = [
4 | 'guide/introduction.md',
5 | // 'guide/quick-start.md',
6 | // 'guide/essentials/computed.md',
7 | // 'guide/essentials/conditional.md',
8 | // 'guide/essentials/list.md',
9 | // 'guide/essentials/event-handling.md',
10 | // 'guide/essentials/forms.md',
11 | // 'guide/components/registration.md',
12 | // 'guide/components/props.md',
13 | // 'guide/components/events.md',
14 | // 'guide/components/slots.md',
15 | // 'guide/built-ins/teleport.md',
16 | 'about/faq.md',
17 | 'about/team.md',
18 | 'about/releases.md',
19 | 'about/community-guide.md',
20 | 'about/coc.md',
21 | 'sponsor/index.md',
22 | 'translations/index.md'
23 | ]
24 |
25 | export const textAdPlugin = (md: MarkdownIt) => {
26 | md.renderer.rules.heading_close = (tokens, i, options, env, self) => {
27 | const relativePath = env.relativePath
28 | const renderedContent = self.renderToken(tokens, i, options)
29 |
30 | return excludedPages.includes(relativePath)
31 | ? renderedContent
32 | : renderedContent.replace(/<\/h1>/, '
`, using the `titleClass` ref as its value. If it's bound correctly, the text should turn red.
20 |
--------------------------------------------------------------------------------
/src/tutorial/src/step-14/description.md:
--------------------------------------------------------------------------------
1 | # Slots {#slots}
2 |
3 | In addition to passing data via props, the parent component can also pass down template fragments to the child via **slots**:
4 |
5 |
6 |
7 | ```vue-html
8 |
9 | This is some slot content!
10 |
11 | ```
12 |
13 |
14 |
15 |
16 | ```vue-html
17 |
18 | This is some slot content!
19 |
20 | ```
21 |
22 |
23 |
24 | In the child component, it can render the slot content from the parent using the `` element as outlet:
25 |
26 |
27 |
28 | ```vue-html
29 |
30 | ` outlet will be treated as "fallback" content: it will be displayed if the parent did not pass down any slot content:
44 |
45 | ```vue-html
46 | Fallback content
47 | ```
48 |
49 | Currently we are not passing any slot content to ``, so you should see the fallback content. Let's provide some slot content to the child while making use of the parent's `msg` state.
50 |
--------------------------------------------------------------------------------
/src/examples/src/flight-booker/App/options.js:
--------------------------------------------------------------------------------
1 | function stringToDate(str) {
2 | const [y, m, d] = str.split('-')
3 | return new Date(+y, m - 1, +d)
4 | }
5 |
6 | function dateToString(date) {
7 | return (
8 | date.getFullYear() +
9 | '-' +
10 | pad(date.getMonth() + 1) +
11 | '-' +
12 | pad(date.getDate())
13 | )
14 | }
15 |
16 | function pad(n, s = String(n)) {
17 | return s.length < 2 ? `0${s}` : s
18 | }
19 |
20 | export default {
21 | data() {
22 | return {
23 | flightType: 'one-way flight',
24 | departureDate: dateToString(new Date()),
25 | returnDate: dateToString(new Date())
26 | }
27 | },
28 | computed: {
29 | isReturn() {
30 | return this.flightType === 'return flight'
31 | },
32 | canBook() {
33 | return (
34 | !this.isReturn ||
35 | stringToDate(this.returnDate) > stringToDate(this.departureDate)
36 | )
37 | }
38 | },
39 | methods: {
40 | book() {
41 | alert(
42 | this.isReturn
43 | ? `You have booked a return flight leaving on ${this.departureDate} and returning on ${this.returnDate}.`
44 | : `You have booked a one-way flight leaving on ${this.departureDate}.`
45 | )
46 | }
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # vuejs.org
2 |
3 | ## Contributing
4 |
5 | This site is built with [VitePress](https://github.com/vuejs/vitepress) and depends on [@vue/theme](https://github.com/vuejs/vue-theme). Site content is written in Markdown format located in `src`. For simple edits, you can directly edit the file on GitHub and generate a Pull Request.
6 |
7 | For local development, [pnpm](https://pnpm.io/) is preferred as package manager:
8 |
9 | ```bash
10 | pnpm i
11 | pnpm run dev
12 | ```
13 |
14 | This project requires Node.js to be `v14.0.0` or higher, because we use new JavaScript features in our code, such as optional chaining.
15 |
16 |
17 | ## Working on the content
18 |
19 | - See VitePress docs on supported [Markdown Extensions](https://vitepress.dev/guide/markdown) and the ability to [use Vue syntax inside markdown](https://vitepress.dev/guide/using-vue).
20 |
21 | - See the [Writing Guide](https://github.com/vuejs/docs/blob/main/.github/contributing/writing-guide.md) for our rules and recommendations on writing and maintaining documentation content.
22 |
23 | ## Working on the theme
24 |
25 | If changes need to made for the theme, check out the [instructions for developing the theme alongside the docs](https://github.com/vuejs/vue-theme#developing-with-real-content).
26 |
--------------------------------------------------------------------------------
/src/examples/src/grid/Grid/options.js:
--------------------------------------------------------------------------------
1 | export default {
2 | props: {
3 | data: Array,
4 | columns: Array,
5 | filterKey: String
6 | },
7 | data() {
8 | return {
9 | sortKey: '',
10 | sortOrders: this.columns.reduce((o, key) => ((o[key] = 1), o), {})
11 | }
12 | },
13 | computed: {
14 | filteredData() {
15 | const sortKey = this.sortKey
16 | const filterKey = this.filterKey && this.filterKey.toLowerCase()
17 | const order = this.sortOrders[sortKey] || 1
18 | let data = this.data
19 | if (filterKey) {
20 | data = data.filter((row) => {
21 | return Object.keys(row).some((key) => {
22 | return String(row[key]).toLowerCase().indexOf(filterKey) > -1
23 | })
24 | })
25 | }
26 | if (sortKey) {
27 | data = data.slice().sort((a, b) => {
28 | a = a[sortKey]
29 | b = b[sortKey]
30 | return (a === b ? 0 : a > b ? 1 : -1) * order
31 | })
32 | }
33 | return data
34 | }
35 | },
36 | methods: {
37 | sortBy(key) {
38 | this.sortKey = key
39 | this.sortOrders[key] = this.sortOrders[key] * -1
40 | },
41 | capitalize(str) {
42 | return str.charAt(0).toUpperCase() + str.slice(1)
43 | }
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/src/guide/built-ins/transition-demos/JsHooks.vue:
--------------------------------------------------------------------------------
1 |
41 |
42 |
43 |
44 |
45 |
46 |
52 |
53 |
54 |
55 |
56 |
57 |
66 |
--------------------------------------------------------------------------------
/.vitepress/theme/components/ReplLoading.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | Repl is loading...
10 |
11 |
12 |
13 |
60 |
--------------------------------------------------------------------------------
/src/examples/src/circle-drawer/App/options.js:
--------------------------------------------------------------------------------
1 | function clone(circles) {
2 | return circles.map((c) => ({ ...c }))
3 | }
4 |
5 | export default {
6 | data() {
7 | return {
8 | history: [[]],
9 | index: 0,
10 | circles: [],
11 | selected: null,
12 | adjusting: false
13 | }
14 | },
15 | methods: {
16 | onClick({ clientX: x, clientY: y }) {
17 | if (this.adjusting) {
18 | this.adjusting = false
19 | this.selected = null
20 | this.push()
21 | return
22 | }
23 |
24 | this.selected = [...this.circles].reverse().find(({ cx, cy, r }) => {
25 | const dx = cx - x
26 | const dy = cy - y
27 | return Math.sqrt(dx * dx + dy * dy) <= r
28 | })
29 |
30 | if (!this.selected) {
31 | this.circles.push({
32 | cx: x,
33 | cy: y,
34 | r: 50
35 | })
36 | this.push()
37 | }
38 | },
39 |
40 | adjust(circle) {
41 | this.selected = circle
42 | this.adjusting = true
43 | },
44 |
45 | push() {
46 | this.history.length = ++this.index
47 | this.history.push(clone(this.circles))
48 | },
49 |
50 | undo() {
51 | this.circles = clone(this.history[--this.index])
52 | },
53 |
54 | redo() {
55 | this.circles = clone(this.history[++this.index])
56 | }
57 | }
58 | }
59 |
--------------------------------------------------------------------------------
/.vitepress/theme/styles/style-guide.css:
--------------------------------------------------------------------------------
1 | .style-example {
2 | border-radius: 8px 8px 12px 12px;
3 | margin: 1.6em 0;
4 | padding: 1.6em 1.6em 0.1px;
5 | position: relative;
6 | border: 1px solid transparent;
7 | transition: background-color 0.25s ease, border-color 0.25s ease;
8 | }
9 |
10 | .vt-doc .style-example h3 {
11 | margin: 0;
12 | font-size: 1.1em;
13 | }
14 |
15 | .style-example-bad {
16 | background: #f7e8e8;
17 | }
18 | .dark .style-example-bad {
19 | background: transparent;
20 | border-color: var(--vt-c-red);
21 | }
22 |
23 | .style-example-bad h3 {
24 | color: var(--vt-c-red);
25 | }
26 |
27 | .style-example-good {
28 | background: #ecfaf7;
29 | }
30 | .dark .style-example-good {
31 | background: transparent;
32 | border-color: var(--vt-c-green);
33 | }
34 |
35 | .style-example-good h3 {
36 | color: var(--vt-c-green);
37 | }
38 |
39 | .details summary {
40 | font-weight: bold !important;
41 | }
42 |
43 | .style-verb {
44 | font-size: 0.6em;
45 | display: inline-block;
46 | border-radius: 6px;
47 | font-size: 0.65em;
48 | line-height: 1;
49 | font-weight: 600;
50 | padding: 0.35em 0.4em 0.3em;
51 | position: relative;
52 | top: -0.15em;
53 | margin-right: 0.5em;
54 | color: var(--vt-c-bg);
55 | transition: color 0.5s;
56 | background-color: var(--vt-c-brand);
57 | }
58 |
59 | .style-verb.avoid {
60 | background-color: var(--vt-c-red);
61 | }
62 |
--------------------------------------------------------------------------------
/src/examples/src/crud/App/options.js:
--------------------------------------------------------------------------------
1 | export default {
2 | data() {
3 | return {
4 | names: ['Emil, Hans', 'Mustermann, Max', 'Tisch, Roman'],
5 | selected: '',
6 | prefix: '',
7 | first: '',
8 | last: ''
9 | }
10 | },
11 | computed: {
12 | filteredNames() {
13 | return this.names.filter((n) =>
14 | n.toLowerCase().startsWith(this.prefix.toLowerCase())
15 | )
16 | }
17 | },
18 | watch: {
19 | selected(name) {
20 | ;[this.last, this.first] = name.split(', ')
21 | }
22 | },
23 | methods: {
24 | create() {
25 | if (this.hasValidInput()) {
26 | const fullName = `${this.last}, ${this.first}`
27 | if (!this.names.includes(fullName)) {
28 | this.names.push(fullName)
29 | this.first = this.last = ''
30 | }
31 | }
32 | },
33 | update() {
34 | if (this.hasValidInput() && this.selected) {
35 | const i = this.names.indexOf(this.selected)
36 | this.names[i] = this.selected = `${this.last}, ${this.first}`
37 | }
38 | },
39 | del() {
40 | if (this.selected) {
41 | const i = this.names.indexOf(this.selected)
42 | this.names.splice(i, 1)
43 | this.selected = this.first = this.last = ''
44 | }
45 | },
46 | hasValidInput() {
47 | return this.first.trim() && this.last.trim()
48 | }
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/.vitepress/theme/components/VueSchoolLink.vue:
--------------------------------------------------------------------------------
1 |
2 |
12 |
13 |
21 |
60 |
--------------------------------------------------------------------------------
/src/about/team/TeamHero.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
8 |
10 |
11 |
13 |
14 |
15 |
16 |
17 |
76 |
--------------------------------------------------------------------------------
/src/tutorial/src/step-5/description.md:
--------------------------------------------------------------------------------
1 | # Form Bindings {#form-bindings}
2 |
3 | Using `v-bind` and `v-on` together, we can create two-way bindings on form input elements:
4 |
5 | ```vue-html
6 |
7 | ```
8 |
9 |
22 |
23 |
24 |
25 | ```js
26 | function onInput(e) {
27 | // a v-on handler receives the native DOM event
28 | // as the argument.
29 | text.value = e.target.value
30 | }
31 | ```
32 |
33 |
34 |
35 | Try typing in the input box - you should see the text in `` updating as you type.
36 |
37 | To simplify two-way bindings, Vue provides a directive, `v-model`, which is essentially syntactic sugar for the above:
38 |
39 | ```vue-html
40 |
41 | ```
42 |
43 | `v-model` automatically syncs the ``'s value with the bound state, so we no longer need to use an event handler for that.
44 |
45 | `v-model` works not only on text inputs, but also on other input types such as checkboxes, radio buttons, and select dropdowns. We cover more details in Guide - Form Bindings.
46 |
47 | Now, try to refactor the code to use `v-model` instead.
48 |
--------------------------------------------------------------------------------
/src/examples/src/grid/Grid/composition.js:
--------------------------------------------------------------------------------
1 | import { ref, computed } from 'vue'
2 |
3 | export default {
4 | props: {
5 | data: Array,
6 | columns: Array,
7 | filterKey: String
8 | },
9 | setup(props) {
10 | const sortKey = ref('')
11 | const sortOrders = ref(
12 | props.columns.reduce((o, key) => ((o[key] = 1), o), {})
13 | )
14 |
15 | const filteredData = computed(() => {
16 | let { data, filterKey } = props
17 | if (filterKey) {
18 | filterKey = filterKey.toLowerCase()
19 | data = data.filter((row) => {
20 | return Object.keys(row).some((key) => {
21 | return String(row[key]).toLowerCase().indexOf(filterKey) > -1
22 | })
23 | })
24 | }
25 | const key = sortKey.value
26 | if (key) {
27 | const order = sortOrders.value[key]
28 | data = data.slice().sort((a, b) => {
29 | a = a[key]
30 | b = b[key]
31 | return (a === b ? 0 : a > b ? 1 : -1) * order
32 | })
33 | }
34 | return data
35 | })
36 |
37 | function sortBy(key) {
38 | sortKey.value = key
39 | sortOrders.value[key] *= -1
40 | }
41 |
42 | function capitalize(str) {
43 | return str.charAt(0).toUpperCase() + str.slice(1)
44 | }
45 |
46 | return {
47 | sortKey,
48 | sortOrders,
49 | filteredData,
50 | sortBy,
51 | capitalize
52 | }
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/src/partners/components/PartnerAll.vue:
--------------------------------------------------------------------------------
1 |
22 |
23 |
24 |
Text Input
2 | {{ text }}
3 |
4 | Checkbox
5 |
6 |
7 |
8 |
12 | Multi Checkbox
13 |
14 |
15 |
16 |
17 |
18 |
19 | Checked names:
{{ checkedNames }}
20 |
21 | Radio
22 |
23 |
24 |
25 |
26 |
27 |
28 | Picked: {{ picked }}
29 |
30 | Select
31 |
37 | Selected: {{ selected }}
38 |
39 | Multi Select
40 |
45 | Selected: {{ multiSelected }}
46 |
--------------------------------------------------------------------------------
/src/guide/built-ins/transition-demos/ListStagger.vue:
--------------------------------------------------------------------------------
1 |
42 |
43 |
44 |
45 |
46 |
53 |
58 | {{ item.msg }}
59 |
60 |
61 |
62 |
63 |
--------------------------------------------------------------------------------
/.vitepress/theme/components/SiteMap.vue:
--------------------------------------------------------------------------------
1 |
12 |
13 |
14 |
15 |
16 |
17 | {{ col.text }}
18 |
19 | -
20 |
{{ row.text }}
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
68 |
--------------------------------------------------------------------------------
/src/guide/built-ins/transition-demos/BetweenElements.vue:
--------------------------------------------------------------------------------
1 |
8 |
9 |
10 |
11 | Click to cycle through states:
12 |
13 |
14 |
17 |
20 |
23 |
24 |
25 |
26 |
27 |
28 |
63 |
--------------------------------------------------------------------------------
/src/partners/components/PartnerHero.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 | {{ title || 'Vue Partners' }}
8 |
9 | Vue Partners are Vue-team endorsed agencies that provide first-class
10 | Vue consulting and development services. If your company is
11 | interested in being listed as a partner, please
12 | register your interest here.
15 |
16 |
17 |
18 |
19 |
72 |
--------------------------------------------------------------------------------
/src/partners/components/PartnerJoin.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Grow your business with Vue
5 |
6 | Generate leads for new projects, boost your credibility to your
7 | clients, and support the long term sustainability of Vue.js and its
8 | ecosystem.
9 |
10 | Become a partner
16 |
17 |
18 |
19 |
71 |
--------------------------------------------------------------------------------
/src/examples/src/crud/App/composition.js:
--------------------------------------------------------------------------------
1 | import { ref, reactive, computed, watch } from 'vue'
2 |
3 | export default {
4 | setup() {
5 | const names = reactive(['Emil, Hans', 'Mustermann, Max', 'Tisch, Roman'])
6 | const selected = ref('')
7 | const prefix = ref('')
8 | const first = ref('')
9 | const last = ref('')
10 |
11 | const filteredNames = computed(() =>
12 | names.filter((n) =>
13 | n.toLowerCase().startsWith(prefix.value.toLowerCase())
14 | )
15 | )
16 |
17 | watch(selected, (name) => {
18 | ;[last.value, first.value] = name.split(', ')
19 | })
20 |
21 | function create() {
22 | if (hasValidInput()) {
23 | const fullName = `${last.value}, ${first.value}`
24 | if (!names.includes(fullName)) {
25 | names.push(fullName)
26 | first.value = last.value = ''
27 | }
28 | }
29 | }
30 |
31 | function update() {
32 | if (hasValidInput() && selected.value) {
33 | const i = names.indexOf(selected.value)
34 | names[i] = selected.value = `${last.value}, ${first.value}`
35 | }
36 | }
37 |
38 | function del() {
39 | if (selected.value) {
40 | const i = names.indexOf(selected.value)
41 | names.splice(i, 1)
42 | selected.value = first.value = last.value = ''
43 | }
44 | }
45 |
46 | function hasValidInput() {
47 | return first.value.trim() && last.value.trim()
48 | }
49 |
50 | return {
51 | filteredNames,
52 | selected,
53 | prefix,
54 | first,
55 | last,
56 | create,
57 | update,
58 | del
59 | }
60 | }
61 | }
62 |
--------------------------------------------------------------------------------
/src/tutorial/src/step-13/description.md:
--------------------------------------------------------------------------------
1 | # Emits {#emits}
2 |
3 | In addition to receiving props, a child component can also emit events to the parent:
4 |
5 |
6 |
7 |
8 | ```vue
9 |
16 | ```
17 |
18 |
19 |
20 |
21 |
22 | ```js
23 | export default {
24 | // declare emitted events
25 | emits: ['response'],
26 | setup(props, { emit }) {
27 | // emit with argument
28 | emit('response', 'hello from child')
29 | }
30 | }
31 | ```
32 |
33 |
34 |
35 |
36 |
37 |
51 |
52 | The first argument to `emit()` is the event name. Any additional arguments are passed on to the event listener.
53 |
54 | The parent can listen to child-emitted events using `v-on` - here the handler receives the extra argument from the child emit call and assigns it to local state:
55 |
56 |
57 |
58 | ```vue-html
59 |
39 |
40 | {{ item }}
41 |
42 |
43 |
44 |
45 |
46 |
65 |
--------------------------------------------------------------------------------
/src/tutorial/src/step-12/description.md:
--------------------------------------------------------------------------------
1 | # Props {#props}
2 |
3 | A child component can accept input from the parent via **props**. First, it needs to declare the props it accepts:
4 |
5 |
6 |
7 |
8 | ```vue
9 |
10 |
15 | ```
16 |
17 | Note `defineProps()` is a compile-time macro and doesn't need to be imported. Once declared, the `msg` prop can be used in the child component's template. It can also be accessed in JavaScript via the returned object of `defineProps()`.
18 |
19 |
20 |
21 |
22 |
23 | ```js
24 | // in child component
25 | export default {
26 | props: {
27 | msg: String
28 | },
29 | setup(props) {
30 | // access props.msg
31 | }
32 | }
33 | ```
34 |
35 | Once declared, the `msg` prop is exposed on `this` and can be used in the child component's template. The received props are passed to `setup()` as the first argument.
36 |
37 |
38 |
39 |
40 |
41 |
55 |
56 | The parent can pass the prop to the child just like attributes. To pass a dynamic value, we can also use the `v-bind` syntax:
57 |
58 |
59 |
60 | ```vue-html
61 |
10 |
11 | Hello
12 |
13 |
14 |
15 |
16 |
17 |
65 |
--------------------------------------------------------------------------------
/src/tutorial/src/step-7/description.md:
--------------------------------------------------------------------------------
1 | # List Rendering {#list-rendering}
2 |
3 | We can use the `v-for` directive to render a list of elements based on a source array:
4 |
5 | ```vue-html
6 |
7 | -
8 | {{ todo.text }}
9 |
10 |
11 | ```
12 |
13 | Here `todo` is a local variable representing the array element currently being iterated on. It's only accessible on or inside the `v-for` element, similar to a function scope.
14 |
15 | Notice how we are also giving each todo object a unique `id`, and binding it as the special `key` attribute for each ``. The `key` allows Vue to accurately move each ` ` to match the position of its corresponding object in the array.
16 |
17 | There are two ways to update the list:
18 |
19 | 1. Call [mutating methods](https://stackoverflow.com/questions/9009879/which-javascript-array-functions-are-mutating) on the source array:
20 |
21 |
22 |
23 | ```js
24 | todos.value.push(newTodo)
25 | ```
26 |
27 |
28 |
35 |
36 | 2. Replace the array with a new one:
37 |
38 |
39 |
40 | ```js
41 | todos.value = todos.value.filter(/* ... */)
42 | ```
43 |
44 |
45 |
52 |
53 | Here we have a simple todo list - try to implement the logic for `addTodo()` and `removeTodo()` methods to make it work!
54 |
55 | More details on `v-for`: Guide - List Rendering
56 |
--------------------------------------------------------------------------------
/src/tutorial/src/step-11/description.md:
--------------------------------------------------------------------------------
1 | # Components {#components}
2 |
3 | So far, we've only been working with a single component. Real Vue applications are typically created with nested components.
4 |
5 | A parent component can render another component in its template as a child component. To use a child component, we need to first import it:
6 |
7 |
8 |
9 |
10 | ```js
11 | import ChildComp from './ChildComp.vue'
12 | ```
13 |
14 |
15 |
16 |
17 |
34 |
35 |
36 |
37 | Then, we can use the component in the template as:
38 |
39 | ```vue-html
40 |
11 |
12 |
13 | ![]()
14 |
15 |
16 |
28 |
29 |
30 |
31 |
99 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | ### OSX ###
2 | # General
3 | .DS_Store
4 | .AppleDouble
5 | .LSOverride
6 |
7 | # Thumbnails
8 | ._*
9 |
10 | # Files that might appear in the root of a volume
11 | .DocumentRevisions-V100
12 | .fseventsd
13 | .Spotlight-V100
14 | .TemporaryItems
15 | .Trashes
16 | .VolumeIcon.icns
17 | .com.apple.timemachine.donotpresent
18 |
19 | # Directories potentially created on remote AFP share
20 | .AppleDB
21 | .AppleDesktop
22 | Network Trash Folder
23 | Temporary Items
24 | .apdisk
25 |
26 | ### Node ###
27 | # Logs
28 | logs
29 | *.log
30 | npm-debug.log*
31 | yarn-debug.log*
32 | yarn-error.log*
33 | lerna-debug.log*
34 |
35 | # Diagnostic reports (https://nodejs.org/api/report.html)
36 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
37 |
38 | # Runtime data
39 | pids
40 | *.pid
41 | *.seed
42 | *.pid.lock
43 |
44 | # Directory for instrumented libs generated by jscoverage/JSCover
45 | lib-cov
46 |
47 | # Coverage directory used by tools like istanbul
48 | coverage
49 | *.lcov
50 |
51 | # nyc test coverage
52 | .nyc_output
53 |
54 | # node-waf configuration
55 | .lock-wscript
56 |
57 | # Compiled binary addons (https://nodejs.org/api/addons.html)
58 | build/Release
59 |
60 | # Dependency directories
61 | node_modules/
62 | jspm_packages/
63 |
64 | # TypeScript v1 declaration files
65 | typings/
66 |
67 | # TypeScript cache
68 | *.tsbuildinfo
69 |
70 | # Optional npm cache directory
71 | .npm
72 |
73 | # Optional eslint cache
74 | .eslintcache
75 |
76 | # Optional REPL history
77 | .node_repl_history
78 |
79 | # Output of 'npm pack'
80 | *.tgz
81 |
82 | # Yarn Integrity file
83 | .yarn-integrity
84 |
85 | # pnpm link folder
86 | pnpm-global
87 |
88 | # dotenv environment variables file
89 | .env
90 | .env.test
91 |
92 | # parcel-bundler cache (https://parceljs.org/)
93 | .cache
94 |
95 | # rollup.js default build output
96 | dist/
97 |
98 | # vitepress build output
99 | .vitepress/dist
100 | .vitepress/cache
101 |
102 | # Serverless directories
103 | .serverless/
104 |
105 | # Temporary folders
106 | tmp/
107 | temp/
108 | TODOs.md
109 | src/api/index.json
110 | src/examples/data.json
111 | src/tutorial/data.json
112 | draft.md
113 |
--------------------------------------------------------------------------------
/src/examples/src/todomvc/App/template.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | todos
4 |
10 |
11 |
12 |
19 |
20 |
45 |
65 |
66 |
--------------------------------------------------------------------------------
/src/partners/components/PartnerLanding.vue:
--------------------------------------------------------------------------------
1 |
17 |
18 |
19 |
20 | Partner Spotlight
26 |
16 |
23 |
24 |
25 |
54 |
--------------------------------------------------------------------------------
/.vitepress/theme/index.ts:
--------------------------------------------------------------------------------
1 | import './styles/index.css'
2 | import { h, App } from 'vue'
3 | import { VPTheme } from '@vue/theme'
4 | import PreferenceSwitch from './components/PreferenceSwitch.vue'
5 | import {
6 | preferComposition,
7 | preferSFC,
8 | filterHeadersByPreference
9 | } from './components/preferences'
10 | import SponsorsAside from './components/SponsorsAside.vue'
11 | import VueSchoolLink from './components/VueSchoolLink.vue'
12 | import Banner from './components/Banner.vue'
13 | // import TextAd from './components/TextAd.vue'
14 |
15 | export default Object.assign({}, VPTheme, {
16 | Layout: () => {
17 | // @ts-ignore
18 | return h(VPTheme.Layout, null, {
19 | banner: () => h(Banner),
20 | 'sidebar-top': () => h(PreferenceSwitch),
21 | 'aside-mid': () => h(SponsorsAside)
22 | })
23 | },
24 | enhanceApp({ app }: { app: App }) {
25 | app.provide('prefer-composition', preferComposition)
26 | app.provide('prefer-sfc', preferSFC)
27 | app.provide('filter-headers', filterHeadersByPreference)
28 | app.component('VueSchoolLink', VueSchoolLink)
29 | // app.component('TextAd', TextAd)
30 | }
31 | })
32 |
--------------------------------------------------------------------------------
/.vitepress/textAdMdPlugin.ts:
--------------------------------------------------------------------------------
1 | import MarkdownIt from 'markdown-it'
2 |
3 | const excludedPages = [
4 | 'guide/introduction.md',
5 | // 'guide/quick-start.md',
6 | // 'guide/essentials/computed.md',
7 | // 'guide/essentials/conditional.md',
8 | // 'guide/essentials/list.md',
9 | // 'guide/essentials/event-handling.md',
10 | // 'guide/essentials/forms.md',
11 | // 'guide/components/registration.md',
12 | // 'guide/components/props.md',
13 | // 'guide/components/events.md',
14 | // 'guide/components/slots.md',
15 | // 'guide/built-ins/teleport.md',
16 | 'about/faq.md',
17 | 'about/team.md',
18 | 'about/releases.md',
19 | 'about/community-guide.md',
20 | 'about/coc.md',
21 | 'sponsor/index.md',
22 | 'translations/index.md'
23 | ]
24 |
25 | export const textAdPlugin = (md: MarkdownIt) => {
26 | md.renderer.rules.heading_close = (tokens, i, options, env, self) => {
27 | const relativePath = env.relativePath
28 | const renderedContent = self.renderToken(tokens, i, options)
29 |
30 | return excludedPages.includes(relativePath)
31 | ? renderedContent
32 | : renderedContent.replace(/<\/h1>/, '
17 |
18 | This feature is disabled!
21 |
22 |
6 |
7 | ```vue-html
8 |
9 | This is some slot content!
10 |
11 | ```
12 |
13 |
14 |
15 |
16 | ```vue-html
17 |
18 | This is some slot content!
19 |
20 | ```
21 |
22 |
23 |
24 | In the child component, it can render the slot content from the parent using the `
27 |
28 | ```vue-html
29 |
30 |
34 |
35 |
36 | ```vue-html
37 |
38 |
42 |
43 | Content inside the `
44 |
45 |
46 |
52 |
53 |
54 |
55 |
56 |
57 |
66 |
--------------------------------------------------------------------------------
/.vitepress/theme/components/ReplLoading.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
11 |
12 |
13 |
60 |
--------------------------------------------------------------------------------
/src/examples/src/circle-drawer/App/options.js:
--------------------------------------------------------------------------------
1 | function clone(circles) {
2 | return circles.map((c) => ({ ...c }))
3 | }
4 |
5 | export default {
6 | data() {
7 | return {
8 | history: [[]],
9 | index: 0,
10 | circles: [],
11 | selected: null,
12 | adjusting: false
13 | }
14 | },
15 | methods: {
16 | onClick({ clientX: x, clientY: y }) {
17 | if (this.adjusting) {
18 | this.adjusting = false
19 | this.selected = null
20 | this.push()
21 | return
22 | }
23 |
24 | this.selected = [...this.circles].reverse().find(({ cx, cy, r }) => {
25 | const dx = cx - x
26 | const dy = cy - y
27 | return Math.sqrt(dx * dx + dy * dy) <= r
28 | })
29 |
30 | if (!this.selected) {
31 | this.circles.push({
32 | cx: x,
33 | cy: y,
34 | r: 50
35 | })
36 | this.push()
37 | }
38 | },
39 |
40 | adjust(circle) {
41 | this.selected = circle
42 | this.adjusting = true
43 | },
44 |
45 | push() {
46 | this.history.length = ++this.index
47 | this.history.push(clone(this.circles))
48 | },
49 |
50 | undo() {
51 | this.circles = clone(this.history[--this.index])
52 | },
53 |
54 | redo() {
55 | this.circles = clone(this.history[++this.index])
56 | }
57 | }
58 | }
59 |
--------------------------------------------------------------------------------
/.vitepress/theme/styles/style-guide.css:
--------------------------------------------------------------------------------
1 | .style-example {
2 | border-radius: 8px 8px 12px 12px;
3 | margin: 1.6em 0;
4 | padding: 1.6em 1.6em 0.1px;
5 | position: relative;
6 | border: 1px solid transparent;
7 | transition: background-color 0.25s ease, border-color 0.25s ease;
8 | }
9 |
10 | .vt-doc .style-example h3 {
11 | margin: 0;
12 | font-size: 1.1em;
13 | }
14 |
15 | .style-example-bad {
16 | background: #f7e8e8;
17 | }
18 | .dark .style-example-bad {
19 | background: transparent;
20 | border-color: var(--vt-c-red);
21 | }
22 |
23 | .style-example-bad h3 {
24 | color: var(--vt-c-red);
25 | }
26 |
27 | .style-example-good {
28 | background: #ecfaf7;
29 | }
30 | .dark .style-example-good {
31 | background: transparent;
32 | border-color: var(--vt-c-green);
33 | }
34 |
35 | .style-example-good h3 {
36 | color: var(--vt-c-green);
37 | }
38 |
39 | .details summary {
40 | font-weight: bold !important;
41 | }
42 |
43 | .style-verb {
44 | font-size: 0.6em;
45 | display: inline-block;
46 | border-radius: 6px;
47 | font-size: 0.65em;
48 | line-height: 1;
49 | font-weight: 600;
50 | padding: 0.35em 0.4em 0.3em;
51 | position: relative;
52 | top: -0.15em;
53 | margin-right: 0.5em;
54 | color: var(--vt-c-bg);
55 | transition: color 0.5s;
56 | background-color: var(--vt-c-brand);
57 | }
58 |
59 | .style-verb.avoid {
60 | background-color: var(--vt-c-red);
61 | }
62 |
--------------------------------------------------------------------------------
/src/examples/src/crud/App/options.js:
--------------------------------------------------------------------------------
1 | export default {
2 | data() {
3 | return {
4 | names: ['Emil, Hans', 'Mustermann, Max', 'Tisch, Roman'],
5 | selected: '',
6 | prefix: '',
7 | first: '',
8 | last: ''
9 | }
10 | },
11 | computed: {
12 | filteredNames() {
13 | return this.names.filter((n) =>
14 | n.toLowerCase().startsWith(this.prefix.toLowerCase())
15 | )
16 | }
17 | },
18 | watch: {
19 | selected(name) {
20 | ;[this.last, this.first] = name.split(', ')
21 | }
22 | },
23 | methods: {
24 | create() {
25 | if (this.hasValidInput()) {
26 | const fullName = `${this.last}, ${this.first}`
27 | if (!this.names.includes(fullName)) {
28 | this.names.push(fullName)
29 | this.first = this.last = ''
30 | }
31 | }
32 | },
33 | update() {
34 | if (this.hasValidInput() && this.selected) {
35 | const i = this.names.indexOf(this.selected)
36 | this.names[i] = this.selected = `${this.last}, ${this.first}`
37 | }
38 | },
39 | del() {
40 | if (this.selected) {
41 | const i = this.names.indexOf(this.selected)
42 | this.names.splice(i, 1)
43 | this.selected = this.first = this.last = ''
44 | }
45 | },
46 | hasValidInput() {
47 | return this.first.trim() && this.last.trim()
48 | }
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/.vitepress/theme/components/VueSchoolLink.vue:
--------------------------------------------------------------------------------
1 |
2 |
12 |
13 |
21 |
60 |
--------------------------------------------------------------------------------
/src/about/team/TeamHero.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
6 |
7 |
8 |
9 | Repl is loading...
10 |
3 |
15 |
16 |
17 |
76 |
--------------------------------------------------------------------------------
/src/tutorial/src/step-5/description.md:
--------------------------------------------------------------------------------
1 | # Form Bindings {#form-bindings}
2 |
3 | Using `v-bind` and `v-on` together, we can create two-way bindings on form input elements:
4 |
5 | ```vue-html
6 |
7 | ```
8 |
9 |
22 |
23 |
4 |
5 |
7 |
14 |
5 |
7 |
8 |
11 |
24 |
25 | ```js
26 | function onInput(e) {
27 | // a v-on handler receives the native DOM event
28 | // as the argument.
29 | text.value = e.target.value
30 | }
31 | ```
32 |
33 |
34 |
35 | Try typing in the input box - you should see the text in `` updating as you type.
36 |
37 | To simplify two-way bindings, Vue provides a directive, `v-model`, which is essentially syntactic sugar for the above:
38 |
39 | ```vue-html
40 |
41 | ```
42 |
43 | `v-model` automatically syncs the ``'s value with the bound state, so we no longer need to use an event handler for that.
44 |
45 | `v-model` works not only on text inputs, but also on other input types such as checkboxes, radio buttons, and select dropdowns. We cover more details in Guide - Form Bindings.
46 |
47 | Now, try to refactor the code to use `v-model` instead.
48 |
--------------------------------------------------------------------------------
/src/examples/src/grid/Grid/composition.js:
--------------------------------------------------------------------------------
1 | import { ref, computed } from 'vue'
2 |
3 | export default {
4 | props: {
5 | data: Array,
6 | columns: Array,
7 | filterKey: String
8 | },
9 | setup(props) {
10 | const sortKey = ref('')
11 | const sortOrders = ref(
12 | props.columns.reduce((o, key) => ((o[key] = 1), o), {})
13 | )
14 |
15 | const filteredData = computed(() => {
16 | let { data, filterKey } = props
17 | if (filterKey) {
18 | filterKey = filterKey.toLowerCase()
19 | data = data.filter((row) => {
20 | return Object.keys(row).some((key) => {
21 | return String(row[key]).toLowerCase().indexOf(filterKey) > -1
22 | })
23 | })
24 | }
25 | const key = sortKey.value
26 | if (key) {
27 | const order = sortOrders.value[key]
28 | data = data.slice().sort((a, b) => {
29 | a = a[key]
30 | b = b[key]
31 | return (a === b ? 0 : a > b ? 1 : -1) * order
32 | })
33 | }
34 | return data
35 | })
36 |
37 | function sortBy(key) {
38 | sortKey.value = key
39 | sortOrders.value[key] *= -1
40 | }
41 |
42 | function capitalize(str) {
43 | return str.charAt(0).toUpperCase() + str.slice(1)
44 | }
45 |
46 | return {
47 | sortKey,
48 | sortOrders,
49 | filteredData,
50 | sortBy,
51 | capitalize
52 | }
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/src/partners/components/PartnerAll.vue:
--------------------------------------------------------------------------------
1 |
22 |
23 |
24 |
26 |
33 |
Text Input
2 | {{ text }} 3 | 4 |Checkbox
5 | 6 | 7 | 8 | 12 |Multi Checkbox
13 | 14 | 15 | 16 | 17 | 18 | 19 |Checked names:
{{ checkedNames }}
20 |
21 | Radio
22 | 23 | 24 |25 | 26 | 27 |
28 | Picked: {{ picked }} 29 | 30 |
Select
31 | 37 | Selected: {{ selected }} 38 | 39 |Multi Select
40 | 45 | Selected: {{ multiSelected }} 46 | -------------------------------------------------------------------------------- /src/guide/built-ins/transition-demos/ListStagger.vue: -------------------------------------------------------------------------------- 1 | 42 | 43 | 44 |
45 |
46 |
53 |
58 | {{ item.msg }}
59 |
60 |
61 |
62 |
63 |
--------------------------------------------------------------------------------
/.vitepress/theme/components/SiteMap.vue:
--------------------------------------------------------------------------------
1 |
12 |
13 |
14 |
16 |
25 |
17 |
24 | {{ col.text }}
18 |-
19 |
-
20 |
{{ row.text }} 21 |
22 |
11 | Click to cycle through states:
12 |
26 |
27 |
28 |
63 |
--------------------------------------------------------------------------------
/src/partners/components/PartnerHero.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
13 |
14 |
17 |
20 |
23 |
24 |
25 |
7 |
17 |
18 |
19 |
72 |
--------------------------------------------------------------------------------
/src/partners/components/PartnerJoin.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 | {{ title || 'Vue Partners' }}
8 |9 | Vue Partners are Vue-team endorsed agencies that provide first-class 10 | Vue consulting and development services. If your company is 11 | interested in being listed as a partner, please 12 | register your interest here. 15 |
16 |
4 |
17 |
18 |
19 |
71 |
--------------------------------------------------------------------------------
/src/examples/src/crud/App/composition.js:
--------------------------------------------------------------------------------
1 | import { ref, reactive, computed, watch } from 'vue'
2 |
3 | export default {
4 | setup() {
5 | const names = reactive(['Emil, Hans', 'Mustermann, Max', 'Tisch, Roman'])
6 | const selected = ref('')
7 | const prefix = ref('')
8 | const first = ref('')
9 | const last = ref('')
10 |
11 | const filteredNames = computed(() =>
12 | names.filter((n) =>
13 | n.toLowerCase().startsWith(prefix.value.toLowerCase())
14 | )
15 | )
16 |
17 | watch(selected, (name) => {
18 | ;[last.value, first.value] = name.split(', ')
19 | })
20 |
21 | function create() {
22 | if (hasValidInput()) {
23 | const fullName = `${last.value}, ${first.value}`
24 | if (!names.includes(fullName)) {
25 | names.push(fullName)
26 | first.value = last.value = ''
27 | }
28 | }
29 | }
30 |
31 | function update() {
32 | if (hasValidInput() && selected.value) {
33 | const i = names.indexOf(selected.value)
34 | names[i] = selected.value = `${last.value}, ${first.value}`
35 | }
36 | }
37 |
38 | function del() {
39 | if (selected.value) {
40 | const i = names.indexOf(selected.value)
41 | names.splice(i, 1)
42 | selected.value = first.value = last.value = ''
43 | }
44 | }
45 |
46 | function hasValidInput() {
47 | return first.value.trim() && last.value.trim()
48 | }
49 |
50 | return {
51 | filteredNames,
52 | selected,
53 | prefix,
54 | first,
55 | last,
56 | create,
57 | update,
58 | del
59 | }
60 | }
61 | }
62 |
--------------------------------------------------------------------------------
/src/tutorial/src/step-13/description.md:
--------------------------------------------------------------------------------
1 | # Emits {#emits}
2 |
3 | In addition to receiving props, a child component can also emit events to the parent:
4 |
5 | Grow your business with Vue
5 |6 | Generate leads for new projects, boost your credibility to your 7 | clients, and support the long term sustainability of Vue.js and its 8 | ecosystem. 9 |
10 | Become a partner 16 |
6 |
36 |
37 |
51 |
52 | The first argument to `emit()` is the event name. Any additional arguments are passed on to the event listener.
53 |
54 | The parent can listen to child-emitted events using `v-on` - here the handler receives the extra argument from the child emit call and assigns it to local state:
55 |
56 |
7 |
8 | ```vue
9 |
16 | ```
17 |
18 |
19 |
20 |
21 |
22 | ```js
23 | export default {
24 | // declare emitted events
25 | emits: ['response'],
26 | setup(props, { emit }) {
27 | // emit with argument
28 | emit('response', 'hello from child')
29 | }
30 | }
31 | ```
32 |
33 |
34 |
35 |
57 |
58 | ```vue-html
59 |
63 |
64 |
65 | ```vue-html
66 |
70 |
71 | Now try it yourself in the editor.
72 |
--------------------------------------------------------------------------------
/src/examples/src/circle-drawer/App/composition.js:
--------------------------------------------------------------------------------
1 | import { ref, shallowReactive, toRaw } from 'vue'
2 |
3 | export default {
4 | setup() {
5 | const history = shallowReactive([[]])
6 | const index = ref(0)
7 | const circles = ref([])
8 | const selected = ref()
9 | const adjusting = ref(false)
10 |
11 | function onClick({ clientX: x, clientY: y }) {
12 | if (adjusting.value) {
13 | adjusting.value = false
14 | selected.value = null
15 | push()
16 | return
17 | }
18 |
19 | selected.value = [...circles.value].reverse().find(({ cx, cy, r }) => {
20 | const dx = cx - x
21 | const dy = cy - y
22 | return Math.sqrt(dx * dx + dy * dy) <= r
23 | })
24 |
25 | if (!selected.value) {
26 | circles.value.push({
27 | cx: x,
28 | cy: y,
29 | r: 50
30 | })
31 | push()
32 | }
33 | }
34 |
35 | function adjust(circle) {
36 | selected.value = circle
37 | adjusting.value = true
38 | }
39 |
40 | function push() {
41 | history.length = ++index.value
42 | history.push(clone(circles.value))
43 | console.log(toRaw(history))
44 | }
45 |
46 | function undo() {
47 | circles.value = clone(history[--index.value])
48 | }
49 |
50 | function redo() {
51 | circles.value = clone(history[++index.value])
52 | }
53 |
54 | function clone(circles) {
55 | return circles.map((c) => ({ ...c }))
56 | }
57 |
58 | return {
59 | history,
60 | index,
61 | circles,
62 | selected,
63 | adjusting,
64 | onClick,
65 | adjust,
66 | undo,
67 | redo
68 | }
69 | }
70 | }
71 |
--------------------------------------------------------------------------------
/src/tutorial/src/step-10/description.md:
--------------------------------------------------------------------------------
1 | # Watchers {#watchers}
2 |
3 | Sometimes we may need to perform "side effects" reactively - for example, logging a number to the console when it changes. We can achieve this with watchers:
4 |
5 |
6 |
7 | ```js
8 | import { ref, watch } from 'vue'
9 |
10 | const count = ref(0)
11 |
12 | watch(count, (newCount) => {
13 | // yes, console.log() is a side effect
14 | console.log(`new count is: ${newCount}`)
15 | })
16 | ```
17 |
18 | `watch()` can directly watch a ref, and the callback gets fired whenever `count`'s value changes. `watch()` can also watch other types of data sources - more details are covered in Guide - Watchers.
19 |
20 |
21 |
42 |
43 | A more practical example than logging to the console would be fetching new data when an ID changes. The code we have is fetching todos data from a mock API on component mount. There is also a button that increments the todo ID that should be fetched. Try to implement a watcher that fetches a new todo when the button is clicked.
44 |
--------------------------------------------------------------------------------
/src/guide/built-ins/transition-demos/ListMove.vue:
--------------------------------------------------------------------------------
1 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 | {{ item }}
41 |
42 |
43 |
44 |
45 |
46 |
65 |
--------------------------------------------------------------------------------
/src/tutorial/src/step-12/description.md:
--------------------------------------------------------------------------------
1 | # Props {#props}
2 |
3 | A child component can accept input from the parent via **props**. First, it needs to declare the props it accepts:
4 |
5 |
6 |
40 |
41 |
55 |
56 | The parent can pass the prop to the child just like attributes. To pass a dynamic value, we can also use the `v-bind` syntax:
57 |
58 |
7 |
8 | ```vue
9 |
10 |
15 | ```
16 |
17 | Note `defineProps()` is a compile-time macro and doesn't need to be imported. Once declared, the `msg` prop can be used in the child component's template. It can also be accessed in JavaScript via the returned object of `defineProps()`.
18 |
19 |
20 |
21 |
22 |
23 | ```js
24 | // in child component
25 | export default {
26 | props: {
27 | msg: String
28 | },
29 | setup(props) {
30 | // access props.msg
31 | }
32 | }
33 | ```
34 |
35 | Once declared, the `msg` prop is exposed on `this` and can be used in the child component's template. The received props are passed to `setup()` as the first argument.
36 |
37 |
38 |
39 |
59 |
60 | ```vue-html
61 |
65 |
66 |
67 | ```vue-html
68 |
72 |
73 | Now try it yourself in the editor.
74 |
--------------------------------------------------------------------------------
/src/guide/built-ins/transition-demos/NestedTransitions.vue:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
10 |
14 |
15 |
16 |
17 |
65 |
--------------------------------------------------------------------------------
/src/tutorial/src/step-7/description.md:
--------------------------------------------------------------------------------
1 | # List Rendering {#list-rendering}
2 |
3 | We can use the `v-for` directive to render a list of elements based on a source array:
4 |
5 | ```vue-html
6 |
11 |
13 | Hello
12 | -
7 |
- 8 | {{ todo.text }} 9 | 10 |
22 |
23 | ```js
24 | todos.value.push(newTodo)
25 | ```
26 |
27 |
28 |
35 |
36 | 2. Replace the array with a new one:
37 |
38 |
39 |
40 | ```js
41 | todos.value = todos.value.filter(/* ... */)
42 | ```
43 |
44 |
45 |
52 |
53 | Here we have a simple todo list - try to implement the logic for `addTodo()` and `removeTodo()` methods to make it work!
54 |
55 | More details on `v-for`: Guide - List Rendering
56 |
--------------------------------------------------------------------------------
/src/tutorial/src/step-11/description.md:
--------------------------------------------------------------------------------
1 | # Components {#components}
2 |
3 | So far, we've only been working with a single component. Real Vue applications are typically created with nested components.
4 |
5 | A parent component can render another component in its template as a child component. To use a child component, we need to first import it:
6 |
7 |
8 |
16 |
17 |
34 |
35 |
9 |
10 | ```js
11 | import ChildComp from './ChildComp.vue'
12 | ```
13 |
14 |
15 |
36 |
37 | Then, we can use the component in the template as:
38 |
39 | ```vue-html
40 |
44 |
45 |
46 |
47 | ```js
48 | import ChildComp from './ChildComp.js'
49 |
50 | createApp({
51 | components: {
52 | ChildComp
53 | }
54 | })
55 | ```
56 |
57 | We also need to register the component using the `components` option. Here we are using the object property shorthand to register the `ChildComp` component under the `ChildComp` key.
58 |
59 | Because we are writing the template in the DOM, it will be subject to browser's parsing rules, which is case-insensitive for tag names. Therefore, we need to use the kebab-cased name to reference the child component:
60 |
61 | ```vue-html
62 |
66 |
67 |
68 | Now try it yourself - import the child component and render it in the template.
69 |
--------------------------------------------------------------------------------
/.vitepress/headerMdPlugin.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * A markdown-it plugin to support custom header metadata
3 | * Headers that end with * are Options API only
4 | * Headers that end with ** are Composition API only
5 | * This plugin strips the markers and augments the extracted header data,
6 | * which can be then used by the theme to filter headers.
7 | *
8 | * TODO: we will likely also need special syntax for preserving the same anchor
9 | * links across translations similar to the one at
10 | * https://github.com/vitejs/docs-cn/tree/main/.vitepress/markdown-it-custom-anchor
11 | */
12 |
13 | import MarkdownIt from 'markdown-it'
14 | import { Header } from 'vitepress'
15 |
16 | export interface AugmentedHeader extends Header {
17 | compositionOnly?: boolean
18 | optionsOnly?: boolean
19 | }
20 |
21 | export const headerPlugin = (md: MarkdownIt) => {
22 | md.renderer.rules.heading_open = (tokens, i, options, env, self) => {
23 | for (const child of tokens[i + 1].children!) {
24 | if (child.type === 'text' && child.content.endsWith('*')) {
25 | child.content = child.content.replace(/\s*\*+$/, '')
26 | }
27 | }
28 | return self.renderToken(tokens, i, options)
29 | }
30 |
31 | const render = md.render
32 | md.render = (content, env) => {
33 | const res = render(content, env)
34 |
35 | if (env && env.headers) {
36 | processHeaders(env.headers)
37 | }
38 |
39 | return res
40 | }
41 | }
42 |
43 | function processHeaders(headers: AugmentedHeader[]) {
44 | for (const h of headers) {
45 | if (h.title.endsWith('*')) {
46 | if (h.title.endsWith('**')) {
47 | h.compositionOnly = true
48 | } else {
49 | h.optionsOnly = true
50 | }
51 | h.title = h.title.replace(/\s*\*+$/, '')
52 | }
53 | if (h.children) {
54 | processHeaders(h.children)
55 | }
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/.vitepress/theme/styles/inline-demo.css:
--------------------------------------------------------------------------------
1 | .vt-doc a[href^="https://play.vuejs.org"]:before
2 | {
3 | content: '▶';
4 | width: 20px;
5 | height: 20px;
6 | display: inline-block;
7 | border-radius: 10px;
8 | vertical-align: middle;
9 | position: relative;
10 | top: -2px;
11 | color: var(--vt-c-green);
12 | border: 2px solid var(--vt-c-green);
13 | margin-right: 8px;
14 | margin-left: 4px;
15 | line-height: 15px;
16 | padding-left: 4.5px;
17 | font-size: 11px;
18 | }
19 |
20 | .demo {
21 | padding: 22px 24px;
22 | border-radius: 8px;
23 | box-shadow: var(--vt-shadow-2);
24 | margin-bottom: 1.2em;
25 | transition: background-color 0.5s ease;
26 | }
27 |
28 | .dark .demo {
29 | background-color: var(--vt-c-bg-soft);
30 | }
31 |
32 | .demo p {
33 | margin: 0;
34 | }
35 |
36 | .demo button {
37 | background-color: var(--vt-c-bg-mute);
38 | transition: background-color 0.5s;
39 | padding: 5px 12px;
40 | border: 1px solid var(--vt-c-divider);
41 | border-radius: 8px;
42 | font-size: 0.9em;
43 | font-weight: 600;
44 | }
45 |
46 | .demo button + button {
47 | margin-left: 1em;
48 | }
49 |
50 | .demo input,
51 | .demo textarea,
52 | .demo select {
53 | border: 1px solid var(--vt-c-divider);
54 | border-radius: 4px;
55 | padding: 0.2em 0.6em;
56 | margin-top: 10px;
57 | background: transparent;
58 | transition: background-color 0.5s;
59 | }
60 |
61 | .dark .demo select {
62 | background: var(--vt-c-bg-soft);
63 | }
64 |
65 | .dark .demo select option {
66 | background: transparent;
67 | }
68 |
69 | .demo input:not([type]):focus,
70 | .demo textarea:focus,
71 | .demo select:focus {
72 | outline: 1px solid blue;
73 | }
74 |
75 | .demo select {
76 | /* this was set by normalize.css */
77 | -webkit-appearance: listbox;
78 | }
79 |
80 | .demo label {
81 | margin: 0 1em 0 0.4em;
82 | }
83 |
84 | .demo select[multiple] {
85 | width: 100px;
86 | }
87 |
88 | .demo h1 {
89 | margin: 10px 0 0;
90 | }
91 |
--------------------------------------------------------------------------------
/src/translations/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | aside: false
3 | ---
4 |
5 | # Translations {#translations}
6 |
7 | ## Available Languages {#available-languages}
8 |
9 | - [English](https://vuejs.org/) [[source](https://github.com/vuejs/docs)]
10 | - [简体中文 / Simplified Chinese](https://cn.vuejs.org/) [[source](https://github.com/vuejs-translations/docs-zh-cn)]
11 | - [日本語 / Japanese](https://ja.vuejs.org/) [[source](https://github.com/vuejs-translations/docs-ja)]
12 | - [Українська / Ukrainian](https://ua.vuejs.org/) [[source](https://github.com/vuejs-translations/docs-uk)]
13 | - [Français / French](https://fr.vuejs.org) [[source](https://github.com/vuejs-translations/docs-fr)]
14 | - [한국어 / Korean](https://ko.vuejs.org) [[source](https://github.com/vuejs-translations/docs-ko)]
15 | - [Português / Portuguese](https://pt.vuejs.org) [[source](https://github.com/vuejs-translations/docs-pt)]
16 | - [বাংলা / Bengali](https://bn.vuejs.org) [[source](https://github.com/vuejs-translations/docs-bn)]
17 | - [Italiano / Italian](https://it.vuejs.org) [[source](https://github.com/vuejs-translations/docs-it)]
18 |
19 | ## Work in Progress Languages {#work-in-progress-languages}
20 |
21 | - [فارسی / Persian](https://fa.vuejs.org/) [[source](https://github.com/vuejs-translations/docs-fa)]
22 | - [Čeština / Czech](https://cs.vuejs.org/) [[source](https://github.com/vuejs-translations/docs-cs)]
23 | - [العربية / Arabic](https://ar.vuejs.org/) [[source](https://github.com/vuejs-translations/docs-ar)]
24 |
25 | ## Starting a new Translation {#starting-a-new-translation}
26 |
27 | The Vue documentation has recently undergone a major revision, so translations in other languages are still missing or work-in-progress.
28 |
29 | We welcome community efforts to provide more translations. Translation efforts are managed in the [vuejs-translations](https://github.com/vuejs-translations/) GitHub organization. If you are interested in contributing, please check out the [Translation Guidelines](https://github.com/vuejs-translations/guidelines/blob/main/README.md) to get started.
30 |
--------------------------------------------------------------------------------
/src/ecosystem/themes/ThemeProduct.vue:
--------------------------------------------------------------------------------
1 |
8 |
9 |
10 | todos
4 | 10 |
20 |
38 |
39 |
40 |
92 |
--------------------------------------------------------------------------------
24 |
29 |
30 |
35 |
36 |
25 |
28 |