docs: add what is nuxt section (#725)

docs/components/atoms/Gem.vue

@@ -1,10 +1,6 @@
 <template>
   <canvas class="webgl" />
 </template>
-.webgl {
-  outline: none;
-}
-</style>
 
 <script>
 import * as THREE from 'three'
@@ -119,3 +115,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.webgl {
+  outline: none;
+}
+</style></style>

docs/content/1.getting-started/1.introduction.md

@@ -1,5 +1,12 @@
 # Introduction
 
+Getting started with Nuxt 3 is straightforward.
+
+::alert{type=warning icon=🚧}
+Nuxt 3 is currently in beta, keep in mind that **it is not yet production ready**.<br>
+Thank you in advance for your understanding 💛
+::
+
 ## What is Nuxt?
 
 If this is the first time you're learning about Nuxt or you want to get more familiar with Nuxt 3, we recommend you begin by reading the [Concepts section](/concepts).
@@ -14,7 +21,7 @@ Before getting started, please make sure you have installed the recommended setu
 
 <sup>*</sup> If you already have Node.js installed, check with `node --version` that you are using `v14` or `v16`.
 
-## Nuxt 3 or Bridge
+## Nuxt 3 or Bridge?
 
 Next, decide whether to start from scratch or upgrade an existing Nuxt 2 project.
 

docs/content/1.getting-started/3.bridge.md

@@ -67,16 +67,41 @@ export default defineNuxtConfig({
 
 ### Avoid CommonJS syntax
 
-Nuxt 3 natively supports TypeScript and ECMAScript modules.
+Nuxt 3 natively supports TypeScript and ECMAScript Modules.
 
-In every file make sure to:
+#### Update the imports
-- Change `require('lib')` to `import lib from 'lib'` or `await import('lib').then(e => e.default || e)`
+
-- Change `module.exports` to `export default` or `export const`
+::code-group
-- Avoid usage of `__dirname` and `__filename` as much as possible
+```js [Before]
+const lib = require('lib')
+```
+```js [After]
+import lib from 'lib'
+// or using code-splitting
+const lib = await import('lib').then(e => e.default || e)
+```
+::
+
+#### Update the exports
+
+::code-group
+```js [Before]
+module.exports = ...
+```
+```js [After]
+export default ...
+// or using named export
+export const hello = ...
+```
+::
+
+#### Avoid using specific CJS syntax
+
+Avoid the usage of `__dirname` and `__filename` as much as possible.
 
 ### Remove incompatible and obsolete modules
 
-- Remove `@nuxt/content` (1.x) a v2 rewrite for nuxt 3 support is planned, or you may also use docus
+- Remove `@nuxt/content` (1.x). A rewrite for nuxt 3 is planned (2.x)
 - Remove `nuxt-vite`: Bridge enables same functionality
 - Remove `@nuxtjs/typescript-build`: Bridge enables same functionality
 - Remove `@nuxtjs/typescript-runtime` and `nuxt-ts`: Nuxt 2 has built-in runtime support

docs/content/1.getting-started/5.migration.md

@@ -72,7 +72,7 @@ If you have a fixture or example in your module, add `@nuxt/bridge` package to i
 
 ### Avoid CommonJS syntax
 
-Nuxt natively supports TypeScript and ECMAScript Modules.
+Nuxt 3 natively supports TypeScript and ECMAScript Modules.
 
 #### Update the imports
 
@@ -127,7 +127,6 @@ export default {}
 ```
 ::
 
-
 ### Avoid runtime modules
 
 With Nuxt 3, Nuxt is now a build-time-only dependency, which means that modules shouldn't attempt to hook into the Nuxt runtime.

docs/content/2.concepts/1.introduction.md

@@ -1,2 +1,44 @@
-# An introduction to Nuxt
+# What is Nuxt?
 
+Nuxt goal is to make web development intuitive and performant with a great developer experience in mind.
+
+## Why Nuxt?
+
+To understand what is Nuxt, we need to understand what we need to create a modern application:
+::list{type=success}
+- A JavaScript framework to bring reactivity and web components, we chose [Vue.js](https://v3.vuejs.org).
+- A bundler to support hot module replacement in development and bundle your code for production, we support both [Webpack 5](https://webpack.js.org/) and [Vite](https://vitejs.dev/).
+- A transpiler in order to write the latest JavaScript syntax while supporting legacy browsers, we use [esbuild](https://esbuild.github.io) for that.
+- A server for serving your application in development, but also to support [server-side rendering](https://v3.vuejs.org/guide/ssr/introduction.html#what-is-server-side-rendering-ssr) or API routes, Nuxt uses [h3](https://github.com/unjs/h3) for deployment versatility and unmatched performance.
+- A routing library to handle client-side navigation, we chose [vue-router](https://next.router.vuejs.org).
+::
+
+This is only the tip of the iceberg, imagine having to setup all of this for your project, make it work, and then, maintain it over time. We have been doing this since October 2016, tuning all the configuration to provide the best optimization and performance for any Vue applications.
+
+Nuxt takes care of all of this so you can focus on what matters: **creating your web application**.
+
+On top of this setup, Nuxt provides a [directory structure](/docs/directory-structure/app) to follow, focused on specific features to keep your focus on creating, not configuring.
+
+## How does it work?
+
+Nuxt is composed of different [core packages](https://github.com/nuxt/framework/tree/main/packages):
+::list{type=info}
+- Core Engine: [nuxt3](https://github.com/nuxt/framework/tree/main/packages/nuxt3)
+- Bundlers: [@nuxt/vite-builder](https://github.com/nuxt/framework/tree/main/packages/vite) and [@nuxt/webpack-builder](https://github.com/nuxt/framework/tree/main/packages/webpack)
+- Command line interface: [nuxi](https://github.com/nuxt/framework/tree/main/packages/nuxi)
+- Server engine: [@nuxt/nitro](https://github.com/nuxt/framework/tree/main/packages/nitro)
+- Development kit: [@nuxt/kit](https://github.com/nuxt/framework/tree/main/packages/kit)
+- Nuxt 2 Bridge: [@nuxt/bridge](https://github.com/nuxt/framework/tree/main/packages/bridge)
+::
+
+We recommend to read each concept to have a full vision of Nuxt capabilities and scope of each package.
+
+## Are you Nuxt?
+
+Nuxt is the backbone of your Vue.js project, giving structure to build your project with confidence while keeping flexibility.
+
+Extendable with a strong module ecosystem and hooks engine, it makes it easy to connect your REST or GraphQL endpoints, favourites CMS, CSS frameworks and more. PWA and AMP support is only a module away from your Nuxt project.
+
+::alert{type=info icon=👍}
+Ready to try? Head over the [Installation section](/getting-started/installation).
+::

docs/content/3.docs/2.directory-structure/12.server.md

@@ -8,7 +8,7 @@ head.title: Server directory
 
 The server directory is used to create any backend logic for your Nuxt application. It supports HMR and powerful features.
 
-The `server/` directory contains API endpoints and server middleware for your project. ([learn more](/server/api)).
+The `server/` directory contains API endpoints and server middleware for your project.
 
 ## API Routes
 

docs/content/3.docs/2.directory-structure/16.package.md

@@ -6,4 +6,4 @@ head.title: Package file
 
 # Package file
 
-The `package.json` file contains all the dependencies and scripts for your application ([learn more](/docs/directory-structure/package-json)).
+The `package.json` file contains all the dependencies and scripts for your application.

docs/content/3.docs/2.directory-structure/3.assets.md

@@ -11,6 +11,6 @@ The `assets/` directory is used to add all the website assets that will be proce
 The directory usually contain such files:
 - Stylesheets (CSS, SASS, etc.)
 - Fonts
-- Images that won't be served from the [public/](/docs/structure/public) directory.
+- Images that won't be served from the [`public/`](/docs/directory-structure/public) directory.
 
-If you want to serve assets from the server, we recommend to take a look at the [public/](/docs/structure/public) directory.
+If you want to serve assets from the server, we recommend to take a look at the [`public/`](/docs/directory-structure/public) directory.

docs/nuxt.config.ts

@@ -27,12 +27,12 @@ export default withDocus({
       {
         hid: 'og:image',
         property: 'og:image',
-        content: 'https://nuxtjs.org/preview.png'
+        content: 'https://res.cloudinary.com/nuxt/image/upload/v1633987983/nuxt3-preview_rhh50t.png'
       },
       {
         hid: 'og:image:secure_url',
         property: 'og:image:secure_url',
-        content: 'https://nuxtjs.org/preview.png'
+        content: 'https://res.cloudinary.com/nuxt/image/upload/v1633987983/nuxt3-preview_rhh50t.png'
       },
       {
         hid: 'og:image:alt',
@@ -42,7 +42,12 @@ export default withDocus({
       {
         hid: 'twitter:image',
         name: 'twitter:image',
-        content: 'https://nuxtjs.org/preview.png'
+        content: 'https://res.cloudinary.com/nuxt/image/upload/v1633987983/nuxt3-preview_rhh50t.png'
+      },
+      {
+        hid: 'og:video',
+        name: 'og:video',
+        content: 'https://res.cloudinary.com/nuxt/video/upload/v1633987946/nuxt3-beta-preview_rwemvt.mp4'
       }
     ],
     bodyAttrs: {