docs (#386): add mobile section (#441)

Author: bencodezen

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'
       ]
     },
     {
@@ -177,21 +182,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 = {
@@ -201,21 +208,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',
       {
@@ -232,10 +244,12 @@ module.exports = {
   ],
   themeConfig: {
     logo: '/logo.png',
-    nav: [{
+    nav: [
+      {
         text: 'Docs',
         ariaLabel: 'Documentation Menu',
-        items: [{
+        items: [
+          {
             text: 'Guide',
             link: '/guide/introduction'
           },
@@ -263,10 +277,12 @@ module.exports = {
       },
       {
         text: 'Ecosystem',
-        items: [{
+        items: [
+          {
             text: 'Community',
             ariaLabel: 'Community Menu',
-            items: [{
+            items: [
+              {
                 text: 'Team',
                 link: '/community/team/'
               },
@@ -286,7 +302,8 @@ module.exports = {
           },
           {
             text: 'Official Projects',
-            items: [{
+            items: [
+              {
                 text: 'Vue Router',
                 link: 'https://next.router.vuejs.org/'
               },
@@ -317,7 +334,8 @@ module.exports = {
       {
         text: 'Support Vue',
         link: '/support-vuejs/',
-        items: [{
+        items: [
+          {
             text: 'One-time Donations',
             link: '/support-vuejs/#one-time-donations'
           },

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/)