diff --git a/src/.vuepress/components/common/codepen-snippet.vue b/src/.vuepress/components/common/codepen-snippet.vue new file mode 100644 index 0000000000..ed23e3a4e6 --- /dev/null +++ b/src/.vuepress/components/common/codepen-snippet.vue @@ -0,0 +1,104 @@ + + + + + diff --git a/src/cookbook/editable-svg-icons.md b/src/cookbook/editable-svg-icons.md index f598e5e58f..804924acae 100644 --- a/src/cookbook/editable-svg-icons.md +++ b/src/cookbook/editable-svg-icons.md @@ -143,7 +143,7 @@ export default { We're applying `refs` to the groups of paths we need to move, and as both sides of the scissors have to move in tandem, we'll create a function we can reuse where we'll pass in the `refs`. The use of GreenSock helps resolve animation support and `transform-origin` issues across browser. -

See the Pen Editable SVG Icon System: Animated icon by Vue (@Vue) on CodePen.

+

Pretty easily accomplished! And easy to update on the fly.

diff --git a/src/examples/commits.md b/src/examples/commits.md index b4e93d173a..566c489ca9 100644 --- a/src/examples/commits.md +++ b/src/examples/commits.md @@ -2,9 +2,4 @@ > This example fetches latest Vue.js commits data from GitHub’s API and displays them as a list. You can switch between the master and dev branches. -

- See the Pen - Vue 3 Commits by Vue (@Vue) - on CodePen. -

- + diff --git a/src/examples/elastic-header.md b/src/examples/elastic-header.md index b18af0ad7e..7131249aaa 100644 --- a/src/examples/elastic-header.md +++ b/src/examples/elastic-header.md @@ -1,8 +1,3 @@ # Elastic Header Example -

- See the Pen - Vue 3 Markdown Editor by Vue (@immarina) - on CodePen. -

- + diff --git a/src/examples/grid-component.md b/src/examples/grid-component.md index d546d6358a..fe725ebf4b 100644 --- a/src/examples/grid-component.md +++ b/src/examples/grid-component.md @@ -2,9 +2,4 @@ > This is an example of creating a reusable grid component and using it with external data. -

- See the Pen - Vue 3 Grid Component Example by Vue (@Vue) - on CodePen. -

- + diff --git a/src/examples/markdown.md b/src/examples/markdown.md index 9066e5c914..4b05c831f4 100644 --- a/src/examples/markdown.md +++ b/src/examples/markdown.md @@ -2,9 +2,4 @@ > A simple Markdown editor -

- See the Pen - Vue 3 Markdown Editor by Vue (@immarina) - on CodePen. -

- + diff --git a/src/examples/modal.md b/src/examples/modal.md index f442ede42e..7479a2493b 100644 --- a/src/examples/modal.md +++ b/src/examples/modal.md @@ -2,9 +2,4 @@ > Features used: component, prop passing, content insertion, transitions. -

- See the Pen - Vue 3 Modal Component by Vue (@Vue) - on CodePen. -

- + diff --git a/src/examples/select2.md b/src/examples/select2.md index 178908aafb..82c4f70287 100644 --- a/src/examples/select2.md +++ b/src/examples/select2.md @@ -2,9 +2,4 @@ > In this example we are integrating a 3rd party jQuery plugin (select2) by wrapping it inside a custom component. -

- See the Pen - Vue 3 Wrapper Component Example by Vue (@Vue) - on CodePen. -

- + diff --git a/src/examples/svg.md b/src/examples/svg.md index 1db7833aed..c3d797a3e7 100644 --- a/src/examples/svg.md +++ b/src/examples/svg.md @@ -2,9 +2,4 @@ > This example showcases a combination of custom component, computed property, two-way binding and SVG support. -

- See the Pen - Vue 3 SVG Graph Example by Vue (@Vue) - on CodePen. -

- + diff --git a/src/examples/todomvc.md b/src/examples/todomvc.md index 2e08eccd4e..8377ea5d39 100644 --- a/src/examples/todomvc.md +++ b/src/examples/todomvc.md @@ -8,9 +8,4 @@ Note that if your web browser is configured to block 3rd-party data/cookies, the Additionally, due to limitations on CodePen, hashtag navigation will not work. ::: -

- See the Pen - Vue 3 TodoMVC by Vue (@Vue) - on CodePen. -

- + diff --git a/src/examples/tree-view.md b/src/examples/tree-view.md index d55a1d7069..1b437b771b 100644 --- a/src/examples/tree-view.md +++ b/src/examples/tree-view.md @@ -2,9 +2,4 @@ > Example of a tree view implementation showcasing recursive usage of components. -

- See the Pen - Vue 3 Tree View by Vue (@Vue) - on CodePen. -

- + diff --git a/src/guide/a11y-basics.md b/src/guide/a11y-basics.md index e88d3407fe..f05547b18e 100644 --- a/src/guide/a11y-basics.md +++ b/src/guide/a11y-basics.md @@ -54,12 +54,7 @@ export default { ``` -

- See the Pen - Skip to Main by Maria (@mlama007) - on CodePen. -

- + [Read documentation on skip link to main content](https://www.w3.org/WAI/WCAG21/Techniques/general/G1.html) diff --git a/src/guide/a11y-semantics.md b/src/guide/a11y-semantics.md index 711e2db99b..255e832401 100644 --- a/src/guide/a11y-semantics.md +++ b/src/guide/a11y-semantics.md @@ -21,12 +21,7 @@ Labels are typically placed on top or to the left of the form fields: ``` -

- See the Pen - Simple Form by Maria (@mlama007) - on CodePen. -

- + Notice how you can include `autocomplete='on'` on the form element and it will apply to all inputs in your form. You can also set different [values for autocomplete attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for each input. @@ -39,12 +34,7 @@ Provide labels to describe the purpose of all form control; linking `for` and `i ``` -

- See the Pen - Form Label by Maria (@mlama007) - on CodePen. -

- + If you inspect this element in your chrome developer tools and open the Accessibility tab inside the Elements tab, you will see how the input gets its name from the label: @@ -78,12 +68,7 @@ You can also give the input an accessible name with [`aria-label`](https://devel /> ``` -

- See the Pen - Form ARIA label by Maria (@mlama007) - on CodePen. -

- + Feel free to inspect this element in Chrome DevTools to see how the accessible name has changed: @@ -115,12 +100,7 @@ Using [`aria-labelledby`](https://developer.mozilla.org/en-US/docs/Web/Accessibi ``` -

- See the Pen - Form ARIA labelledby by Maria (@mlama007) - on CodePen. -

- + ![Chrome Developer Tools showing input accessible name from aria-labelledby](/images/AccessibleARIAlabelledbyDevTools.png) @@ -152,12 +132,7 @@ Using [`aria-labelledby`](https://developer.mozilla.org/en-US/docs/Web/Accessibi ``` -

- See the Pen - Form ARIA describedby by Maria (@mlama007) - on CodePen. -

- + You can see the description by inspecting Chrome DevTools: @@ -169,12 +144,7 @@ Avoid using placeholders as they can confuse many users. One of the issues with placeholders is that they don't meet the [color contrast criteria](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) by default; fixing the color contrast makes the placeholder look like pre-populated data in the input fields. Looking at the following example, you can see that the Last Name placeholder which meets the color contrast criteria looks like pre-populated data: -

- See the Pen - Form Placeholder by Maria (@mlama007) - on CodePen. -

- + It is best to provide all the information the user needs to fill out forms outside any inputs. @@ -208,12 +178,7 @@ Alternatively, you can attach the instructions to the input with [`aria-describe ``` -

- See the Pen - Form Instructions by Maria (@mlama007) - on CodePen. -

- + ### Hiding Content @@ -247,12 +212,7 @@ We can use CSS to visually hide elements but keep them available for assistive t } ``` -

- See the Pen - Form Search by Maria (@mlama007) - on CodePen. -

- + #### aria-hidden="true" @@ -280,12 +240,7 @@ You can also use an input to create buttons: ``` -

- See the Pen - Form Buttons by Maria (@mlama007) - on CodePen. -

- + #### Functional Images @@ -321,9 +276,4 @@ You can use this technique to create functional images. ``` -

- See the Pen - Functional Images by Maria (@mlama007) - on CodePen. -

- + diff --git a/src/guide/component-basics.md b/src/guide/component-basics.md index 3965108ad7..a111df7f72 100644 --- a/src/guide/component-basics.md +++ b/src/guide/component-basics.md @@ -38,12 +38,7 @@ Components are reusable instances with a name: in this case, ``. app.mount('#components-demo') ``` -

- See the Pen - Component basics by Vue (@Vue) - on CodePen. -

- + Since components are reusable instances, they accept the same options as a root instance, such as `data`, `computed`, `watch`, `methods`, and lifecycle hooks. The only exceptions are a few root-specific options like `el`. @@ -59,12 +54,7 @@ Components can be reused as many times as you want: ``` -

- See the Pen - Component basics: reusing components by Vue (@Vue) - on CodePen. -

- + Notice that when clicking on the buttons, each one maintains its own, separate `count`. That's because each time you use a component, a new **instance** of it is created. @@ -119,12 +109,7 @@ Once a prop is registered, you can pass data to it as a custom attribute, like t ``` -

- See the Pen - Component basics: passing props by Vue (@Vue) - on CodePen. -

- + In a typical app, however, you'll likely have an array of posts in `data`: @@ -236,12 +221,7 @@ Then the child component can emit an event on itself by calling the built-in [** Thanks to the `@enlarge-text="postFontSize += 0.1"` listener, the parent will receive the event and update `postFontSize` value. -

- See the Pen - Component basics: emitting events by Vue (@Vue) - on CodePen. -

- + We can list emitted events in the component's `emits` option. @@ -377,12 +357,7 @@ Just like with HTML elements, it's often useful to be able to pass content to a Which might render something like: -

- See the Pen - Component basics: slots by Vue (@Vue) - on CodePen. -

- + Fortunately, this task is made very simple by Vue's custom `` element: @@ -405,12 +380,7 @@ That's all you need to know about slots for now, but once you've finished readin Sometimes, it's useful to dynamically switch between components, like in a tabbed interface: -

- See the Pen - Component basics: dynamic components by Vue (@Vue) - on CodePen. -

- + The above is made possible by Vue's `` element with the `is` special attribute: diff --git a/src/guide/component-custom-events.md b/src/guide/component-custom-events.md index f8e98ed49f..2bb1844959 100644 --- a/src/guide/component-custom-events.md +++ b/src/guide/component-custom-events.md @@ -134,12 +134,7 @@ app.component('user-name', { }) ``` -

- See the Pen - Multiple v-models by Vue (@Vue) - on CodePen. -

- + ## Handling `v-model` modifiers diff --git a/src/guide/component-dynamic-async.md b/src/guide/component-dynamic-async.md index 9eb95ef701..70f3f059bd 100644 --- a/src/guide/component-dynamic-async.md +++ b/src/guide/component-dynamic-async.md @@ -12,12 +12,7 @@ Earlier, we used the `is` attribute to switch between components in a tabbed int When switching between these components though, you'll sometimes want to maintain their state or avoid re-rendering for performance reasons. For example, when expanding our tabbed interface a little: -

- See the Pen - Dynamic components: without keep-alive by Vue (@Vue) - on CodePen. -

- + You'll notice that if you select a post, switch to the _Archive_ tab, then switch back to _Posts_, it's no longer showing the post you selected. That's because each time you switch to a new tab, Vue creates a new instance of the `currentTabComponent`. @@ -32,12 +27,7 @@ Recreating dynamic components is normally useful behavior, but in this case, we' Check out the result below: -

- See the Pen - Dynamic components: with keep-alive by Vue (@Vue) - on CodePen. -

- + Now the _Posts_ tab maintains its state (the selected post) even when it's not rendered. diff --git a/src/guide/computed.md b/src/guide/computed.md index 15b4f56173..193fc1a139 100644 --- a/src/guide/computed.md +++ b/src/guide/computed.md @@ -69,12 +69,7 @@ Vue.createApp({ Result: -

- See the Pen - Computed basic example by Vue (@Vue) - on CodePen. -

- + Here we have declared a computed property `publishedBooksMessage`. @@ -197,12 +192,7 @@ For example: Result: -

- See the Pen - Watch basic example by Vue (@Vue) - on CodePen. -

- + In this case, using the `watch` option allows us to perform an asynchronous operation (accessing an API) and sets a condition for performing this operation. None of that would be possible with a computed property. diff --git a/src/guide/custom-directive.md b/src/guide/custom-directive.md index 7ee4ae33eb..95ded50d69 100644 --- a/src/guide/custom-directive.md +++ b/src/guide/custom-directive.md @@ -4,12 +4,7 @@ In addition to the default set of directives shipped in core (like `v-model` or `v-show`), Vue also allows you to register your own custom directives. Note that in Vue, the primary form of code reuse and abstraction is components - however, there may be cases where you need some low-level DOM access on plain elements, and this is where custom directives would still be useful. An example would be focusing on an input element, like this one: -

- See the Pen - Custom directives: basic example by Vue (@Vue) - on CodePen. -

- + When the page loads, that element gains focus (note: `autofocus` doesn't work on mobile Safari). In fact, if you haven't clicked on anything else since visiting this page, the input above should be focused now. Also, you can click on the `Rerun` button and input will be focused. @@ -127,12 +122,7 @@ app.mount('#dynamic-arguments-example') Result: -

- See the Pen - Custom directives: dynamic arguments by Vue (@Vue) - on CodePen. -

- + Our custom directive is now flexible enough to support a few different use cases. To make it even more dynamic, we can also allow to modify a bound value. Let's create an additional property `pinPadding` and bind it to the `` @@ -173,12 +163,7 @@ app.directive('pin', { Result: -

- See the Pen - Custom directives: dynamic arguments + dynamic binding by Vue (@Vue) - on CodePen. -

- + ## Function Shorthand diff --git a/src/guide/events.md b/src/guide/events.md index 32d1177ff4..4cdfb35c1c 100644 --- a/src/guide/events.md +++ b/src/guide/events.md @@ -25,12 +25,7 @@ Vue.createApp({ Result: -

- See the Pen - Event handling: basic by Vue (@Vue) - on CodePen. -

- + ## Method Event Handlers @@ -67,12 +62,7 @@ Vue.createApp({ Result: -

- See the Pen - Event handling: with a method by Vue (@Vue) - on CodePen. -

- + ## Methods in Inline Handlers @@ -97,12 +87,7 @@ Vue.createApp({ Result: -

- See the Pen - Event handling: with an inline handler by Vue (@Vue) - on CodePen. -

- + Sometimes we also need to access the original DOM event in an inline statement handler. You can pass it into a method using the special `$event` variable: diff --git a/src/guide/forms.md b/src/guide/forms.md index a4531a6178..dbfc49c0a4 100644 --- a/src/guide/forms.md +++ b/src/guide/forms.md @@ -26,12 +26,7 @@ For languages that require an [IME](https://en.wikipedia.org/wiki/Input_method)

Message is: {{ message }}

``` -

- See the Pen - Handling forms: basic v-model by Vue (@Vue) - on CodePen. -

- + ### Multiline text @@ -42,12 +37,7 @@ For languages that require an [IME](https://en.wikipedia.org/wiki/Input_method) ``` -

- See the Pen - Handling forms: textarea by Vue (@Vue) - on CodePen. -

- + Interpolation on textareas won't work. Use `v-model` instead. @@ -68,12 +58,7 @@ Single checkbox, boolean value: ``` -

- See the Pen - Handling forms: checkbox by Vue (@Vue) - on CodePen. -

- + Multiple checkboxes, bound to the same Array: @@ -100,12 +85,7 @@ Vue.createApp({ }).mount('#v-model-multiple-checkboxes') ``` -

- See the Pen - Handling forms: multiple checkboxes by Vue (@Vue) - on CodePen. -

- + ### Radio @@ -131,12 +111,7 @@ Vue.createApp({ }).mount('#v-model-radiobutton') ``` -

- See the Pen - Handling forms: radiobutton by Vue (@Vue) - on CodePen. -

- + ### Select @@ -164,12 +139,7 @@ Vue.createApp({ }).mount('#v-model-select') ``` -

- See the Pen - Handling forms: select by Vue (@Vue) - on CodePen. -

- + :::tip Note If the initial value of your `v-model` expression does not match any of the options, the `