Vue provides one excellent way and three other alternative ways of getting your components to work together to form one beautiful, seamless application. Let us look at them one by one :) 1. Vuex Yesterday we talked about Vuex and how we (try to) manage vuex variables and local variables in a Vue component. What we did not talk about was how Vuex is the most effective solution for all inter-component communications. ...
Vuex is quite a powerful way of storing variables and sharing them across components, but where do you draw the line? Which variables do you store locally and which of them are shifted to Vuex store? This is the advise I often come across - Get your variables in store; keep component clean and consider future reuse Don’t overdo Vuex. Apply judgment and use store judiciously I find that the code I write oscillates between the two with no practical standard that I can apply across the team. ...
Vue allows us to build out infinite blocks of components that can work together or build on top of another to provide UIs of increasing sophistication. You may have a page or view that loads dozens of components including fields, tabs, charts and so on, and the loading of such components is automatically taken care by Vue. Consider this simple example that uses Vuetify and Vue - Todo view, which is the base view to show to-dos. ...
Search in Vuetify data tables is just beautiful. Define a data table and a search is readily available for you. What else can a human ask for? In fact, data tables were the single biggest reason for me to choose Vuetify about an year back. My long term association with data-driven application means that I am ever-so-dependent on the data table functionality. Many other libraries in the market need you to implement search by yourself. Although not a big deal (the code is highly reusable), it is nice to not worry about yet another feature for once. ...
Let us see how we can easily accumulate requests when user types in a search (or auto-complete) fields and collate them in one go. When implementing the ‘instant search’ fields in Vue, the cycle of events is pretty standard - User keys in characters System keeps getting those characters and sending them to the server for processing System reacts to changes from server and displays search results The same cycle repeats for fields include auto-complete that take user action and return stuff from server. ...
Vue filters provide an excellent way to format data on the UI. Define Vue filters using a filter: block in single file components, or use global filters. Consider the following use cases - Purchase date is stored in yyyy-mm-dd in DB, but you have to display dd-mm-yyyy format Cost data needs to be displayed in currency of user’s locale Apply separators in bill number for better readability These and many more are easily accomplished in Vue filters. Let us consider an example of formatting numbers in currency. ...
You find forms everywhere in a data-driven application. Forms, as a rule, need some validation on the client-side to nudge users to fill in data in line with what we want. These validation are easy to implement in Vue. Consider an example that includes Vuetify for styling the UI - <template> <div> <v-form ref="form" v-model="valid"> <v-layout row wrap> <v-flex xs12></v-flex> <v-flex xs12> <v-text-field v-model="userId" label="Full Name" :rules="[rules.required, rules.min8Chars]" ></v-text-field> </v-flex> <v-flex xs12> <v-text-field v-model="userEmail" label="Enter your e-mail" :rules="[rules.required, rules.email]" ></v-text-field> </v-flex> <!-- not used. demonstrates that user cannot submit form unless valid <v-flex xs12 class="pt-3 text-xs-right"> <v-btn flat outline @click="validateAndDoStuff">Validate</v-btn> </v-flex> --> </v-layout> </v-form> </div> </template> Above is a simple form with two fields - user-id and email. We have specified the validation rules applicable for the fields, and we define those rules in data. ...
Vue router can pass props to the view on invocation. This can be super useful when same views cater to different contexts, and the context is known at the time of clicking URL. Vue router just catches the context and passes it on to the view. For example: if you want to show “My Todos” to all users, and “All Todos” to administrators. Instead of creating two different flavours of the same view, you could incorporate them in one view and pass the context on who clicked the “Todo” link. ...
VueJS has been my ‘go to’ front-end development framework for the last two quarters. I use VueJS with Laravel, FeathersJS and AdonisJS, and cannot just stop loving the development cycle. While you are developing the backend and frontend on same machine, and, if you fly solo - you end up using the same development machine for all purposes. Let’s say - The backend with AdonisJS is at http://localhost:3333 Front-end Vue is served hot at http://localhost:8080 Vue application will talk to back-end Adonis through API calls. This is accomplished through a utility like Axios. ...
Vue router has a simple job - receive client-side requests and invoke the view that needs to be rendered in the browser. That is also a powerful job. Typically, this is what you see in a Vue router - // client/router.js import Vue from "vue"; import Router from "vue-router"; import Home from "./views/Home.vue"; // views! import store from "./store/index"; // store (will be used subsequently) Vue.use(Router); export default new Router({ mode: "history", // include URL in browser history base: "/", // base URL. if your app is at "/app", specify here routes: [ { path: "/", name: "home", component: Home, }, { path: "/todo", name: "todo", component: () => import("./views/Todo.vue"), // lazy render }, ], }); Router is simple and self-explanatory. User clicks on a link on the UI that says “/”, she is taken to Home component. She clicks on “/todo” on UI, browser navigates to Todo. ...