Web Development5 practical use cases of Vue.js


Magda Dembna
Frontend Team Leader

Stanislav Naborshchikov
Solutions Specialist
Table of contents
- At the beginning
- 1. Navigation menu
- 2. Built-in editor
- 4. Instant search
- 5. Switchable grid
- In conclusion
Share the article
At the beginning
The Vue philosophy.js is about providing the simplest possible API for creating a real-time two-way data binding between a view (HTML template) and a model (JavaScript object).
The easiest way to install Vue.js - just attach it with the <script> tag to the end of the HTML document. The entire library is contained in a single js file, which can be downloaded from the official website or imported directly via CDN:
If you want to use Node, then Vue is available as an npm module. The module has its own interface in the terminal for flexible project configuration.
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.min.js"></script>
Below are five examples of using Vue.js with links to live demos with code and comments
1. Navigation menu
Let's build a simple navigation bar. There are a few basic components that all Vue-based applications should have:
Model – in other words, the application data. Within the library, it is a js object containing variables and their source values.
View-HTML code that displays data for the user and contains eventListeners for interacting with the model.
ViewModel – in MVC terminology, this would be a controller. In fact, within the framework of Vue.js ViewModel – the link between the model and the view.
As you can see, working with the library is quite simple. Vue.js does a great job and provides a convenient and familiar syntax:
Simple js object for options
{{Double brackets}} for text interpolation within templates
Built-in directives - "v-something" attributes for adding JavaScript functionality directly to HTML.
2. Built-in editor
In the previous example, our model had only a couple of predefined values. If we want to give users the ability to change any data, we need to do a two-way data binding and combine the input field with the model property. When text is entered, it is automatically saved to the text_content model, which then triggers an update for the view.
Another thing to note in the above code is the v-if attribute. It shows or hides the whole element depending on the state of the variable. Read more about it here
3. Order form
This example shows the list of services and the total cost of the selected ones. Since our services are stored in an array, we can use the v-for directive to iterate through all the records and display them. If a new element is added to the array or any of the old ones are changed, Vue will automatically update the data and show the new ones.
To display prices in the correct format, we need to define a simple currency filter. Filters allow you to change or filter model data. To define a custom filter, use the following syntax:
4. Instant search
Now let's create an application that will present some sample articles. The app will also have a search text box that allows you to filter which articles will be displayed. All articles will be stored in an array, and those that match the search query will be in the filteredArticles array.
The input field is bound to the searchString model. When the text is entered, the model is instantly updated and the filteredArticles array is generated again. This way we can create a real-time search without having to worry about rendering or configuring event listeners.
5. Switchable grid
In this last example, we will test a common scenario on Vue when the page has different layout modes. As in the previous application, we will show a list of articles stored in the array.
Clicking one of the buttons in the top panel will switch the display mode between a grid containing large images and a list of layouts with smaller images and text.
In conclusion
Vue.js can do much more than what we saw in these examples. The library is able to include animation, custom components, and many other functions. Therefore, we recommend that you familiarize yourself with the excellent official documentation of the library.
Did you like the article?Find out how we can help you.
Matt Sadowski
CEO of Mobile Reality

Related articles

29.09.2023
What ReactJS component library to choose in 2023?
Many React UI component libraries are available. We've curated a list of our top picks to assist you in selecting the best one for your React project.
Read full article

14.09.2023
Next JS vs Gatsby: which to choose in 2023
What should you choose as a CTO, IT executive, or IT developer for a ReactJS project? Next JS vs Gatsby: Choosing the SSR Framework.
Read full article

14.08.2023
GatsbyJS: The Ultimate Guideline
Pros and Cons of GatsbyJS: A Preferred Choice for Developers - Benefits, Disadvantages, Speed, UX, Performance, Community Support, and More
Read full article