[REFACTOR] update guides

Author: Nils Henning

docs/guides/essential/07_partials_and_custom_components.md

@@ -223,38 +223,6 @@ Using ur custom component is as easy as calling the name we defined in our regis
 
 When you start your application locally now, the missing list bullet points should be the only visible change. We will take care of styling soon - but first, let's reuse our newly introduced component!
 
-----
-# Refactor from here
-----
-
-## Reusing the custom component
-How about displaying three random persons from the database on the person show page, each within a card? It's as simple as below:
-
-```ruby
-class Demo::Pages::Persons::Show < Matestack::Ui::Page
-
-  def prepare
-    @other_persons = Person.where.not(id: @person.id).order("RANDOM()").limit(3)
-  end
-
-  def response
-    # ...
-    other_persons
-  end
-
-  def other_persons
-    heading size: 3, text: 'Three other persons:'
-    @other_persons.each do |person|
-      person_teaser person: person
-    end
-  end
-
-  # ...
-end
-```
-
-We query the database for three random records in the `prepare` method, add a partial for better composability and then loop through the records, handing each record as input to our custom card component!
-
 ## Using HAML in custom components
 
 If you need more fine-grained control of your view layer or want to reuse some old HAML files, you can also create custom components like this:

docs/guides/essential/09_custom_vue_js_components.md

@@ -23,6 +23,7 @@ Okay, let's create our custom vue.js component. First we create a component in `
 
 ```ruby
 class Components::Persons::Activity < Matestack::Ui::VueJsComponent
+  vue_js_component_name 'person-activity'
 
   def response
     div do
@@ -44,10 +45,12 @@ end
 
 Our vue.js component renders a div containing a paragraph and a list. The paragraph contains some text and a button. We set a `v-on:click` event handler like you would normally do in vue.js with its shorter version `@click`. This means the button will call the `addActivity` method from its corresponding vue.js component. In the list below we assume that our javascript vue.js component has an `activities` array. We loop over it, again using vue.js directives and display each activity with a button labelled 'Remove' which calls `deleteActivity(index)` if clicked.
 
-Like stated above, a `Matestack::Ui::VueJsComponent` requires a javascript counterpart. Let's create it aside our ruby component in `app/matestack/components/persons/activity.js`
+Like stated above, a `Matestack::Ui::VueJsComponent` requires a javascript counterpart. 
+Inside we define a vue.js component and give it a name. The name needs to equal the name we defined in our ruby component at the top with `vue_js_component_name`. This settings is necessary in order to connect the javascript component with our ruby component. 
+Let's create it aside our ruby component in `app/matestack/components/persons/activity.js`
 
 ```javascript
-MatestackUiCore.Vue.component('custom-person-activity', {
+MatestackUiCore.Vue.component('person-activity', {
   mixins: [MatestackUiCore.componentMixin],
   data() {
     return {
@@ -82,7 +85,7 @@ After creating the new component, we still need to register it, both in the `/ap
 module Components::Registry
 
   Matestack::Ui::Core::Component::Registry.register_components(
-    person_card: Components::Persons::Teaser,
+    person_teaser: Components::Persons::Teaser,
     person_disclaimer: Components::Persons::Disclaimer,
     person_activity: Components::Persons::Activity
   )