docs: improvements (#1858)

Co-authored-by: Daniel Roe <daniel@roe.dev>
Co-authored-by: pooya parsa <pyapar@gmail.com>

docs/content/3.docs/1.usage/1.data-fetching.md

@@ -9,7 +9,11 @@ Within your pages, components and plugins you can use `useAsyncData` to get acce
 ### Usage
 
 ```js
-useAsyncData(key: string, fn: () => Object, options?: { defer: boolean, server: boolean })
+useAsyncData(
+  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

docs/content/3.docs/1.usage/2.state.md

@@ -11,7 +11,7 @@ You can think of it as an SSR-friendly ref in that its value will be hydrated (p
 ### Usage
 
 ```js
-useState<T>(key: string, init?: (()=>T)): Ref<T>
+useState<T>(key: string, init?: () => T): Ref<T>
 ```
 
 * **key**: a unique key ensuring that data fetching can be properly de-duplicated across requests

docs/content/3.docs/2.directory-structure/10.plugins.md

@@ -57,14 +57,14 @@ yarn add --dev vue-gtag-next
 Then create a plugin file `plugins/vue-gtag.client.js`.
 
 ```ts
-import { defineNuxtPlugin } from "#app";
+import { defineNuxtPlugin } from '#app'
-import VueGtag from "vue-gtag-next";
+import VueGtag from 'vue-gtag-next'
 
 export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.use(VueGtag, {
     property: {
-      id: "GA_MEASUREMENT_ID"
+      id: 'GA_MEASUREMENT_ID'
     }
-  });
+  })
-});
+})
 ```

docs/content/3.docs/2.directory-structure/17.tsconfig.md

@@ -4,6 +4,8 @@ title: tsconfig.json
 head.title: TypeScript configuration file
 ---
 
+# TypeScript configuration file
+
 Nuxt [automatically generates](/concepts/typescript) a `.nuxt/tsconfig.json` file with the resolved aliases you are using in your Nuxt project, as well as with other sensible defaults. You can benefit from this by creating a `tsconfig.json` in the root of your project with the following content:
 
 ```json

docs/content/3.docs/2.directory-structure/4.components.md

@@ -44,7 +44,7 @@ The component name will be based on its own path directory and filename, with du
 ```
 
 ::alert
-For clarity, it is recommend that the component file name matches its name. (So, in the example above, you could rename `Button.vue` to be `BaseFooButton.vue`.)
+For clarity, it is recommended that the component file name matches its name. (So, in the example above, you could rename `Button.vue` to be `BaseFooButton.vue`.)
 ::
 
 ## Dynamic Imports
@@ -107,7 +107,7 @@ Then in `awesome-ui/nuxt.js` you can use the `components:dirs` hook:
 
 ```js
 import { join } from 'pathe'
-import { defineNuxtModule } from "@nuxt/kit"
+import { defineNuxtModule } from '@nuxt/kit'
 
 export default defineNuxtModule({
   hooks: {

docs/content/3.docs/2.directory-structure/7.node_modules.md

@@ -5,3 +5,5 @@ head.title: Node modules directory
 ---
 
 # Node modules directory
+
+The `node_modules` directory is created by the package manager ([`npm`](https://docs.npmjs.com/cli/v7/commands/npm) or [`yarn`](https://yarnpkg.com/)) to store the dependencies of your project.

docs/content/3.docs/2.directory-structure/9.pages.md

@@ -4,10 +4,12 @@ title: 'pages'
 head.title: Pages directory
 ---
 
-The `pages/` directory is optional, meaning that if you only use [app.vue](/docs/directory-structure/app), vue-router won't be included, reducing your application bundle size.
-
 # Pages directory
 
+::alert{type="info"}
+The `pages/` directory is optional, meaning that if you only use [app.vue](/docs/directory-structure/app), `vue-router` won't be included, reducing your application bundle size.
+::
+
 Nuxt will automatically integrate [Vue Router](https://next.router.vuejs.org/) and map `pages/` directory into the routes of your application.
 
 ::alert{type=warning}