BUILDING USER INTERFACES WITH VUE.JS
CREATING A PROJECT WITH VUE
After installing Vue.js, we can create a project using the “vue create <project>” command in the console, after which you can configure a project by choosing between a number of preset features. Vue also offers a browser extension for development purposes that filters and displays all components and variables of an application.
VUE COMPONENTS AND PLUGINS
The lifecycle of a component in Vue is similar to that of React: first, a component is created, then mounted, updated and finally destroyed. Only when a component is mounted it has access to HTML. Components can have props that pass data from a parent to child component, events that pass data from a child to parent component and models: for two-way data binding. Mixins are a flexible way to distribute reusable functionalities for Vue components. When a component uses a mixin, all options in the mixin will be “mixed” into the component’s own options.
Plugins usually add global-level functionality to Vue. Vue plugins are designed to be installed and set up as quick as possible. For example, the Vue router plugin requires only a couple of lines to be imported and configured. Lazy loading a route is a matter of wrapping up the component inside a function. This generates a separate chunk of code for a route that is loaded when it’s going to be used, reducing the time to load the app.
VUE DEMO APP
Bi4 Group demoed a simple polling demo app using Vue. Participants could access the app on their mobile phones and fill in multiple polls. The polling app’s architecture consists of Redbird, a modern reverse proxy for node, a user interface built with Vue using TypeScript and polls.com/api built with Node.js.
VUE: A POWERFUL AND PROMISING FRAMEWORK
It is easy to see why Vue has become a popular framework among Angular and React. Vue’s documentation is excellent, which makes it relatively easy to learn. Because Vue is a progressive framework, it can be extended with extra libraries and components for additional functionality.