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/AccessibleARIAdescribedby.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fi3ework/docs/HEAD/src/guide/best-practices/images/AccessibleARIAdescribedby.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/partners/vehikl.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-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/64robots.md:
--------------------------------------------------------------------------------
1 | ---
2 | page: true
3 | footer: false
4 | ---
5 |
6 |
9 |
10 | Current component: B
7 | Message is: {{ msg }} 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/examples/src/conditionals-and-loops/App/composition.js: -------------------------------------------------------------------------------- 1 | import { ref } from 'vue' 2 | 3 | export default { 4 | setup() { 5 | const show = ref(true) 6 | const list = ref([1, 2, 3]) 7 | 8 | return { 9 | show, 10 | list 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/guide/built-ins/keep-alive-demos/CompA.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 |Current component: A
7 | count: {{ count }} 8 | 9 | 10 | -------------------------------------------------------------------------------- /.vitepress/theme/styles/utilities.css: -------------------------------------------------------------------------------- 1 | .nowrap { 2 | white-space: nowrap; 3 | } 4 | 5 | .sr-only { 6 | position: absolute; 7 | width: 1px; 8 | height: 1px; 9 | padding: 0; 10 | margin: -1px; 11 | overflow: hidden; 12 | clip: rect(0, 0, 0, 0); 13 | border: 0; 14 | } 15 | -------------------------------------------------------------------------------- /src/examples/src/form-bindings/App/options.js: -------------------------------------------------------------------------------- 1 | export default { 2 | data() { 3 | return { 4 | text: 'Edit me', 5 | checked: true, 6 | checkedNames: ['Jack'], 7 | picked: 'One', 8 | selected: 'A', 9 | multiSelected: ['A'] 10 | } 11 | } 12 | } -------------------------------------------------------------------------------- /src/tutorial/src/step-6/App/composition.js: -------------------------------------------------------------------------------- 1 | import { ref } from 'vue' 2 | 3 | export default { 4 | setup() { 5 | const awesome = ref(true) 6 | 7 | function toggle() { 8 | // ... 9 | } 10 | 11 | return { 12 | awesome, 13 | toggle 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/examples/src/modal/App/composition.js: -------------------------------------------------------------------------------- 1 | import Modal from './Modal.vue' 2 | import { ref } from 'vue' 3 | 4 | export default { 5 | components: { 6 | Modal 7 | }, 8 | setup() { 9 | const showModal = ref(false) 10 | 11 | return { 12 | showModal 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /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/tutorial/src/step-9/_hint/App/composition.js: -------------------------------------------------------------------------------- 1 | import { ref, onMounted } from 'vue' 2 | 3 | export default { 4 | setup() { 5 | const p = ref(null) 6 | 7 | onMounted(() => { 8 | p.value.textContent = 'mounted!' 9 | }) 10 | 11 | return { 12 | p 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /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/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 |
13 |
--------------------------------------------------------------------------------
/src/examples/src/svg/util.js:
--------------------------------------------------------------------------------
1 | export function valueToPoint(value, index, total) {
2 | const x = 0
3 | const y = -value * 0.8
4 | const angle = ((Math.PI * 2) / total) * index
5 | const cos = Math.cos(angle)
6 | const sin = Math.sin(angle)
7 | const tx = x * cos - y * sin + 100
8 | const ty = x * sin + y * cos + 100
9 | return {
10 | x: tx,
11 | y: ty
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/src/partners/components/type.ts:
--------------------------------------------------------------------------------
1 | export interface Partner {
2 | name: string
3 | logo: string
4 | flipLogo?: boolean
5 | intro: string
6 | description: string[]
7 | proficiencies: string[]
8 | region: string[]
9 | location: string[]
10 | website: {
11 | text: string
12 | url: string
13 | }
14 | contact: string
15 | hiring?: string
16 | platinum?: boolean
17 | }
18 |
--------------------------------------------------------------------------------
/src/examples/src/attribute-bindings/App/options.js:
--------------------------------------------------------------------------------
1 | export default {
2 | data() {
3 | return {
4 | message: 'Hello World!',
5 | isRed: true,
6 | color: 'green'
7 | }
8 | },
9 | methods: {
10 | toggleRed() {
11 | this.isRed = !this.isRed
12 | },
13 | toggleColor() {
14 | this.color = this.color === 'green' ? 'blue' : 'green'
15 | }
16 | }
17 | }
--------------------------------------------------------------------------------
/src/examples/src/cells/App/template.html:
--------------------------------------------------------------------------------
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/crud/App/template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | 9 | 10 | 15 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /.vitepress/inlined-scripts/restorePreference.js: -------------------------------------------------------------------------------- 1 | ;(() => { 2 | const restore = (key, cls, def = false) => { 3 | const saved = localStorage.getItem(key) 4 | if (saved ? saved !== 'false' : def) { 5 | document.documentElement.classList.add(cls) 6 | } 7 | } 8 | restore('vue-docs-prefer-composition', 'prefer-composition') 9 | restore('vue-docs-prefer-sfc', 'prefer-sfc', true) 10 | 11 | window.__VUE_BANNER_ID__ = 'wip' 12 | restore(`vue-docs-banner-${__VUE_BANNER_ID__}`, 'banner-dismissed') 13 | })() 14 | -------------------------------------------------------------------------------- /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 |
11 |
12 |
13 |
14 |
25 |
--------------------------------------------------------------------------------
/src/guide/extras/demos/Colors.vue:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 | hello
10 |
14 |
17 |
18 |
19 |
26 |
--------------------------------------------------------------------------------
/src/tutorial/src/step-10/_hint/App/options.js:
--------------------------------------------------------------------------------
1 | export default {
2 | data() {
3 | return {
4 | todoId: 1,
5 | todoData: null
6 | }
7 | },
8 | methods: {
9 | async fetchData() {
10 | this.todoData = null
11 | const res = await fetch(
12 | `https://jsonplaceholder.typicode.com/todos/${this.todoId}`
13 | )
14 | this.todoData = await res.json()
15 | }
16 | },
17 | mounted() {
18 | this.fetchData()
19 | },
20 | watch: {
21 | todoId() {
22 | this.fetchData()
23 | }
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/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 | let lastTime = performance.now()
10 | const update = () => {
11 | const time = performance.now()
12 | this.elapsed += Math.min(time - lastTime, this.duration - this.elapsed)
13 | lastTime = time
14 | this.handle = requestAnimationFrame(update)
15 | }
16 | update()
17 | },
18 | unmounted() {
19 | cancelAnimationFrame(this.handle)
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/src/examples/src/handling-input/App/composition.js:
--------------------------------------------------------------------------------
1 | import { ref } from 'vue'
2 |
3 | export default {
4 | setup() {
5 | const message = ref('Hello World!')
6 |
7 | function reverseMessage() {
8 | // Access/mutate the value of a ref via
9 | // its .value property.
10 | message.value = message.value.split('').reverse().join('')
11 | }
12 |
13 | function notify() {
14 | alert('navigation was prevented.')
15 | }
16 |
17 | return {
18 | message,
19 | reverseMessage,
20 | notify
21 | }
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/src/examples/src/svg/App/template.html:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | Move your mouse across this div...
15 |x: {{ x }}
16 |
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 | | 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/guide/built-ins/transition-demos/BetweenComponents.vue:
--------------------------------------------------------------------------------
1 |
9 |
10 |
11 | {{ tweened.number.toFixed(0) }}
22 |
12 |
15 |
18 |
19 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/src/examples/src/timer/App/composition.js:
--------------------------------------------------------------------------------
1 | import { ref, onUnmounted } from 'vue'
2 |
3 | export default {
4 | setup() {
5 | const duration = ref(15 * 1000)
6 | const elapsed = ref(0)
7 |
8 | let lastTime = performance.now()
9 | let handle
10 | const update = () => {
11 | const time = performance.now()
12 | elapsed.value += Math.min(time - lastTime, duration.value - elapsed.value)
13 | lastTime = time
14 | handle = requestAnimationFrame(update)
15 | }
16 |
17 | update()
18 | onUnmounted(() => {
19 | cancelAnimationFrame(handle)
20 | })
21 |
22 | return {
23 | duration,
24 | elapsed
25 | }
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/src/tutorial/src/step-15/description.md:
--------------------------------------------------------------------------------
1 | # 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.html).
8 |
9 | - Go through the [Main Guide](/guide/essentials/application.html), 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/guide/built-ins/transition-demos/SlideFade.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 |
9 |
11 |
12 |
13 |
14 |
29 |
--------------------------------------------------------------------------------
/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 | hello
10 |{{ 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/ecosystem/themes/ThemePage.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 |
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 |
--------------------------------------------------------------------------------
/.vitepress/theme/components/preferences.ts:
--------------------------------------------------------------------------------
1 | import { Header } from 'vitepress'
2 | import { ref } from 'vue'
3 |
4 | const hasStorage = typeof localStorage !== 'undefined'
5 | const get = (key: string, defaultValue = false): boolean =>
6 | hasStorage
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))
12 |
13 | export const preferSFCKey = 'vue-docs-prefer-sfc'
14 | export const preferSFC = ref(get(preferSFCKey, true))
15 |
16 | export function filterHeadersByPreference(h: Header) {
17 | return preferComposition.value ? !h.optionsOnly : !h.compositionOnly
18 | }
19 |
--------------------------------------------------------------------------------
/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 | },
20 | shuffle() {
21 | this.items = shuffle(this.items)
22 | },
23 | remove(item) {
24 | const i = this.items.indexOf(item)
25 | if (i > -1) {
26 | this.items.splice(i, 1)
27 | }
28 | }
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/src/guide/built-ins/keep-alive-demos/SwitchComponent.vue:
--------------------------------------------------------------------------------
1 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
18 |
19 |
20 |
23 |
24 |
--------------------------------------------------------------------------------
/src/examples/src/tree/App/options.js:
--------------------------------------------------------------------------------
1 | import TreeItem from './TreeItem.vue'
2 |
3 | const treeData = {
4 | name: 'My Tree',
5 | children: [
6 | { name: 'hello' },
7 | { name: 'wat' },
8 | {
9 | name: 'child folder',
10 | children: [
11 | {
12 | name: 'child folder',
13 | children: [{ name: 'hello' }, { name: 'wat' }]
14 | },
15 | { name: 'hello' },
16 | { name: 'wat' },
17 | {
18 | name: 'child folder',
19 | children: [{ name: 'hello' }, { name: 'wat' }]
20 | }
21 | ]
22 | }
23 | ]
24 | }
25 |
26 | export default {
27 | components: {
28 | TreeItem
29 | },
30 | data() {
31 | return {
32 | treeData
33 | }
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/src/tutorial/src/step-7/_hint/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 | todos.value.push({ id: id++, text: newTodo.value })
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 | todos,
27 | addTodo,
28 | removeTodo
29 | }
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/src/examples/src/modal/Modal/template.html:
--------------------------------------------------------------------------------
1 |
3 |
25 |
4 |
24 |
5 |
23 |
6 | default header
7 |
8 |
9 |
10 | default body
11 |
12 |
13 |
22 |
18 |
20 |
21 |
22 |
29 |
--------------------------------------------------------------------------------
/src/guide/built-ins/transition-demos/CssAnimation.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 |
9 |
13 |
14 |
15 |
16 |
35 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "engines": {
3 | "node": ">=14.0.0"
4 | },
5 | "scripts": {
6 | "dev": "vitepress",
7 | "build": "vitepress build",
8 | "serve": "vitepress serve",
9 | "preinstall": "npx only-allow pnpm"
10 | },
11 | "dependencies": {
12 | "@vue/repl": "^1.2.4",
13 | "@vue/theme": "^1.0.2",
14 | "dynamics.js": "^1.1.5",
15 | "gsap": "^3.9.0",
16 | "vitepress": "^0.22.4",
17 | "vue": "^3.2.37"
18 | },
19 | "devDependencies": {
20 | "@types/markdown-it": "^12.2.3",
21 | "@types/node": "^16.9.1"
22 | },
23 | "pnpm": {
24 | "peerDependencyRules": {
25 | "ignoreMissing": [
26 | "@algolia/client-search",
27 | "react",
28 | "react-dom",
29 | "@types/react"
30 | ]
31 | }
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/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/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 | 10 | Hello here is some bouncy text! 11 |
12 |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 |
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 |
--------------------------------------------------------------------------------
/src/examples/src/list-transition/App/composition.js:
--------------------------------------------------------------------------------
1 | import { shuffle as _shuffle } from 'lodash-es'
2 | import { ref } from 'vue'
3 |
4 | export default {
5 | setup() {
6 | const getInitialItems = () => [1, 2, 3, 4, 5]
7 | const items = ref(getInitialItems())
8 | let id = items.value.length + 1
9 |
10 | function insert() {
11 | const i = Math.round(Math.random() * items.value.length)
12 | items.value.splice(i, 0, id++)
13 | }
14 |
15 | function reset() {
16 | items.value = getInitialItems()
17 | }
18 |
19 | function shuffle() {
20 | items.value = _shuffle(items.value)
21 | }
22 |
23 | function remove(item) {
24 | const i = items.value.indexOf(item)
25 | if (i > -1) {
26 | items.value.splice(i, 1)
27 | }
28 | }
29 |
30 | return {
31 | items,
32 | insert,
33 | reset,
34 | shuffle,
35 | remove
36 | }
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/src/examples/src/circle-drawer/App/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | overflow: hidden;
4 | }
5 |
6 | svg {
7 | width: 100vw;
8 | height: 100vh;
9 | background-color: #eee;
10 | }
11 |
12 | circle {
13 | stroke: #000;
14 | }
15 |
16 | .controls {
17 | position: fixed;
18 | top: 10px;
19 | left: 0;
20 | right: 0;
21 | text-align: center;
22 | }
23 |
24 | .controls button + button {
25 | margin-left: 6px;
26 | }
27 |
28 | .dialog {
29 | position: fixed;
30 | top: calc(50% - 50px);
31 | left: calc(50% - 175px);
32 | background: #fff;
33 | width: 350px;
34 | height: 100px;
35 | padding: 5px 20px;
36 | box-sizing: border-box;
37 | border-radius: 4px;
38 | text-align: center;
39 | box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
40 | }
41 |
42 | .dialog input {
43 | display: block;
44 | width: 200px;
45 | margin: 0px auto;
46 | }
47 |
48 | .tip {
49 | text-align: center;
50 | padding: 0 50px;
51 | color: #bbb;
52 | }
--------------------------------------------------------------------------------
/src/examples/src/grid/Grid/style.css:
--------------------------------------------------------------------------------
1 | table {
2 | border: 2px solid #42b983;
3 | border-radius: 3px;
4 | background-color: #fff;
5 | }
6 |
7 | th {
8 | background-color: #42b983;
9 | color: rgba(255, 255, 255, 0.66);
10 | cursor: pointer;
11 | user-select: none;
12 | }
13 |
14 | td {
15 | background-color: #f9f9f9;
16 | }
17 |
18 | th,
19 | td {
20 | min-width: 120px;
21 | padding: 10px 20px;
22 | }
23 |
24 | th.active {
25 | color: #fff;
26 | }
27 |
28 | th.active .arrow {
29 | opacity: 1;
30 | }
31 |
32 | .arrow {
33 | display: inline-block;
34 | vertical-align: middle;
35 | width: 0;
36 | height: 0;
37 | margin-left: 5px;
38 | opacity: 0.66;
39 | }
40 |
41 | .arrow.asc {
42 | border-left: 4px solid transparent;
43 | border-right: 4px solid transparent;
44 | border-bottom: 4px solid #fff;
45 | }
46 |
47 | .arrow.dsc {
48 | border-left: 4px solid transparent;
49 | border-right: 4px solid transparent;
50 | border-top: 4px solid #fff;
51 | }
52 |
--------------------------------------------------------------------------------
/src/examples/src/cells/store.js:
--------------------------------------------------------------------------------
1 | import { reactive } from 'vue'
2 |
3 | const COLS = 5
4 | const ROWS = 20
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 | // adapted from https://codesandbox.io/s/jotai-7guis-task7-cells-mzoit?file=/src/atoms.ts
13 | // by @dai-shi
14 | export function evalCell(exp) {
15 | if (!exp.startsWith('=')) {
16 | return exp
17 | }
18 |
19 | // = A1 + B2 ---> get(0,1) + get(1,2)
20 | exp = exp
21 | .slice(1)
22 | .replace(
23 | /\b([A-Z])(\d{1,2})\b/g,
24 | (_, c, r) => `get(${c.charCodeAt(0) - 65},${r})`
25 | )
26 |
27 | try {
28 | return new Function('get', `return ${exp}`)(getCellValue)
29 | } catch (e) {
30 | return `#ERROR ${e}`
31 | }
32 | }
33 |
34 | function getCellValue(c, r) {
35 | const val = evalCell(cells[c][r])
36 | const num = Number(val)
37 | return Number.isFinite(num) ? num : val
38 | }
39 |
--------------------------------------------------------------------------------
/src/examples/src/fetching-data/App/composition.js:
--------------------------------------------------------------------------------
1 | import { ref, watchEffect } from 'vue'
2 |
3 | const API_URL = `https://api.github.com/repos/vuejs/core/commits?per_page=3&sha=`
4 | const branches = ['main', 'v2-compat']
5 |
6 | export default {
7 | setup() {
8 | const currentBranch = ref(branches[0])
9 | const commits = ref(null)
10 |
11 | watchEffect(async () => {
12 | // this effect will run immediately and then
13 | // re-run whenever currentBranch.value changes
14 | const url = `${API_URL}${currentBranch.value}`
15 | commits.value = await (await fetch(url)).json()
16 | })
17 |
18 | function truncate(v) {
19 | const newline = v.indexOf('\n')
20 | return newline > 0 ? v.slice(0, newline) : v
21 | }
22 |
23 | function formatDate(v) {
24 | return v.replace(/T|Z/g, ' ')
25 | }
26 |
27 | return {
28 | branches,
29 | currentBranch,
30 | commits,
31 | truncate,
32 | formatDate
33 | }
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/src/ecosystem/themes/ThemeHero.vue:
--------------------------------------------------------------------------------
1 |
2 |
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 |
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/tutorial/src/step-8/_hint/App/composition.js:
--------------------------------------------------------------------------------
1 | import { ref, computed } 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 | const filteredTodos = computed(() => {
16 | return hideCompleted.value
17 | ? todos.value.filter((t) => !t.done)
18 | : todos.value
19 | })
20 |
21 | function addTodo() {
22 | todos.value.push({ id: id++, text: newTodo.value, done: false })
23 | newTodo.value = ''
24 | }
25 |
26 | function removeTodo(todo) {
27 | todos.value = todos.value.filter((t) => t !== todo)
28 | }
29 |
30 | return {
31 | newTodo,
32 | hideCompleted,
33 | todos,
34 | filteredTodos,
35 | addTodo,
36 | removeTodo
37 | }
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/src/ecosystem/themes/ThemeContact.vue:
--------------------------------------------------------------------------------
1 |
2 |
7 |
8 |
9 |
50 |
--------------------------------------------------------------------------------
/src/guide/built-ins/transition-demos/ListBasic.vue:
--------------------------------------------------------------------------------
1 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 | {{ item }}
27 |
28 |
29 |
30 |
31 |
32 |
43 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/.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 VueJobs from './components/VueJobs.vue'
13 |
14 | export default Object.assign({}, VPTheme, {
15 | Layout: () => {
16 | // @ts-ignore
17 | return h(VPTheme.Layout, null, {
18 | 'sidebar-top': () => h(PreferenceSwitch),
19 | 'aside-mid': () => h(SponsorsAside),
20 | 'aside-bottom': () => h(VueJobs)
21 | })
22 | },
23 | enhanceApp({ app }: { app: App }) {
24 | app.provide('prefer-composition', preferComposition)
25 | app.provide('prefer-sfc', preferSFC)
26 | app.provide('filter-headers', filterHeadersByPreference)
27 | app.component('VueSchoolLink', VueSchoolLink)
28 | }
29 | })
30 |
--------------------------------------------------------------------------------
/src/guide/extras/demos/DisabledButton.vue:
--------------------------------------------------------------------------------
1 |
11 |
12 |
13 |
14 |
15 |
16 | This feature is disabled!
19 |
20 |
21 |
22 |
23 |
52 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/src/public/images/vueschool/vs-iso.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/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/SpreadSheetCell.vue:
--------------------------------------------------------------------------------
1 |
17 |
18 |
19 |
20 |
27 | {{ evalCell(cells[c][r]) }}
28 |
29 |
30 |
31 |
54 |
--------------------------------------------------------------------------------
/src/tutorial/src/step-3/description.md:
--------------------------------------------------------------------------------
1 | # Attribute Bindings
2 |
3 | in Vue, mustaches are only used for text interpolation. To bind an attribute to a dynamic value, we use the `v-bind` directive:
4 |
5 | ```vue-html
6 |
7 | ```
8 |
9 | A **directive** is a special attribute that starts with the `v-` prefix. They are part of Vue's template syntax. Similar to text interpolations, directive values are JavaScript expressions that have access to the component's state. The full details of `v-bind` and directive syntax are discussed in Guide - Template Syntax.
10 |
11 | The part after the colon (`:id`) is the "argument" of the directive. Here, the element's `id` attribute will be synced with the `dynamicId` property from the component's state.
12 |
13 | Because `v-bind` is used so frequently, it has a dedicated shorthand syntax:
14 |
15 | ```vue-html
16 |
17 | ```
18 |
19 | Now, try to add a dynamic `class` binding to the ``, 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
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 |
--------------------------------------------------------------------------------
/src/translations/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | aside: false
3 | ---
4 |
5 | # Translations
6 |
7 | The Vue documentation has recently undergone a major revision, so there are no completed translations in other languages yet.
8 |
9 | Translation efforts are managed in the [vuejs-translations](https://github.com/vuejs-translations/) GitHub organization. There are currently the following translations underway. If you want to contribute, you can open an issue to express your interest.
10 |
11 | - [Simplified Chinese](https://github.com/vuejs-translations/docs-zh-cn)
12 | - [Japanese](https://github.com/vuejs-translations/docs-ja)
13 |
14 | ## Starting a new Translation
15 |
16 | We are hoping to establish a standard workflow for community translations so that we can more easily coordinate community efforts. Please keep an eye on the [Translation Guidelines repo](https://github.com/vuejs-translations/guidelines/blob/main/README.md) for updates.
17 |
18 | In the meanwhile, if you are interested in starting translation for a new language, please open a thread in the [Discussions](https://github.com/vuejs-translations/guidelines/discussions) (and check if there is already one created for your language). This can help you find fellow collaborators and avoid duplicated efforts.
19 |
--------------------------------------------------------------------------------
/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.vuejs.org/guide/markdown.html) and the ability to [use Vue syntax inside markdown](https://vitepress.vuejs.org/guide/using-vue.html).
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/examples/src/modal/Modal/style.css:
--------------------------------------------------------------------------------
1 | .modal-mask {
2 | position: fixed;
3 | z-index: 9998;
4 | top: 0;
5 | left: 0;
6 | width: 100%;
7 | height: 100%;
8 | background-color: rgba(0, 0, 0, 0.5);
9 | display: table;
10 | transition: opacity 0.3s ease;
11 | }
12 |
13 | .modal-wrapper {
14 | display: table-cell;
15 | vertical-align: middle;
16 | }
17 |
18 | .modal-container {
19 | width: 300px;
20 | margin: 0px auto;
21 | padding: 20px 30px;
22 | background-color: #fff;
23 | border-radius: 2px;
24 | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
25 | transition: all 0.3s ease;
26 | }
27 |
28 | .modal-header h3 {
29 | margin-top: 0;
30 | color: #42b983;
31 | }
32 |
33 | .modal-body {
34 | margin: 20px 0;
35 | }
36 |
37 | .modal-default-button {
38 | float: right;
39 | }
40 |
41 | /*
42 | * The following styles are auto-applied to elements with
43 | * transition="modal" when their visibility is toggled
44 | * by Vue.js.
45 | *
46 | * You can easily play with the modal transition by editing
47 | * these styles.
48 | */
49 |
50 | .modal-enter-from {
51 | opacity: 0;
52 | }
53 |
54 | .modal-leave-to {
55 | opacity: 0;
56 | }
57 |
58 | .modal-enter-from .modal-container,
59 | .modal-leave-to .modal-container {
60 | -webkit-transform: scale(1.1);
61 | transform: scale(1.1);
62 | }
63 |
--------------------------------------------------------------------------------
/src/guide/built-ins/transition-demos/JsHooks.vue:
--------------------------------------------------------------------------------
1 |
40 |
41 |
42 |
43 |
44 |
45 |
51 |
52 |
53 |
54 |
55 |
56 |
65 |
--------------------------------------------------------------------------------
/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.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/components/ReplLoading.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | Repl is loading...
10 |
11 |
12 |
13 |
60 |
--------------------------------------------------------------------------------
/.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 |
--------------------------------------------------------------------------------
/src/partners/components/PartnerAll.vue:
--------------------------------------------------------------------------------
1 |
20 |
21 |
22 | ` updating as you type.
36 |
37 | To simplify two-way bindings, Vue provides a directive, `v-model`, which is essentially a syntax 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 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 |
--------------------------------------------------------------------------------
/.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/guide/built-ins/transition-demos/ListStagger.vue:
--------------------------------------------------------------------------------
1 |
41 |
42 |
43 |
44 |
45 |
52 |
57 | {{ item.msg }}
58 |
59 |
60 |
61 |
62 |
--------------------------------------------------------------------------------
/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/examples/src/flight-booker/App/composition.js:
--------------------------------------------------------------------------------
1 | import { ref, computed } from 'vue'
2 |
3 | export default {
4 | setup() {
5 | const flightType = ref('one-way flight')
6 | const departureDate = ref(dateToString(new Date()))
7 | const returnDate = ref(departureDate.value)
8 |
9 | const isReturn = computed(() => flightType.value === 'return flight')
10 |
11 | const canBook = computed(
12 | () =>
13 | !isReturn.value ||
14 | stringToDate(returnDate.value) > stringToDate(departureDate.value)
15 | )
16 |
17 | function book() {
18 | alert(
19 | isReturn.value
20 | ? `You have booked a return flight leaving on ${departureDate.value} and returning on ${returnDate.value}.`
21 | : `You have booked a one-way flight leaving on ${departureDate.value}.`
22 | )
23 | }
24 |
25 | function stringToDate(str) {
26 | const [y, m, d] = str.split('-')
27 | return new Date(+y, m - 1, +d)
28 | }
29 |
30 | function dateToString(date) {
31 | return (
32 | date.getFullYear() +
33 | '-' +
34 | pad(date.getMonth() + 1) +
35 | '-' +
36 | pad(date.getDate())
37 | )
38 | }
39 |
40 | function pad(n, s = String(n)) {
41 | return s.length < 2 ? `0${s}` : s
42 | }
43 |
44 | return {
45 | flightType,
46 | departureDate,
47 | returnDate,
48 | isReturn,
49 | canBook,
50 | book
51 | }
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/.vitepress/theme/styles/vue-mastery.css:
--------------------------------------------------------------------------------
1 | .vue-mastery-link {
2 | background-color: var(--vt-c-bg-soft);
3 | border-radius: 8px;
4 | padding: 8px 16px 8px 8px;
5 | transition: color 0.5s, background-color 0.5s;
6 | }
7 |
8 | .vue-mastery-link a {
9 | display: flex;
10 | align-items: center;
11 | }
12 |
13 | .vue-mastery-link .banner {
14 | background-color: var(--vt-c-white-soft);
15 | border-radius: 4px;
16 | width:96px;
17 | height:56px;
18 | object-fit: cover;
19 | }
20 |
21 | .vue-mastery-link .description {
22 | flex: 1;
23 | font-weight: 500;
24 | font-size: 14px;
25 | line-height: 20px;
26 | color: var(--vt-c-text-1);
27 | margin: 0 0 0 16px;
28 | transition: color 0.5s;
29 | }
30 |
31 | .vue-mastery-link .description span {
32 | color: var(--vt-c-brand);
33 | }
34 |
35 | .vue-mastery-link .logo-wrapper {
36 | position: relative;
37 | width: 48px;
38 | height: 48px;
39 | border-radius: 50%;
40 | background-color: var(--vt-c-white);
41 | display: flex;
42 | justify-content: center;
43 | align-items: center;
44 | }
45 |
46 | .vue-mastery-link .logo-wrapper img {
47 | width: 25px;
48 | object-fit: contain;
49 | }
50 |
51 | @media (max-width: 576px) {
52 | .vue-mastery-link .banner {
53 | width:56px;
54 | }
55 |
56 | .vue-mastery-link .description {
57 | font-size: 12px;
58 | line-height: 18px;
59 | }
60 | .vue-mastery-link .logo-wrapper {
61 | position: relative;
62 | width: 32px;
63 | height: 32px;
64 | }
65 | }
66 |
--------------------------------------------------------------------------------
/src/examples/src/form-bindings/App/template.html:
--------------------------------------------------------------------------------
1 |
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 |
--------------------------------------------------------------------------------
/.vitepress/theme/components/Banner.vue:
--------------------------------------------------------------------------------
1 |
20 |
21 |
22 |
30 |
31 |
32 |
37 |
38 |
63 |
--------------------------------------------------------------------------------
/src/guide/built-ins/transition-demos/BetweenElements.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 | Click to cycle through states:
10 |
11 |
12 |
15 |
18 |
21 |
22 |
23 |
24 |
25 |
26 |
61 |
--------------------------------------------------------------------------------
/src/partners/components/PartnerHero.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 | {{ title }}
8 |
9 | Vue Partners are Vue-team endorsed angencies 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
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 |
38 |
39 | {{ item }}
40 |
41 |
42 |
43 |
44 |
45 |
64 |
--------------------------------------------------------------------------------
/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.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
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/NestedTransitions.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | Hello
11 |
12 |
13 |
14 |
15 |
16 |
64 |
--------------------------------------------------------------------------------
/src/tutorial/src/step-12/description.md:
--------------------------------------------------------------------------------
1 | # 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 |
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.
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
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 | # vuepress build output
99 | .vuepress/dist
100 |
101 | # Serverless directories
102 | .serverless/
103 |
104 | # Temporary folders
105 | tmp/
106 | temp/
107 | TODOs.md
108 | src/api/index.json
109 | src/examples/data.json
110 | src/tutorial/data.json
111 | draft.md
112 |
--------------------------------------------------------------------------------
/src/tutorial/src/step-1/description.md:
--------------------------------------------------------------------------------
1 | # Getting Started
2 |
3 | Welcome to the Vue tutorial!
4 |
5 | The goal of this tutorial is to quickly give you an experience of what it feels like to work with Vue, right in the browser. It does not aim to be comprehensive, and you don't need to understand everything before moving on. However, after you complete it, make sure to also read the Guide which covers each topic in more details.
6 |
7 | ## Prerequisites
8 |
9 | The tutorial assumes basic familiarity with HTML, CSS and JavaScript. If you are totally new to front-end development, it might not be the best idea to jump right into a framework as your first step - grasp the basics then come back! Prior experience with other frameworks helps, but is not required.
10 |
11 | ## How to Use This Tutorial
12 |
13 | You can edit the code on the rightbelow and see the result update instantly. Each step will introduce a core feature of Vue, and you will be expected to complete the code to get the demo working. If you get stuck, you will have a "Show me!" button that reveals the working code for you. Try not to rely on it too much - you'll learn faster by figuring things out on your own.
14 |
15 | If you are an experienced developer coming from Vue 2 or other frameworks, there are a few settings you can tweak to make the best use of this tutorial. If you are a beginner, it's recommended to go with the defaults.
16 |
17 |
18 | Tutorial Setting Details
19 |
20 | - Vue offers two API styles: Options API and Composition API. This tutorial is designed to work for both - you can choose your preferred style using the **API Preference** switches at the top. Learn more about API styles.
21 |
22 | - You can also switch between SFC-mode or HTML-mode. The former will show code examples in Single-File Component (SFC) format, which is what most developers use when they use Vue with a build step. HTML-mode shows usage without a build step.
23 |
24 |
25 |
26 | Ready? Click "Next" to get started.
27 |
--------------------------------------------------------------------------------
/src/partners/components/PartnerLanding.vue:
--------------------------------------------------------------------------------
1 |
17 |
18 |
19 |
20 | Partner Spotlight
26 |
2 |
3 | todos
4 |
10 |
11 |
12 |
19 |
20 |
45 |
65 |
66 |
--------------------------------------------------------------------------------
/src/public/images/partners/vehikl.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
22 |
23 |
24 |
25 |
26 | {{ item }}
27 |
28 |
29 |
30 |
31 |
32 |
43 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/.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 VueJobs from './components/VueJobs.vue'
13 |
14 | export default Object.assign({}, VPTheme, {
15 | Layout: () => {
16 | // @ts-ignore
17 | return h(VPTheme.Layout, null, {
18 | 'sidebar-top': () => h(PreferenceSwitch),
19 | 'aside-mid': () => h(SponsorsAside),
20 | 'aside-bottom': () => h(VueJobs)
21 | })
22 | },
23 | enhanceApp({ app }: { app: App }) {
24 | app.provide('prefer-composition', preferComposition)
25 | app.provide('prefer-sfc', preferSFC)
26 | app.provide('filter-headers', filterHeadersByPreference)
27 | app.component('VueSchoolLink', VueSchoolLink)
28 | }
29 | })
30 |
--------------------------------------------------------------------------------
/src/guide/extras/demos/DisabledButton.vue:
--------------------------------------------------------------------------------
1 |
11 |
12 |
13 |
14 |
21 |
22 |
23 |
52 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/src/public/images/vueschool/vs-iso.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/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
15 |
16 | This feature is disabled!
19 |
20 |
20 |
27 | {{ evalCell(cells[c][r]) }}
28 |
29 |
30 |
31 |
54 |
--------------------------------------------------------------------------------
/src/tutorial/src/step-3/description.md:
--------------------------------------------------------------------------------
1 | # Attribute Bindings
2 |
3 | in Vue, mustaches are only used for text interpolation. To bind an attribute to a dynamic value, we use the `v-bind` directive:
4 |
5 | ```vue-html
6 |
7 | ```
8 |
9 | A **directive** is a special attribute that starts with the `v-` prefix. They are part of Vue's template syntax. Similar to text interpolations, directive values are JavaScript expressions that have access to the component's state. The full details of `v-bind` and directive syntax are discussed in Guide - Template Syntax.
10 |
11 | The part after the colon (`:id`) is the "argument" of the directive. Here, the element's `id` attribute will be synced with the `dynamicId` property from the component's state.
12 |
13 | Because `v-bind` is used so frequently, it has a dedicated shorthand syntax:
14 |
15 | ```vue-html
16 |
17 | ```
18 |
19 | Now, try to add a dynamic `class` binding to the ``, 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
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 |
--------------------------------------------------------------------------------
/src/translations/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | aside: false
3 | ---
4 |
5 | # Translations
6 |
7 | The Vue documentation has recently undergone a major revision, so there are no completed translations in other languages yet.
8 |
9 | Translation efforts are managed in the [vuejs-translations](https://github.com/vuejs-translations/) GitHub organization. There are currently the following translations underway. If you want to contribute, you can open an issue to express your interest.
10 |
11 | - [Simplified Chinese](https://github.com/vuejs-translations/docs-zh-cn)
12 | - [Japanese](https://github.com/vuejs-translations/docs-ja)
13 |
14 | ## Starting a new Translation
15 |
16 | We are hoping to establish a standard workflow for community translations so that we can more easily coordinate community efforts. Please keep an eye on the [Translation Guidelines repo](https://github.com/vuejs-translations/guidelines/blob/main/README.md) for updates.
17 |
18 | In the meanwhile, if you are interested in starting translation for a new language, please open a thread in the [Discussions](https://github.com/vuejs-translations/guidelines/discussions) (and check if there is already one created for your language). This can help you find fellow collaborators and avoid duplicated efforts.
19 |
--------------------------------------------------------------------------------
/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.vuejs.org/guide/markdown.html) and the ability to [use Vue syntax inside markdown](https://vitepress.vuejs.org/guide/using-vue.html).
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/examples/src/modal/Modal/style.css:
--------------------------------------------------------------------------------
1 | .modal-mask {
2 | position: fixed;
3 | z-index: 9998;
4 | top: 0;
5 | left: 0;
6 | width: 100%;
7 | height: 100%;
8 | background-color: rgba(0, 0, 0, 0.5);
9 | display: table;
10 | transition: opacity 0.3s ease;
11 | }
12 |
13 | .modal-wrapper {
14 | display: table-cell;
15 | vertical-align: middle;
16 | }
17 |
18 | .modal-container {
19 | width: 300px;
20 | margin: 0px auto;
21 | padding: 20px 30px;
22 | background-color: #fff;
23 | border-radius: 2px;
24 | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
25 | transition: all 0.3s ease;
26 | }
27 |
28 | .modal-header h3 {
29 | margin-top: 0;
30 | color: #42b983;
31 | }
32 |
33 | .modal-body {
34 | margin: 20px 0;
35 | }
36 |
37 | .modal-default-button {
38 | float: right;
39 | }
40 |
41 | /*
42 | * The following styles are auto-applied to elements with
43 | * transition="modal" when their visibility is toggled
44 | * by Vue.js.
45 | *
46 | * You can easily play with the modal transition by editing
47 | * these styles.
48 | */
49 |
50 | .modal-enter-from {
51 | opacity: 0;
52 | }
53 |
54 | .modal-leave-to {
55 | opacity: 0;
56 | }
57 |
58 | .modal-enter-from .modal-container,
59 | .modal-leave-to .modal-container {
60 | -webkit-transform: scale(1.1);
61 | transform: scale(1.1);
62 | }
63 |
--------------------------------------------------------------------------------
/src/guide/built-ins/transition-demos/JsHooks.vue:
--------------------------------------------------------------------------------
1 |
40 |
41 |
42 |
43 |
44 |
45 |
51 |
52 |
53 |
54 |
55 |
56 |
65 |
--------------------------------------------------------------------------------
/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.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/components/ReplLoading.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | Repl is loading...
10 |
11 |
12 |
13 |
60 |
--------------------------------------------------------------------------------
/.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 |
--------------------------------------------------------------------------------
/src/partners/components/PartnerAll.vue:
--------------------------------------------------------------------------------
1 |
20 |
21 |
22 | ` updating as you type.
36 |
37 | To simplify two-way bindings, Vue provides a directive, `v-model`, which is essentially a syntax 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 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 |
--------------------------------------------------------------------------------
/.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/guide/built-ins/transition-demos/ListStagger.vue:
--------------------------------------------------------------------------------
1 |
41 |
42 |
43 |
44 |
45 |
52 |
57 | {{ item.msg }}
58 |
59 |
60 |
61 |
62 |
--------------------------------------------------------------------------------
/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/examples/src/flight-booker/App/composition.js:
--------------------------------------------------------------------------------
1 | import { ref, computed } from 'vue'
2 |
3 | export default {
4 | setup() {
5 | const flightType = ref('one-way flight')
6 | const departureDate = ref(dateToString(new Date()))
7 | const returnDate = ref(departureDate.value)
8 |
9 | const isReturn = computed(() => flightType.value === 'return flight')
10 |
11 | const canBook = computed(
12 | () =>
13 | !isReturn.value ||
14 | stringToDate(returnDate.value) > stringToDate(departureDate.value)
15 | )
16 |
17 | function book() {
18 | alert(
19 | isReturn.value
20 | ? `You have booked a return flight leaving on ${departureDate.value} and returning on ${returnDate.value}.`
21 | : `You have booked a one-way flight leaving on ${departureDate.value}.`
22 | )
23 | }
24 |
25 | function stringToDate(str) {
26 | const [y, m, d] = str.split('-')
27 | return new Date(+y, m - 1, +d)
28 | }
29 |
30 | function dateToString(date) {
31 | return (
32 | date.getFullYear() +
33 | '-' +
34 | pad(date.getMonth() + 1) +
35 | '-' +
36 | pad(date.getDate())
37 | )
38 | }
39 |
40 | function pad(n, s = String(n)) {
41 | return s.length < 2 ? `0${s}` : s
42 | }
43 |
44 | return {
45 | flightType,
46 | departureDate,
47 | returnDate,
48 | isReturn,
49 | canBook,
50 | book
51 | }
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/.vitepress/theme/styles/vue-mastery.css:
--------------------------------------------------------------------------------
1 | .vue-mastery-link {
2 | background-color: var(--vt-c-bg-soft);
3 | border-radius: 8px;
4 | padding: 8px 16px 8px 8px;
5 | transition: color 0.5s, background-color 0.5s;
6 | }
7 |
8 | .vue-mastery-link a {
9 | display: flex;
10 | align-items: center;
11 | }
12 |
13 | .vue-mastery-link .banner {
14 | background-color: var(--vt-c-white-soft);
15 | border-radius: 4px;
16 | width:96px;
17 | height:56px;
18 | object-fit: cover;
19 | }
20 |
21 | .vue-mastery-link .description {
22 | flex: 1;
23 | font-weight: 500;
24 | font-size: 14px;
25 | line-height: 20px;
26 | color: var(--vt-c-text-1);
27 | margin: 0 0 0 16px;
28 | transition: color 0.5s;
29 | }
30 |
31 | .vue-mastery-link .description span {
32 | color: var(--vt-c-brand);
33 | }
34 |
35 | .vue-mastery-link .logo-wrapper {
36 | position: relative;
37 | width: 48px;
38 | height: 48px;
39 | border-radius: 50%;
40 | background-color: var(--vt-c-white);
41 | display: flex;
42 | justify-content: center;
43 | align-items: center;
44 | }
45 |
46 | .vue-mastery-link .logo-wrapper img {
47 | width: 25px;
48 | object-fit: contain;
49 | }
50 |
51 | @media (max-width: 576px) {
52 | .vue-mastery-link .banner {
53 | width:56px;
54 | }
55 |
56 | .vue-mastery-link .description {
57 | font-size: 12px;
58 | line-height: 18px;
59 | }
60 | .vue-mastery-link .logo-wrapper {
61 | position: relative;
62 | width: 32px;
63 | height: 32px;
64 | }
65 | }
66 |
--------------------------------------------------------------------------------
/src/examples/src/form-bindings/App/template.html:
--------------------------------------------------------------------------------
1 |
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 |
--------------------------------------------------------------------------------
/.vitepress/theme/components/Banner.vue:
--------------------------------------------------------------------------------
1 |
20 |
21 |
22 |
30 |
31 |
32 |
37 |
38 |
63 |
--------------------------------------------------------------------------------
/src/guide/built-ins/transition-demos/BetweenElements.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 | Click to cycle through states:
10 |
11 |
12 |
15 |
18 |
21 |
22 |
23 |
24 |
25 |
26 |
61 |
--------------------------------------------------------------------------------
/src/partners/components/PartnerHero.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 | {{ title }}
8 |
9 | Vue Partners are Vue-team endorsed angencies 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
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 |
38 |
39 | {{ item }}
40 |
41 |
42 |
43 |
44 |
45 |
64 |
--------------------------------------------------------------------------------
/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.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
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/NestedTransitions.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | Hello
11 |
12 |
13 |
14 |
15 |
16 |
64 |
--------------------------------------------------------------------------------
/src/tutorial/src/step-12/description.md:
--------------------------------------------------------------------------------
1 | # 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 |
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.
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
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 | # vuepress build output
99 | .vuepress/dist
100 |
101 | # Serverless directories
102 | .serverless/
103 |
104 | # Temporary folders
105 | tmp/
106 | temp/
107 | TODOs.md
108 | src/api/index.json
109 | src/examples/data.json
110 | src/tutorial/data.json
111 | draft.md
112 |
--------------------------------------------------------------------------------
/src/tutorial/src/step-1/description.md:
--------------------------------------------------------------------------------
1 | # Getting Started
2 |
3 | Welcome to the Vue tutorial!
4 |
5 | The goal of this tutorial is to quickly give you an experience of what it feels like to work with Vue, right in the browser. It does not aim to be comprehensive, and you don't need to understand everything before moving on. However, after you complete it, make sure to also read the Guide which covers each topic in more details.
6 |
7 | ## Prerequisites
8 |
9 | The tutorial assumes basic familiarity with HTML, CSS and JavaScript. If you are totally new to front-end development, it might not be the best idea to jump right into a framework as your first step - grasp the basics then come back! Prior experience with other frameworks helps, but is not required.
10 |
11 | ## How to Use This Tutorial
12 |
13 | You can edit the code on the rightbelow and see the result update instantly. Each step will introduce a core feature of Vue, and you will be expected to complete the code to get the demo working. If you get stuck, you will have a "Show me!" button that reveals the working code for you. Try not to rely on it too much - you'll learn faster by figuring things out on your own.
14 |
15 | If you are an experienced developer coming from Vue 2 or other frameworks, there are a few settings you can tweak to make the best use of this tutorial. If you are a beginner, it's recommended to go with the defaults.
16 |
17 |
18 | Tutorial Setting Details
19 |
20 | - Vue offers two API styles: Options API and Composition API. This tutorial is designed to work for both - you can choose your preferred style using the **API Preference** switches at the top. Learn more about API styles.
21 |
22 | - You can also switch between SFC-mode or HTML-mode. The former will show code examples in Single-File Component (SFC) format, which is what most developers use when they use Vue with a build step. HTML-mode shows usage without a build step.
23 |
24 |
25 |
26 | Ready? Click "Next" to get started.
27 |
--------------------------------------------------------------------------------
/src/partners/components/PartnerLanding.vue:
--------------------------------------------------------------------------------
1 |
17 |
18 |
19 |
20 | Partner Spotlight
26 |
2 |
3 | todos
4 |
10 |
11 |
12 |
19 |
20 |
45 |
65 |
66 |
--------------------------------------------------------------------------------
/src/public/images/partners/vehikl.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
27 |
28 | ```vue-html
29 |
30 |
34 |
35 |
36 | ```vue-html
37 |
38 |
42 |
43 | Content inside the `
43 |
44 |
45 |
51 |
52 |
53 |
54 |
55 |
56 |
65 |
--------------------------------------------------------------------------------
/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.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/components/ReplLoading.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
11 |
12 |
13 |
60 |
--------------------------------------------------------------------------------
/.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 |
--------------------------------------------------------------------------------
/src/partners/components/PartnerAll.vue:
--------------------------------------------------------------------------------
1 |
20 |
21 |
22 |
4 |
5 |
6 |
7 |
8 |
9 | Repl is loading...
10 |
24 |
31 |
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 a syntax 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 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 |
--------------------------------------------------------------------------------
/.vitepress/theme/components/VueSchoolLink.vue:
--------------------------------------------------------------------------------
1 |
2 |
12 |
13 |
21 |
60 |
--------------------------------------------------------------------------------
/src/about/team/TeamHero.vue:
--------------------------------------------------------------------------------
1 |
2 |
8 |
11 |
3 |
15 |
16 |
17 |
76 |
--------------------------------------------------------------------------------
/src/guide/built-ins/transition-demos/ListStagger.vue:
--------------------------------------------------------------------------------
1 |
41 |
42 |
43 |
4 |
14 |
5 |
7 |
44 |
45 |
61 |
62 |
--------------------------------------------------------------------------------
/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/examples/src/flight-booker/App/composition.js:
--------------------------------------------------------------------------------
1 | import { ref, computed } from 'vue'
2 |
3 | export default {
4 | setup() {
5 | const flightType = ref('one-way flight')
6 | const departureDate = ref(dateToString(new Date()))
7 | const returnDate = ref(departureDate.value)
8 |
9 | const isReturn = computed(() => flightType.value === 'return flight')
10 |
11 | const canBook = computed(
12 | () =>
13 | !isReturn.value ||
14 | stringToDate(returnDate.value) > stringToDate(departureDate.value)
15 | )
16 |
17 | function book() {
18 | alert(
19 | isReturn.value
20 | ? `You have booked a return flight leaving on ${departureDate.value} and returning on ${returnDate.value}.`
21 | : `You have booked a one-way flight leaving on ${departureDate.value}.`
22 | )
23 | }
24 |
25 | function stringToDate(str) {
26 | const [y, m, d] = str.split('-')
27 | return new Date(+y, m - 1, +d)
28 | }
29 |
30 | function dateToString(date) {
31 | return (
32 | date.getFullYear() +
33 | '-' +
34 | pad(date.getMonth() + 1) +
35 | '-' +
36 | pad(date.getDate())
37 | )
38 | }
39 |
40 | function pad(n, s = String(n)) {
41 | return s.length < 2 ? `0${s}` : s
42 | }
43 |
44 | return {
45 | flightType,
46 | departureDate,
47 | returnDate,
48 | isReturn,
49 | canBook,
50 | book
51 | }
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/.vitepress/theme/styles/vue-mastery.css:
--------------------------------------------------------------------------------
1 | .vue-mastery-link {
2 | background-color: var(--vt-c-bg-soft);
3 | border-radius: 8px;
4 | padding: 8px 16px 8px 8px;
5 | transition: color 0.5s, background-color 0.5s;
6 | }
7 |
8 | .vue-mastery-link a {
9 | display: flex;
10 | align-items: center;
11 | }
12 |
13 | .vue-mastery-link .banner {
14 | background-color: var(--vt-c-white-soft);
15 | border-radius: 4px;
16 | width:96px;
17 | height:56px;
18 | object-fit: cover;
19 | }
20 |
21 | .vue-mastery-link .description {
22 | flex: 1;
23 | font-weight: 500;
24 | font-size: 14px;
25 | line-height: 20px;
26 | color: var(--vt-c-text-1);
27 | margin: 0 0 0 16px;
28 | transition: color 0.5s;
29 | }
30 |
31 | .vue-mastery-link .description span {
32 | color: var(--vt-c-brand);
33 | }
34 |
35 | .vue-mastery-link .logo-wrapper {
36 | position: relative;
37 | width: 48px;
38 | height: 48px;
39 | border-radius: 50%;
40 | background-color: var(--vt-c-white);
41 | display: flex;
42 | justify-content: center;
43 | align-items: center;
44 | }
45 |
46 | .vue-mastery-link .logo-wrapper img {
47 | width: 25px;
48 | object-fit: contain;
49 | }
50 |
51 | @media (max-width: 576px) {
52 | .vue-mastery-link .banner {
53 | width:56px;
54 | }
55 |
56 | .vue-mastery-link .description {
57 | font-size: 12px;
58 | line-height: 18px;
59 | }
60 | .vue-mastery-link .logo-wrapper {
61 | position: relative;
62 | width: 32px;
63 | height: 32px;
64 | }
65 | }
66 |
--------------------------------------------------------------------------------
/src/examples/src/form-bindings/App/template.html:
--------------------------------------------------------------------------------
1 |
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 | -------------------------------------------------------------------------------- /.vitepress/theme/components/Banner.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 22 | 30 | 31 | 32 | 37 | 38 | 63 | -------------------------------------------------------------------------------- /src/guide/built-ins/transition-demos/BetweenElements.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 |
9 | Click to cycle through states:
10 |
24 |
25 |
26 |
61 |
--------------------------------------------------------------------------------
/src/partners/components/PartnerHero.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
11 |
12 |
15 |
18 |
21 |
22 |
23 |
7 |
17 |
18 |
19 |
72 |
--------------------------------------------------------------------------------
/src/partners/components/PartnerJoin.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 | {{ title }}
8 |9 | Vue Partners are Vue-team endorsed angencies 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
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/guide/built-ins/transition-demos/ListMove.vue:
--------------------------------------------------------------------------------
1 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 | {{ item }}
40 |
41 |
42 |
43 |
44 |
45 |
64 |
--------------------------------------------------------------------------------
/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.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
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/NestedTransitions.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 |
9 |
13 |
14 |
15 |
16 |
64 |
--------------------------------------------------------------------------------
/src/tutorial/src/step-12/description.md:
--------------------------------------------------------------------------------
1 | # 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 |
10 |
12 | Hello
11 |
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/tutorial/src/step-7/description.md:
--------------------------------------------------------------------------------
1 | # 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 |
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
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 { MarkdownRenderer } from 'vitepress'
15 |
16 | declare module 'vitepress' {
17 | interface Header {
18 | compositionOnly?: boolean
19 | optionsOnly?: boolean
20 | }
21 | }
22 |
23 | export const headerPlugin = (md: MarkdownIt) => {
24 | const originalOpen = md.renderer.rules.heading_open!
25 | md.renderer.rules.heading_open = (tokens, i, ...rest) => {
26 | for (const child of tokens[i + 1].children!) {
27 | if (child.type === 'text' && child.content.endsWith('*')) {
28 | child.content = child.content.replace(/\s*\*+$/, '')
29 | }
30 | }
31 | return originalOpen.call(null, tokens, i, ...rest)
32 | }
33 |
34 | md.renderer.rules.heading_close = (tokens, i, options, _env, self) => {
35 | const headers = (md as MarkdownRenderer).__data?.headers
36 | if (headers) {
37 | const last = headers[headers.length - 1]
38 | if (last.title.endsWith('*')) {
39 | if (last.title.endsWith('**')) {
40 | last.compositionOnly = true
41 | } else {
42 | last.optionsOnly = true
43 | }
44 | last.title = last.title.replace(/\s*\*+$/, '')
45 | }
46 | }
47 | return self.renderToken(tokens, i, options)
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/src/examples/ExampleRepl.vue:
--------------------------------------------------------------------------------
1 |
38 |
39 |
40 |
18 |
25 |
26 | Ready? Click "Next" to get started.
27 |
--------------------------------------------------------------------------------
/src/partners/components/PartnerLanding.vue:
--------------------------------------------------------------------------------
1 |
17 |
18 |
19 | Tutorial Setting Details
19 | 20 | - Vue offers two API styles: Options API and Composition API. This tutorial is designed to work for both - you can choose your preferred style using the **API Preference** switches at the top. Learn more about API styles. 21 | 22 | - You can also switch between SFC-mode or HTML-mode. The former will show code examples in Single-File Component (SFC) format, which is what most developers use when they use Vue with a build step. HTML-mode shows usage without a build step. 23 | 24 |
20 |
38 |
39 |
40 |
91 |
--------------------------------------------------------------------------------
/src/examples/src/todomvc/App/template.html:
--------------------------------------------------------------------------------
1 |
24 |
29 |
30 |
35 |
36 |
25 |
28 |