Improve Components documentation

Author: adrienbaron

docs-source/book/SUMMARY.md

@@ -17,10 +17,11 @@
 * [List Rendering](essential/list.md)
 * [Event Handling](essential/events.md)
 * [Form Input Bindings](essential/forms.md)
-* [Components](essential/components.md)
-    * [What are Components?](essential/components.md#what-are-components)
+* [Composing with Components](essential/components.md)
     * [Using Components](essential/components.md#using-components)
     * [Props](essential/components.md#props)
+    * [Non-Prop Attributes](essential/components.md#non-prop-attributes)
+    * [Custom Events](essential/components.md#custom-events)
     * [Content Distribution with Slots](essential/components.md#content-distribution)
     * [Dynamic Components](essential/components.md#dynamic-components)
 * [Dependency Injection](essential/dependency-injection.md)

docs-source/book/essential/components.md

@@ -1,18 +1,18 @@
-# Components
+# Composing with Components
 
 !INCLUDE "../dependencies.md"
 
 *This page comes from the [official Vue.js documentation](https://vuejs.org/v2/guide/components.html) and has been adapted for Vue GWT.*
 
-## What are Components? {#what-are-components}
+## Using Components {#using-components}
+
+### What are Components? {#what-are-components}
 
 Components are one of the most powerful features of Vue.
 They help you extend basic HTML elements to encapsulate reusable code.
 At a high level, components are custom elements that Vue's compiler attaches behavior to.
 In some cases, they may also appear as a native HTML element extended with the special `is` attribute.
 
-## Using Components {#using-components}
-
 ### Registration
 
 We already saw how to define a Component in Vue GWT.
@@ -173,8 +173,10 @@ public class SharedDataModelComponent extends VueComponent {
 We then instantiate 3 of those Components:
 
 {% raw %}
-<div class="example-container" data-name="simpleLinkComponent">
-    <span id="simpleLinkComponent"></span>
+<div class="example-container" data-name="sharedDataModelComponent">
+    <span id="sharedDataModelComponent1"></span>
+    <span id="sharedDataModelComponent2"></span>
+    <span id="sharedDataModelComponent3"></span>
 </div>
 {% endraw %}
 
@@ -290,7 +292,7 @@ There are usually two cases where it's tempting to mutate a prop:
 
 The proper answer to these use cases are:
 
-1. Define a local data property that uses the prop's initial value as its initial value:
+<span>1.</span> Define a local data property that uses the prop's initial value as its initial value:
 
 ```java
 @Component
@@ -308,7 +310,7 @@ public class MyComponent extends VueComponent implements HasCreated {
 }
 ```
 
-2. Define a computed property that is computed from the prop's value:
+<span>2.</span> Define a computed property that is computed from the prop's value:
 
 ```java
 @Component
@@ -363,7 +365,7 @@ public class PropDefaultValueComponent extends VueComponent {
 
 Beware that in this method you don't have access to your Instance (`this`).
 
-## Non-Prop Attributes
+## Non-Prop Attributes {#non-prop-attributes}
 
 A non-prop attribute is an attribute that is passed to a component, but does not have a corresponding prop defined.
 
@@ -405,7 +407,7 @@ For most attributes, the value provided to the component will replace the value
 So for example, passing `type="large"` will replace `type="date"` and probably break it!
 Fortunately, the `class` and `style` attributes are a little smarter, so both values are merged, making the final value: `form-control date-picker-theme-dark`.
 
-## Custom Events
+## Custom Events {#custom-events}
 
 We have learned that the parent can pass data down to the child using props, but how do we communicate back to the parent when something happens?
 This is where Vue's custom event system comes in.

docs-source/book/introduction/README.md

@@ -513,4 +513,7 @@ public class RootGwtApp implements EntryPoint {
 }
 ```
 
-To understand more in depth how the Observation works, and avoid pitfalls keep reading **[the Vue Instance](../essential/the-vue-instance.md)**.
+It is **strongly recommended** to read the whole [Essentials section](../essential/the-vue-instance.md) even if skimming through it.
+It will teach you everything you need to know to make full use of the framework.
+
+You can then check some specific topics like [Unit Testing](../tooling/unit-testing.md), [Custom Element (Web Component) support](../advanced/custom-elements.md) or [Routing](../scaling-up/routing.md).