From fb5956c574939f02da2942b85aa3fee8ad73cd18 Mon Sep 17 00:00:00 2001
From: Ben Hong <ben@bencodezen.io>
Date: Mon, 31 Aug 2020 10:50:02 -0400
Subject: [PATCH] docs (#386): add mobile section

---
 src/.vuepress/config.js | 88 +++++++++++++++++++++++++----------------
 src/guide/mobile.md     | 23 +++++++++++
 2 files changed, 76 insertions(+), 35 deletions(-)
 create mode 100644 src/guide/mobile.md

diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js
index aff8c46424..331ce0eb33 100644
--- a/src/.vuepress/config.js
+++ b/src/.vuepress/config.js
@@ -1,10 +1,13 @@
 const sidebar = {
-  cookbook: [{
-    title: 'Cookbook',
-    collapsable: false,
-    children: ['/cookbook/', '/cookbook/editable-svg-icons']
-  }],
-  guide: [{
+  cookbook: [
+    {
+      title: 'Cookbook',
+      collapsable: false,
+      children: ['/cookbook/', '/cookbook/editable-svg-icons']
+    }
+  ],
+  guide: [
+    {
       title: 'Essentials',
       collapsable: false,
       children: [
@@ -60,7 +63,8 @@ const sidebar = {
     {
       title: 'Advanced Guides',
       collapsable: false,
-      children: [{
+      children: [
+        {
           title: 'Reactivity',
           children: [
             '/guide/reactivity',
@@ -88,7 +92,8 @@ const sidebar = {
       children: [
         '/guide/single-file-component',
         '/guide/testing',
-        '/guide/typescript-support'
+        '/guide/typescript-support',
+        '/guide/mobile'
       ]
     },
     {
@@ -172,21 +177,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'
-    ]
-  }]
+  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'
+      ]
+    }
+  ]
 }
 
 module.exports = {
@@ -196,21 +203,26 @@ module.exports = {
     [
       'link',
       {
-        href: 'https://fonts.googleapis.com/css?family=Inter:300,400,500,600|Open+Sans:400,600;display=swap',
+        href:
+          'https://fonts.googleapis.com/css?family=Inter:300,400,500,600|Open+Sans:400,600;display=swap',
         rel: 'stylesheet'
       }
     ],
     [
       'link',
       {
-        href: 'https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css',
+        href:
+          'https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css',
         rel: 'stylesheet'
       }
     ],
-    ['link', {
-      rel: 'icon',
-      href: '/logo.png'
-    }],
+    [
+      'link',
+      {
+        rel: 'icon',
+        href: '/logo.png'
+      }
+    ],
     [
       'script',
       {
@@ -227,10 +239,12 @@ module.exports = {
   ],
   themeConfig: {
     logo: '/logo.png',
-    nav: [{
+    nav: [
+      {
         text: 'Docs',
         ariaLabel: 'Documentation Menu',
-        items: [{
+        items: [
+          {
             text: 'Guide',
             link: '/guide/introduction'
           },
@@ -254,10 +268,12 @@ module.exports = {
       },
       {
         text: 'Ecosystem',
-        items: [{
+        items: [
+          {
             text: 'Community',
             ariaLabel: 'Community Menu',
-            items: [{
+            items: [
+              {
                 text: 'Team',
                 link: '/community/team/'
               },
@@ -277,7 +293,8 @@ module.exports = {
           },
           {
             text: 'Official Projects',
-            items: [{
+            items: [
+              {
                 text: 'Vue Router',
                 link: 'https://router.vuejs.org/'
               },
@@ -308,7 +325,8 @@ module.exports = {
       {
         text: 'Support Vue',
         link: '/support-vuejs/',
-        items: [{
+        items: [
+          {
             text: 'One-time Donations',
             link: '/support-vuejs/#one-time-donations'
           },
diff --git a/src/guide/mobile.md b/src/guide/mobile.md
new file mode 100644
index 0000000000..b9b1188c16
--- /dev/null
+++ b/src/guide/mobile.md
@@ -0,0 +1,23 @@
+# Mobile
+
+## Introduction
+
+While Vue.js does not natively support mobile app development, there are a number of solutions for creating native iOS and Android apps with Vue.js.
+
+## Hybrid-App Development
+
+### Capacitor
+
+[Capacitor](https://capacitorjs.com/) is a project from the [Ionic Team](https://ionic.io/) that allows developers to build native iOS, Android, and PWA apps with a single codebase by providing an API that can be run across multiple platforms.
+
+**Resources**
+
+- [Capacitor + Vue.js Guide](https://capacitorjs.com/solution/vue)
+
+### NativeScript
+
+[NativeScript](https://www.nativescript.org) powers cross-platform (truly native) mobile apps, using the web skills you already know. Combined they are a fantastic pair for developing immersive mobile experiences.
+
+**Resources**
+
+- [NativeScript + Vue.js Guide](https://nativescript.org/vue/)