Rename Vuejs and vue references in doc/ to Vue.js

Author: pascalwengerter

docs/api/000-base/00-app.md

@@ -7,8 +7,8 @@ An app is a special kind of `Matestack::Ui::VueJsComponent`. Matestack will
 therefore wrap the UI defined in the `response` method with some markup enabling
 dynamic UI behavior and CSS styling.
 
-The app ships a `Vuex store` and `Vue.js event hub`, which are used by core vuejs
-components and can optionally be used by custom vuejs components in order to
+The app ships a `Vuex store` and `Vue.js event hub`, which are used by core Vue.js
+components and can optionally be used by custom Vue.js components in order to
 trigger events, manage client side date and communicate between components.
 
 ## An App can wrap pages with a layout

docs/api/000-base/30-vue_js_component.md

@@ -1,18 +1,18 @@
-# VueJs Component
+# Vue.js Component
 
 In order to equip a Ruby component with some JavaScript, we associate
-the Ruby component with a VueJs JavaScript component. The Ruby component therefore needs to inherit
+the Ruby component with a Vue.js JavaScript component. The Ruby component therefore needs to inherit
 from `Matestack::Ui::VueJsComponent`. Matestack will then render a HTML component
 tag with some special attributes and props around the response defined in the
-Ruby component. The VueJs JavaScript component (defined in a separate JavaScript file and
+Ruby component. The Vue.js JavaScript component (defined in a separate JavaScript file and
 managed via Sprockets or Webpacker) will treat the response of the Ruby
 component as its template.
 
 ## Structure, files and registry
 
-A VueJs component is defined by two files. A Ruby file and a JavaScript file:
+A Vue.js component is defined by two files. A Ruby file and a JavaScript file:
 
-### VueJs Ruby component
+### Vue.js Ruby component
 
 Within the Ruby file, the Ruby class inherits from `Matestack::Ui::VueJsComponent`:
 
@@ -48,9 +48,9 @@ module Components::Registry
   )
 end
 ```
-### VueJs JavaScript component
+### Vue.js JavaScript component
 
-The VueJs JavaScript component is defined in a separate JavaScript file:
+The Vue.js JavaScript component is defined in a separate JavaScript file:
 
 `app/matestack/components/some_component.js`
 
@@ -73,7 +73,7 @@ it right next to the Ruby component file.
 
 *Important*
 
-The VueJs JavaScript file needs to be imported by some kind of JavaScript package
+The Vue.js JavaScript file needs to be imported by some kind of JavaScript package
 manager. This could be `Sprockets` or `Webpacker`
 
 For **Sprockets** it would be something like:
@@ -112,29 +112,29 @@ If setup correctly, matestack will render the component to:
 </component>
 ```
 
-As you can see, the component tag is referencing the VueJs JavaScript component via `is`
+As you can see, the component tag is referencing the Vue.js JavaScript component via `is`
 and tells the JavaScript component that it should use the inner html (coming from the `response` method)
 as the `inline-template` of the component.
 
 `{{ foo }}` will be evaluated to "bar" as soon as Vue.js has booted and mounted
 the component in the browser.
 
-Matestack will inject JSON objects into the VueJs JavaScript component through
+Matestack will inject JSON objects into the Vue.js JavaScript component through
 the `component-config` and `params` props if either component config or params are
 available. This data is injected once on initial serverside rendering of the component's
-markup. See below, how you can pass in data to the VueJs JavaScript component.
+markup. See below, how you can pass in data to the Vue.js JavaScript component.
 
-## VueJs Ruby component API
+## Vue.js Ruby component API
 
 ### Same as component
 
-The basic VueJs Ruby component API is the same as described within the
+The basic Vue.js Ruby component API is the same as described within the
 [component API documenation](/docs/api/000-base/20-component.md). The options below extend
 this API.
 
-### Referencing the VueJs JavaScript component
+### Referencing the Vue.js JavaScript component
 
-As seen above, the VueJs JavaScript component name has to be referenced in the VueJs
+As seen above, the Vue.js JavaScript component name has to be referenced in the Vue.js
 Ruby component using the `vue_js_component_name` class method
 
 `app/matestack/components/some_component.rb`
@@ -148,7 +148,7 @@ class SomeComponent < Matestack::Ui::VueJsComponent
 end
 ```
 
-### Passing data to the VueJs JavaScript component
+### Passing data to the Vue.js JavaScript component
 
 Like seen above, matestack renders a `component-config` prop as an attribute of
 the component tag. In order to fill in some date there, you should use the `setup`
@@ -174,9 +174,9 @@ This data is then available as:
 this.componentConfig["some_serverside_data"]
 ```
 
-within the VueJs JavaScript component.
+within the Vue.js JavaScript component.
 
-## VueJs JavaScript component API
+## Vue.js JavaScript component API
 
 ### Component mixin
 
@@ -279,6 +279,6 @@ As we're pretty much implementing pure Vue.js components, you can refer to the
 [Vue.js guides](https://vuejs.org/v2/guide/) in order to learn more about Vue.js component
 usage
 
-## VueJs JavaScript component scope
+## Vue.js JavaScript component scope
 
 TODO

docs/api/000-base/40-isolated_component.md

@@ -155,7 +155,7 @@ With `init_on` you can specify events on which the isolate components gets initi
 
 #### public_options
 
-You can pass data as a hash to your custom isolate component with the `public_options` option. This data is inside the isolate component accessible via a hash with indifferent access, for example `public_options[:item_id]`. All data contained in the `public_options` will be passed as json to the corresponding vue component, which means this data is visible on the client side as it is rendered in the vue component config. So be careful what data you pass into `public_options`!
+You can pass data as a hash to your custom isolate component with the `public_options` option. This data is inside the isolate component accessible via a hash with indifferent access, for example `public_options[:item_id]`. All data contained in the `public_options` will be passed as json to the corresponding Vue.js component, which means this data is visible on the client side as it is rendered in the Vue.js component config. So be careful what data you pass into `public_options`!
 
 Due to the isolation of the component the data needs to be stored on the client side as to encapsulate the component from the rest of the UI.
 For example: You want to render a collection of models in single components which should be able to rerender asynchronously without rerendering the whole UI. Since we do not rerender the whole UI there is no way the component can know which of the models it should rerender. Therefore passing for example the id in the public_options hash gives you the possibility to access the id in an async request and fetch the model again for rerendering. See below for examples.
@@ -346,7 +346,7 @@ With `init_on: 'init_time'` you can specify an event on which the isolated compo
 
 ### Example 6 - Use custom data in isolated components
 
-Like described above it is possible to use custom data in your isolated components. Just pass them as a hash to `public_options` and use them in your isolated component. Be careful, because `public_options` are visible in the raw html response from the server as they get passed to a vue component.
+Like described above it is possible to use custom data in your isolated components. Just pass them as a hash to `public_options` and use them in your isolated component. Be careful, because `public_options` are visible in the raw html response from the server as they get passed to a Vue.js component.
 
 Lets render a collection of models and each of them should rerender when a user clicks a corresponding refresh button. Our model is called `Match`, representing a soccer match. It has an attribute called score with the current match score.
 
@@ -401,5 +401,5 @@ end
 ```
 
 This page will render a match_isolated_score component for each match.
-If one of the isolated components gets rerendered we need the id in order to fetch the correct match. Because the server only resolves the isolated component instead of the whole UI it does not know which match exactly is requested unless the client requests a rerender with the match id. This is why `public_options` options are passed to the client side vue component.
+If one of the isolated components gets rerendered we need the id in order to fetch the correct match. Because the server only resolves the isolated component instead of the whole UI it does not know which match exactly is requested unless the client requests a rerender with the match id. This is why `public_options` options are passed to the client side Vue.js component.
 So if match two should be rerendered the client requests the match_isolated_score component with `public_options: { id: 2 }`. With this information our isolated component can fetch the match and rerender itself.

docs/api/000-base/README.md

@@ -52,10 +52,10 @@ wrapping elements by default.
 #### VueJsComponent
 
 In order to equip a Ruby component with some JavaScript, we associate
-the Ruby component with a VueJs JavaScript component. The Ruby component therefore needs to inherit
+the Ruby component with a Vue.js JavaScript component. The Ruby component therefore needs to inherit
 from `Matestack::Ui::VueJsComponent`. Matestack will then render a HTML component
 tag with some special attributes and props around the response defined in the
-Ruby component. The VueJs JavaScript component (defined in a separate JavaScript file and
+Ruby component. The Vue.js JavaScript component (defined in a separate JavaScript file and
 managed via Sprockets or Webpacker) will treat the response of the Ruby
 component as its template.
 
@@ -112,8 +112,8 @@ An app is a special kind of `Matestack::Ui::VueJsComponent`. Matestack will
 therefore wrap the UI defined in the `response` method with some markup enabling
 dynamic UI behavior and CSS styling.
 
-The app ships a `Vuex store` and `Vue.js event hub`, which are used by core vuejs
-components and can optionally be used by custom vuejs components in order to
+The app ships a `Vuex store` and `Vue.js event hub`, which are used by core Vue.js
+components and can optionally be used by custom Vue.js components in order to
 trigger events, manage client side date and communicate between components.
 
 Learn more about [apps](/docs/api/000-base/10-app.md)

docs/api/100-components/form.md

@@ -932,9 +932,9 @@ end
 
 ```
 
-## Form and other VueJs components
+## Form and other Vue.js components
 
-The child components `form_*` have to be placed within the scope of the parent `form` component, without any other VueJs component like `toggle`, `async` creating a new scope between the child component and the parent form component**
+The child components `form_*` have to be placed within the scope of the parent `form` component, without any other Vue.js component like `toggle`, `async` creating a new scope between the child component and the parent form component**
 
 
 ```ruby

docs/guides/100-tutorial/09_custom_vue_js_components.md

@@ -1,4 +1,4 @@
-# Essential Guide 9: Custom vue.js components
+# Essential Guide 9: Custom Vue.js components
 
 Demo: [Matestack Demo](https://demo.matestack.io)<br>
 Github Repo: [Matestack Demo Application](https://github.com/matestack/matestack-demo-application)
@@ -7,10 +7,10 @@ Welcome to the ninth part of our tutorial about building a web application with
 
 ## Introduction
 
-In a [previous guide](/docs/guides/100-tutorial/08_collection_async.md), we introduced custom components. In this one, we're bringing it to the next level with custom vue.js components!
+In a [previous guide](/docs/guides/100-tutorial/08_collection_async.md), we introduced custom components. In this one, we're bringing it to the next level with custom Vue.js components!
 
 In this guide, we will
-- add a custom vue.js component that fetches and displays data from a third-party API
+- add a custom Vue.js component that fetches and displays data from a third-party API
 
 ## Prerequisites
 
@@ -20,9 +20,9 @@ We expect you to have successfully finished the [previous guide](/docs/guides/10
 
 We want to display an option for what you could do with the person at its show page. Therefore we want to fetch a json api and display content of the responses on the page.
 
-We can achieve this by creating a custom vue.js component. A custom vue.js component is different from a custom component in the way that it needs a corresponding javascript file, which implements the frontend counterpart of our custom vue.js component.
+We can achieve this by creating a custom Vue.js component. A custom Vue.js component is different from a custom component in the way that it needs a corresponding javascript file, which implements the frontend counterpart of our custom Vue.js component.
 
-Okay, let's create our custom vue.js component. First we create a component in `app/matestack/components/persons/activity.rb`.
+Okay, let's create our custom Vue.js component. First we create a component in `app/matestack/components/persons/activity.rb`.
 
 ```ruby
 class Components::Persons::Activity < Matestack::Ui::VueJsComponent
@@ -46,10 +46,10 @@ class Components::Persons::Activity < Matestack::Ui::VueJsComponent
 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.
+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.
-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.
+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
@@ -79,7 +79,7 @@ MatestackUiCore.Vue.component('person-activity', {
 });
 ```
 
-As you can see, we're making use of [The Bored API](https://boredapi.com) to fill an (initially empty) array with strings. The `addActivity` method calls the api and pushes the activity from the response into the activities array. Because vue.js is reactive, our list specified in the ruby component will be updated and contain the added activity. Clicking the delete button will remove the activity and therefore remove the entry from the list.
+As you can see, we're making use of [The Bored API](https://boredapi.com) to fill an (initially empty) array with strings. The `addActivity` method calls the api and pushes the activity from the response into the activities array. Because Vue.js is reactive, our list specified in the ruby component will be updated and contain the added activity. Clicking the delete button will remove the activity and therefore remove the entry from the list.
 
 After creating the new component, we still need to register it, both in the `/app/matestack/components/registry.rb`
 
@@ -142,9 +142,9 @@ Again, don't forget to save your progress to Git. In the repo root, run
 git add . && git commit -m "Add activity dynamic component to display activities from The Bored API"
 ```
 
-## More information on custom vue.js components
+## More information on custom Vue.js components
 
-The existing components inside matestack aim to cover as many use cases as possible, abstracting away most of the JavaScript for generic, recurring use cases. This way, you can stick to Ruby logic and focus on building business logic instead of re-implementing basic JavaScript functionality. There sometimes is, however, a valid case for specific, handcrafted client side functionality. Therefore, matestack offers the option of creating custom vue.js components. Go ahead and [check the Vue.js guides](https://vuejs.org/v2/guide/) if you have never used it before.
+The existing components inside matestack aim to cover as many use cases as possible, abstracting away most of the JavaScript for generic, recurring use cases. This way, you can stick to Ruby logic and focus on building business logic instead of re-implementing basic JavaScript functionality. There sometimes is, however, a valid case for specific, handcrafted client side functionality. Therefore, matestack offers the option of creating custom Vue.js components. Go ahead and [check the Vue.js guides](https://vuejs.org/v2/guide/) if you have never used it before.
 
 As with custom components, there are hardly any limits for your creativity. You can also
 - use `haml` (and in the future `slim` and `erb`) for templating
@@ -156,6 +156,6 @@ To learn more, check out the [basic building blocks](/docs/guides/200-200-basic_
 
 ## Recap & outlook
 
-In this guide, we introduced custom vue.js components - an option for you to bring more complex JavaScript functionality to your application by extending matestacks components with your own Vue.js components.
+In this guide, we introduced custom Vue.js components - an option for you to bring more complex JavaScript functionality to your application by extending matestacks components with your own Vue.js components.
 
 Let's go ahead and learn how to best add [styling and notifications](/docs/guides/100-tutorial/10_styling_notifications.md) to our application in the next part of the series!