diff --git a/docs/.gitignore b/docs/.gitignore
index b4a500fb84f..988de6ce14a 100644
--- a/docs/.gitignore
+++ b/docs/.gitignore
@@ -1,2 +1,3 @@
schema
**/*.configuration/nuxt.config.md
+**/*.configuration/nuxt-config.md
diff --git a/docs/content/1.getting-started/3.views.md b/docs/content/1.getting-started/3.views.md
index 53bf6eb1386..2673172ca07 100644
--- a/docs/content/1.getting-started/3.views.md
+++ b/docs/content/1.getting-started/3.views.md
@@ -1,13 +1,130 @@
# Views
-::NeedContribution
+Nuxt provides several component layers to implement the user interface of your application.
+
+## `app.vue`
+
+
+
+By default, Nuxt will treat this file as the **entrypoint** and render its content for every route of the application.
+
+```vue [app.vue]
+
+
+
Welcome to the homepage
+
+
+```
+
+::alert
+If you are familiar with Vue, you might wonder where `main.js` is (the file is that normally creates a Vue app). Nuxt does this behind the scene.
+::
+
+## Components
+
+
+
+Most components are reusable pieces of the user interface, like buttons and menus. In Nuxt, you can create these components in the `components/` directory, and they will be automatically available across your application without having to explicitly import them.
+
+::code-group
+
+```vue [App.vue]
+
+
+
Welcome to the homepage
+
+ This is an auto-imported component.
+
+
+
+```
+
+```vue [components/AppAlert.vue]
+
+
+
+
+
+```
+
+::
+
+## Pages
+
+
+
+Pages represent views use for each specific route pattern. Every file in the `pages/` directory represents a different route displaying its content.
+
+To use pages, create `pages/index.vue` file and add `` component to the `app.vue` (or remove `app.vue` for default entry). You can now create more pages and their corresponding routes by adding new files in the `pages/` directory.
+
+::code-group
+
+```vue [pages/index.vue]
+
+
+
Welcome to the homepage
+
+ This is an auto-imported component
+
+
+
+```
+
+```vue [pages/about.vue]
+
+
+
This page will be displayed at the /about route.
+
+
+```
+
::
-::ReadMore{link="/guide/directory-structure/components"}
+::alert
+You will learn more about pages in the [Routing section](/getting-started/routing)
::
-::ReadMore{link="/guide/directory-structure/pages"}
+## Layouts
+
+
+
+Layouts are wrappers around pages that contain a common User Interface for several pages, such as a header and footer display. Layouts are Vue files using `` components to display the **page** content. The `layout/default.vue` file will be used by default. Custom layouts can be set as part of your page metadata.
+
+::alert
+If you only have a single layout in your application, we recommend using app.vue with the [`` component](/api/components/nuxt-page) instead.
::
-::ReadMore{link="/guide/directory-structure/layouts"}
+::code-group
+
+```vue [layouts/default.vue]
+
+
+
+
+
+
+
+```
+
+```vue [pages/index.vue]
+
+
+
Welcome to the homepage
+
+ This is an auto-imported component
+
+
+
+```
+
+```vue [pages/about.vue]
+
+
+
This page will be displayed at the /about route.
+
+
+```
+
::
+
+If you want to create more layouts and learn how to use them in your pages, find more information in the [Layouts section](/guide/directory-structure/layouts).
diff --git a/docs/static/img/getting-started/views/app.svg b/docs/static/img/getting-started/views/app.svg
new file mode 100644
index 00000000000..9732919e3e2
--- /dev/null
+++ b/docs/static/img/getting-started/views/app.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/docs/static/img/getting-started/views/components.svg b/docs/static/img/getting-started/views/components.svg
new file mode 100644
index 00000000000..7b14322db1f
--- /dev/null
+++ b/docs/static/img/getting-started/views/components.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/docs/static/img/getting-started/views/layouts.svg b/docs/static/img/getting-started/views/layouts.svg
new file mode 100644
index 00000000000..afe8f72a66c
--- /dev/null
+++ b/docs/static/img/getting-started/views/layouts.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/docs/static/img/getting-started/views/pages.svg b/docs/static/img/getting-started/views/pages.svg
new file mode 100644
index 00000000000..14e5d34fa29
--- /dev/null
+++ b/docs/static/img/getting-started/views/pages.svg
@@ -0,0 +1 @@
+
\ No newline at end of file