From e2f5a3c9b085359b5c309ae3a20fe250400958af Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Tue, 8 Jun 2021 22:44:30 +0100
Subject: [PATCH] docs: app (#186)

Co-authored-by: Pooya Parsa <pyapar@gmail.com>
---
 docs/content/2.app/1.app.md           | 15 ++++++++++
 docs/content/2.app/2.pages.md         | 22 +++++++++++++++
 docs/content/2.app/3.data-fetching.md | 40 +++++++++++++++++++++++++++
 docs/content/2.app/5.plugins.md       |  2 ++
 4 files changed, 79 insertions(+)

diff --git a/docs/content/2.app/1.app.md b/docs/content/2.app/1.app.md
index 8ec4142355..d7c0e6faf0 100644
--- a/docs/content/2.app/1.app.md
+++ b/docs/content/2.app/1.app.md
@@ -1 +1,16 @@
 # App.vue
+
+The new `app.vue` file, is the main component in your Nuxt3 applications.
+
+If you would like to customize default layout of website, create `app.vue` in your project directory. Nuxt will automatically detect it and load it as the parent of all other pages within your application.
+
+
+**Note:** Don't forget to use `<NuxtPage>` component somewhere inside `app.vue`.
+
+```vue [app.vue]
+<template>
+  <div>
+    <NuxtPage />
+  </div>
+</template>
+```
diff --git a/docs/content/2.app/2.pages.md b/docs/content/2.app/2.pages.md
index 28064c05f3..25ccf48ace 100644
--- a/docs/content/2.app/2.pages.md
+++ b/docs/content/2.app/2.pages.md
@@ -1 +1,23 @@
 # Pages
+
+Nuxt will automatically integrate [Vue Router](https://next.router.vuejs.org/) and map `pages/` directory into the routes of your application.
+
+If you place anything within square brackets, it will be turned into a [dynamic route](https://next.router.vuejs.org/guide/essentials/dynamic-matching.html) parameter. You can mix and match multiple parameters and even non-dynamic text within a file name or directory.
+
+## Example
+
+```bash
+-| pages/
+---| index.vue
+---| users-[group]/
+-----| [userid].vue
+```
+
+Given the example above, you can access group/userid within your component via the `$route` object:
+
+```vue
+<template>
+  {{ $route.params.group }}
+  {{ $route.params.id }}
+</template>
+```
diff --git a/docs/content/2.app/3.data-fetching.md b/docs/content/2.app/3.data-fetching.md
index 5c23e59a34..622507a96a 100644
--- a/docs/content/2.app/3.data-fetching.md
+++ b/docs/content/2.app/3.data-fetching.md
@@ -1 +1,41 @@
 # Data Fetching
+
+Nuxt provides `asyncData` to handle data fetching within you application.
+
+## `asyncData`
+
+Within your pages and components you can use `asyncData` to get access to data that resolves asynchronously. (This helper only works within a component defined with `defineNuxtComponent`).
+
+### Usage
+
+```js
+asyncData(key: string, fn: () => Object, options?: { defer: boolean, server: boolean })
+```
+
+* **key**: a unique key to ensure that data fetching can be properly de-duplicated across requests
+* **fn** an asynchronous function that must return an object.
+* **options**:
+  - _defer_: whether to load the route before resolving the async function (defaults to `false`)
+  - _server_: whether the fetch the data on server-side (defaults to `true`)
+
+Under the hood, `defer: false` uses `<Suspense>` to block the loading of the route before the data has been fetched. Consider using `defer: true` and implementing a loading state instead for a snappier user experience.
+
+### Example
+
+```vue
+<template>
+  Page visits: {{ data.count }}
+</template>
+
+<script>
+import { asyncData, defineNuxtComponent } from '@nuxt/app'
+
+export default defineNuxtComponent({
+  setup () {
+    const { data } = asyncData('time', () => $fetch('/api/count'))
+    return { data }
+  }
+})
+</script>
+```
+
diff --git a/docs/content/2.app/5.plugins.md b/docs/content/2.app/5.plugins.md
index 779d515c6f..1ce38bc781 100644
--- a/docs/content/2.app/5.plugins.md
+++ b/docs/content/2.app/5.plugins.md
@@ -1 +1,3 @@
 # Plugins
+
+Nuxt will automatically read the files in your `plugins` directory and load them. You can use `.server` or `.client` in the file name to load a plugin just on server- or client-side.