diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js index 0be09c846d..2cc3ff28b3 100644 --- a/src/.vuepress/config.js +++ b/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 }, diff --git a/src/examples/commits.md b/src/examples/commits.md new file mode 100644 index 0000000000..b4e93d173a --- /dev/null +++ b/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. + +

+ 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 new file mode 100644 index 0000000000..b18af0ad7e --- /dev/null +++ b/src/examples/elastic-header.md @@ -0,0 +1,8 @@ +# 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 new file mode 100644 index 0000000000..34d53f837d --- /dev/null +++ b/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. + +

+ See the Pen + Vue 3 Elastic Draggable Header Example by Vue (@Vue) + on CodePen. +

+ diff --git a/src/examples/markdown.md b/src/examples/markdown.md new file mode 100644 index 0000000000..9066e5c914 --- /dev/null +++ b/src/examples/markdown.md @@ -0,0 +1,10 @@ +# Markdown Editor + +> 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 new file mode 100644 index 0000000000..bc314697b9 --- /dev/null +++ b/src/examples/modal.md @@ -0,0 +1,10 @@ +# Modal Component + +> Features used: component, prop passing, content insertion, transitions. + +

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

+ diff --git a/src/examples/select2.md b/src/examples/select2.md new file mode 100644 index 0000000000..178908aafb --- /dev/null +++ b/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. + +

+ 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 new file mode 100644 index 0000000000..1db7833aed --- /dev/null +++ b/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. + +

+ 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 new file mode 100644 index 0000000000..2e08eccd4e --- /dev/null +++ b/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. +::: + +

+ 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 new file mode 100644 index 0000000000..d55a1d7069 --- /dev/null +++ b/src/examples/tree-view.md @@ -0,0 +1,10 @@ +# Tree View + +> Example of a tree view implementation showcasing recursive usage of components. + +

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

+