I’m trying to use VueJS (Front) + Ruby On Rails 5.x in Backend. I will talk about Rails in some next post… maybe 😆

Why VueJS? well, this project have short scope and like any startup project, must be fast! so, I found Vuetify an amazing library with material directives ready to use. I just has created some Vue component’s, stores and all has been fast since then. The docs is easy to understand and to apply. I just have created the following structure:

Note Templatevuetify.vue component. This is the “common template”. The notifications components is attached to this component for all common messages. All rest it’s same! 😀 you know:

<template lang="html">
  <div>
    <v-navigation-drawer temporary v-model="drawer" :mini-variant="mini" dark :hide-overlay="true">
      <v-list class="pa-0">
        <v-list-tile avatar tag="div">
           <v-list-tile-avatar>
              <img src="avatar.jpg" />
           </v-list-tile-avatar>
           <v-list-tile-content>
              <v-list-tile-title>Homero Thomson</v-list-tile-title>
           </v-list-tile-content>
           <v-list-tile-action>
              <v-btn icon dark @click.native.stop="mini = !mini">
                 <v-icon>chevron_left</v-icon>
              </v-btn>
           </v-list-tile-action>
        </v-list-tile>
      </v-list>
      <v-list class="pt-0" dense>
         <v-divider light></v-divider>
         <v-list-tile v-for="item in items" :key="item" @click.native="redirectTo(item.goTo)" v-if="item.roles.includes(currentRole)">
            <v-list-tile-action>
               <v-icon light>{{ item.icon }}</v-icon>
            </v-list-tile-action>
            <v-list-tile-content>
                <v-list-tile-title>{{ item.title }}</v-list-tile-title>
            </v-list-tile-content>
         </v-list-tile>
      </v-list>
    </v-navigation-drawer>
    <v-toolbar fixed light>
        <v-toolbar-side-icon light @click.native.stop="drawer = !drawer"></v-toolbar-side-icon>
        <v-toolbar-title>PubApp</v-toolbar-title>
    </v-toolbar>
    <main class="mh1000">
       <notifications>
          <template slot="main-content-notification-success">
              {{$store.state.notifications.notificationSuccess}}
          </template>
          <template slot="main-content-notification-error">
              {{$store.state.notifications.notificationError}}
          </template>
          <template slot="main-content-notification-warning">
              {{$store.state.notifications.notificationWarning}}
          </template>
          <template slot="main-content-notification-info">
              {{$store.state.notifications.notificationInfo}}
          </template>
       </notifications>
       <v-container fluid>
           <transition
              appear
              name="custom-classes-transition"
              enter-active-class="animated fadeInRight"
           >
              <slot name="main-content"></slot>
           </transition>
        </v-container>
     </main>
     <footermain></footermain>
   </div>
</template>

In api folder we have all request to API using the official library for Vue: Axios. These small objects just call to API and return any response. All treatment of exceptions or error handles is allocated in stores. In stores I included the Notifications, so all the components is mainly independent of all request and errors on responses.
All necessary and recurrent data is stored in each ‘store’, so the application don’t need re-call to API for get data. Later of this, all looks very fast and simple to code level.

After use VueJS 2.x I can say that have the magic of AngularJS 1 and some ReactJS concepts, like components. The learning curve is considerably less than AngularJS 1.x and of course of ReactJS, you know… just I needed 2 days with this tutorial and 1 day for apply Vuetify and some customizations.

The most popular questions for Vue is: is Vue scalable for larger apps? I don’t sure 🤔 I mean, how big are we talking about? I guest it works and we keep simple code and fast application. But definitely it’s much better than AngularJS in many respects.

Do you know to Fattoruso musicians family? You should! 😀