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. ...
VueJS is massively useful tool. And, I love churning out SFCs like there’s no tomorrow. Vue helps us provide a super user experience. Combine it with Vuetify, Buefy and the like, and you have an application that is loved by all. Except, when the user hits F5 in the browser. Refreshing the browser will reset state. The typical state stored with Vuex is dissolved and may take the auth./login info with it if you have designed auth. in such a way. This is not a good experience for anyone. ...
I have been using Vue and Vuetify quite a bit and absolutely loving it. The combination alongside some of the backend Javascript frameworks (like AdonisJS, Strapi) make web app building fast and fun. In this post let’s take a look at how we can dynamically style elements by using data to drive styling. An Example with Data tables One of the common factors in all my data-driven applications is the data table. Looking back one of the primary factors for choosing Vuetify may be its powerful data table. I just need to supply a dataset and with the power of Vue, I have a super user-friendly table. ...