fix(guide): simplify directory structure

guide/english/vue/components/index.md

@@ -0,0 +1,86 @@
+---
+title: Components
+---
+
+## Components
+
+A classic problem that web developers face when working is HTML duplication, not
+in a simple example such as a list, but sometimes all you want is a "import" to
+be able to use the same code in several different places. Well, Vue.js gives you
+this feature with Components.
+
+Suppose you're developing a landing page for your company's product and you need
+to display the 4 main features of it following the same structure of a card-like
+object, with a icon, a title and a short description.
+
+```javascript
+Vue.component('feature-card', {
+  props: ["iconSrc", "iconAltText", "featureTitle", "featureDescription"],
+  template: `
+    <div class="card">
+      <div class="icon-wrapper">
+        <img
+          class="icon"
+          :src="iconSrc"
+          :alt="iconAltText">
+      </div>
+      <h4 class="title">
+        {{ featureTitle }}
+      </h4>
+      <p class="description">
+        {{ featureDescription }}
+      </p>
+    </div>
+  `
+});
+```
+
+> Note that here we binded the image `src` attribute with another syntax `:src`.
+This changes nothing, it is simply a syntax sugar to `v-bind:src` -- whenever
+you want to bind some attribute to a variable, you can prepend a `:` to the
+attribute name instead of using the full form `v-bind`.
+
+With this code, we did a lot of new things:
+* we created a new component called `feature-card`
+* we defined `feature-card` default **structure** with the `template` attribute
+* we opened a list of properties that that component accept with the `props`
+  list
+
+When we defined the name of the components, whenever we desire to reuse it, we
+can just reference it by using as a tag. In our example, we can use the tag
+`<feature-card>`:
+
+```html
+<div id="app">
+  <feature-card
+    iconSrc="https://freedesignfile.com/upload/2017/08/rocket-icon-vector.png"
+    iconAltText="rocket"
+    featureTitle="Processing speed"
+    featureDescription="Our solution has astonishing benchmarks grades">
+  </feature-card>
+</div>
+```
+
+In this case, we called the `<feature-card>` as it was an existing tag, as well
+as we setted `iconSrc` or `featureTitle` as they were valid attributes. And the
+purpose of Vue.js components is this: increment your toolbox with your own
+tools.
+
+### Props
+
+Props are custom attributes you can register on a component. When a value is passed to a prop attribute, it becomes a property on that component instance. To pass a title to our blog post component, we can include it in the list of props this component accepts, using a props option:
+
+```js
+Vue.component('feature-card', {
+  props: ['title'],
+  template: '<h3>{{ title }}</h3>'
+})
+```
+A component can have as many props as you’d like and by default, any value can be passed to any prop. In the template above, you’ll see that we can access this value on the component instance, just like with data.
+
+Once a prop is registered, you can pass data to it as a custom attribute, like this:
+```html
+<blog-post title="My journey with Vue"></blog-post>
+<blog-post title="Blogging with Vue"></blog-post>
+<blog-post title="Why Vue is so fun"></blog-post>
+```

guide/english/vue/control-flow/index.md

@@ -0,0 +1,111 @@
+---
+title: Control Flow
+---
+
+## Control Flow
+
+
+### Conditionals
+
+With Vue.js you can decide wheter to show or not a piece of code in you final
+page, depending on some condition. For example, imagine a form input that is
+required a text at least 8 characters long: if the user input is shorter than 8,
+than an error message should appear; but if the input is longer than 8, the
+message disappears.
+
+But let's make a simpler example. We want to condition the exibition of a
+message to a counter:
+
+```html
+<div id="app">
+  <p v-if="counter > 10">
+    This message is only rendered when the counter is greater than 10
+  </p>
+</div>
+```
+
+```javascript
+let app = new Vue({
+  el: '#app',
+  data: {
+    counter: 0
+  }
+});
+```
+
+If you go to the console and start to increment the counter, when it crosses our
+threshold of 10, the message will be shown! Then, if you decrement `counter`,
+Vue.js will hide the message when `counter` gets lower than 10. For that, we
+used the directive `v-if`.
+
+And you might be wondering if there's an `else` for that `if`. And there is the
+`v-else`. Notice that the `v-else` will always
+* expect a `v-if` prior to it
+* refers to the closest `v-if` in the page
+
+Let's alter a little bit our first example to get this straight.
+
+```html
+<div id="app">
+  <p v-if="counter > 10">
+    This message is only rendered when the counter is greater than 10
+  </p>
+  <p v-else>
+    And this is the "otherwise" option
+  </p>
+</div>
+```
+
+```javascript
+let app = new Vue({
+  el: '#app',
+  data: {
+    counter: 0
+  }
+});
+```
+
+Play a little with that by changing `counter` values and pay attention to the
+message shown.
+
+Vue.js also has the `v-else-if` directive.
+
+
+### Loops
+
+Vue.js also helps with the generation of multiple copies of the same code
+structure, with loops. The classic example is a list dynamically rendered.
+
+```html
+<div id="app">
+  <ul>
+    <li v-for="item in list">
+      {{ item }}
+    </li>
+  </ul>
+</div>
+```
+
+```javascript
+let app = new Vue({
+  el: '#app',
+  data: {
+    list: [
+      "shave",
+      "do the dishes",
+      "clean the sink",
+      "pay the bill"
+    ]
+  }
+});
+```
+
+Way easier than inserting a lot of `<li>`. And notice that whenever the `list`
+changes, the result will change acordingly. Try it out: open the console and
+`push` some string to the `list` with
+
+```javascript
+app.list.push("something else");
+```
+
+As expected, the page rendered now has our brand new item!

guide/english/vue/declarative-rendering/index.md

@@ -0,0 +1,90 @@
+---
+title: Declarative Rendering
+---
+
+## Instalation
+
+Before we get started, there are a couple of ways to use Vue.js, namely via CDN and via
+installation. For a first experience, it's easier to use the CDN.
+
+For development, use this:
+```html
+<!-- development version, includes helpful console warnings -->
+<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+```
+
+When jumping to production, this:
+```html
+<!-- production version, optimized for size and speed -->
+<script src="https://cdn.jsdelivr.net/npm/vue"></script>
+```
+
+As mentioned before, you can also install the `vue-cli`, but this is not
+recomended for beginners.
+
+## Declarative Rendering
+
+Vue.js is a great tool for creating dynamic pages, and a first way to get in
+touch with that is what's called Declarative Rendering.
+
+The use of term "declarative" intends to straighten this concept to
+declarative languages, such as SQL: you order something, it's not implied
+any implementation. Vue.js allows you to declare what data you want to be
+rendered, as simply as that:
+
+```html
+<div id="app">
+  {{ message }}
+</div>
+```
+
+```javascript
+let app = new Vue({
+  el: '#app',
+  data: {
+    message: 'Hello, world!'
+  }
+});
+```
+
+With those snipets, you're telling Vue to dynamically render whatever is stored
+inside `message` variable. And the fun: whenever `message` is changed,
+Vue.js manages to reload that specific part of the DOM and you see the
+change. 
+
+If you want to try this reactivity out, open the console and change de value
+of `app.message` to, say, `"Hello from console"`. Did you notice the change in
+the page?
+
+The `{{ ... }}` is the syntax for that behavior: outputting the value
+of a variable or of an expression. For instance, this is also a valid use and
+will result in `hello`:
+
+```html
+<div id="app">
+  {{ 1 < 2 ? "hello" : "goodbye" }}
+</div>
+```
+
+There're cases which what we want is to set an attribute using our Vue app's
+variable.  You might think that the same syntax applies, but Vue has something
+specific for that, what we call "binding".
+
+```html
+<div id="app">
+  <a v-bind:href="dynamicLink">This link</a>
+</div>
+```
+
+```javascript
+let app = new Vue({
+  el: '#app',
+  data: {
+    dynamicLink: 'medium.freecodecamp.org'
+  }
+}
+```
+
+The syntax `v-bind` is what Vue.js calls a "directive". It's a way to set a new
+attribute to the tag that will be handled by Vue -- there are more
+directives, they all begin with `v-`.

guide/english/vue/index.md

@@ -0,0 +1,19 @@
+---
+title: Vue
+---
+## Introduction
+
+Vue.js is a progressive framework for building user interfaces.
+It's core is focused on only the "view" layer and can be easily intergrated with existing libraries and projects.
+But on the other hand, Vue.js can also be leveraged to create powerful single page applications by integrating with extensions
+such as `vue-router` and `vuex`.
+
+It's main attributes are the following:
+* It's approchable: if you know basic HTML, CSS & JavaScript - then you'll be writing apps in Vue.js in no time!
+* It's versatile: you can use it as a simple library or a fully featured framework
+* It's performant: it's extremely performant out of the box with very little to almost no optimization required.
+
+### More Information
+
+- [Vuejs Homepage](https://vuejs.org/)
+- [GitHub Repo](https://github.com/vuejs/vue/)