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.
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 -
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.
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.
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 - 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 // client/router.
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.
In a previous post, we saw the power of bindings in Vue. v-model is a powerful way to bind variables and UI rendering in Vue. Let us look at a bit more of v-model in this post. Remind me what is v-model about? In its simplest form.. 1 <input type="text" v-model="myName" label="Your name:"> .
Vue provides what are called ‘Single File Components’ (SFC) that make the development process easier. Completely new to Vue? Head over to another post and get to know Vue. One of the big advantages of Vue is the fact that it can be deployed in multiple ways in your app. You can link Vue CDN link and just start using it for simple purposes, or use the full scale development environment setup by Vue CLI.