feat: migrate examples

src/.vuepress/config.js

@@ -167,6 +167,23 @@ const sidebar = {
       ]
     },
     '/api/composition-api'
+  ],
+  examples: [
+    {
+      title: 'Examples',
+      collapsable: false,
+      children: [
+        '/examples/markdown',
+        '/examples/commits',
+        '/examples/grid-component',
+        '/examples/tree-view',
+        '/examples/svg',
+        '/examples/modal',
+        '/examples/elastic-header',
+        '/examples/select2',
+        '/examples/todomvc'
+      ]
+    }
   ]
 }
 
@@ -213,7 +230,8 @@ module.exports = {
         ariaLabel: 'Documentation Menu',
         items: [
           { text: 'Guide', link: '/guide/introduction' },
-          { text: 'Style Guide', link: '/style-guide/' }
+          { text: 'Style Guide', link: '/style-guide/' },
+          { text: 'Examples', link: '/examples/markdown' }
         ]
       },
       { text: 'API Reference', link: '/api/application-config' },
@@ -275,7 +293,8 @@ module.exports = {
       collapsable: false,
       '/guide/': sidebar.guide,
       '/community/': sidebar.guide,
-      '/api/': sidebar.api
+      '/api/': sidebar.api,
+      '/examples/': sidebar.examples
     },
     smoothScroll: false
   },

src/examples/commits.md

@@ -0,0 +1,10 @@
+# GitHub Commits
+
+> 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.
+
+<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="RwaWmzY" data-preview="true" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue 3 Commits">
+  <span>See the Pen <a href="https://codepen.io/team/Vue/pen/RwaWmzY">
+  Vue 3 Commits</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
+  on <a href="https://codepen.io">CodePen</a>.</span>
+</p>
+<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

src/examples/elastic-header.md

@@ -0,0 +1,8 @@
+# Elastic Header Example
+
+<p class="codepen" data-height="474" data-theme-id="39028" data-default-tab="js,result" data-user="immarina" data-slug-hash="ZEWGmar" style="height: 474px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue 3 Markdown Editor">
+  <span>See the Pen <a href="https://codepen.io/immarina/pen/ZEWGmar">
+  Vue 3 Markdown Editor</a> by Vue (<a href="https://codepen.io/immarina">@immarina</a>)
+  on <a href="https://codepen.io">CodePen</a>.</span>
+</p>
+<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

src/examples/grid-component.md

@@ -0,0 +1,10 @@
+# Grid Component
+
+> This is an example of creating a reusable grid component and using it with external data.
+
+<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="zYqvQgw" data-preview="true" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue 3 Elastic Draggable Header Example">
+  <span>See the Pen <a href="https://codepen.io/team/Vue/pen/zYqvQgw">
+  Vue 3 Elastic Draggable Header Example</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
+  on <a href="https://codepen.io">CodePen</a>.</span>
+</p>
+<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

src/examples/markdown.md

@@ -0,0 +1,10 @@
+# Markdown Editor
+
+> A simple Markdown editor
+
+<p class="codepen" data-height="474" data-theme-id="39028" data-default-tab="js,result" data-user="immarina" data-slug-hash="oNxXzyB" style="height: 474px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue 3 Markdown Editor">
+  <span>See the Pen <a href="https://codepen.io/immarina/pen/oNxXzyB">
+  Vue 3 Markdown Editor</a> by Vue (<a href="https://codepen.io/immarina">@immarina</a>)
+  on <a href="https://codepen.io">CodePen</a>.</span>
+</p>
+<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

src/examples/modal.md

@@ -0,0 +1,10 @@
+# Modal Component
+
+> Features used: component, prop passing, content insertion, transitions.
+
+<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="css,result" data-user="Vue" data-slug-hash="BaKoeXe" data-preview="true" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue 3 Markdown Editor">
+  <span>See the Pen <a href="https://codepen.io/team/Vue/pen/BaKoeXe">
+  Vue 3 Markdown Editor</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
+  on <a href="https://codepen.io">CodePen</a>.</span>
+</p>
+<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

src/examples/select2.md

@@ -0,0 +1,10 @@
+# Wrapper Component Example
+
+> In this example we are integrating a 3rd party jQuery plugin (select2) by wrapping it inside a custom component.
+
+<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="eYZpwOB" data-preview="true" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue 3 Wrapper Component Example">
+  <span>See the Pen <a href="https://codepen.io/team/Vue/pen/eYZpwOB">
+  Vue 3 Wrapper Component Example</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
+  on <a href="https://codepen.io">CodePen</a>.</span>
+</p>
+<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

src/examples/svg.md

@@ -0,0 +1,10 @@
+# SVG Graph
+
+> This example showcases a combination of custom component, computed property, two-way binding and SVG support.
+
+<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="XWdmLWM" data-preview="true" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue 3 SVG Graph Example">
+  <span>See the Pen <a href="https://codepen.io/team/Vue/pen/XWdmLWM">
+  Vue 3 SVG Graph Example</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
+  on <a href="https://codepen.io">CodePen</a>.</span>
+</p>
+<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

src/examples/todomvc.md

@@ -0,0 +1,16 @@
+# TodoMVC
+
+> This is a fully spec-compliant TodoMVC implementation in under 120 effective lines of JavaScript (excluding comments and blank lines).
+
+:::warning
+Note that if your web browser is configured to block 3rd-party data/cookies, the example below will not work, as the **localStorage** data will fail to be saved.
+
+Additionally, due to limitations on CodePen, hashtag navigation will not work.
+:::
+
+<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="Yzqyozj" data-preview="true" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue 3 TodoMVC">
+  <span>See the Pen <a href="https://codepen.io/team/Vue/pen/Yzqyozj">
+  Vue 3 TodoMVC</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
+  on <a href="https://codepen.io">CodePen</a>.</span>
+</p>
+<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

src/examples/tree-view.md

@@ -0,0 +1,10 @@
+# Tree View
+
+> Example of a tree view implementation showcasing recursive usage of components.
+
+<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="WNwQqbN" data-preview="true" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue 3 Tree View">
+  <span>See the Pen <a href="https://codepen.io/team/Vue/pen/WNwQqbN">
+  Vue 3 Tree View</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
+  on <a href="https://codepen.io">CodePen</a>.</span>
+</p>
+<script async src="https://static.codepen.io/assets/embed/ei.js"></script>