Some applications like Gmail and Facebook have a search feature where as a user enters some input, the input is sent to the server and the results are used to provide the user with results closer to what the user is looking for. To implement this behaviour in Vue, we use a library called debounce […]
When loading data in Vue.js applications, you may want to display some form of loading indicator so your users will know that something is happening. Vue.js provides us with the v-if directive which allows us to conditionally show/hide any piece of markup. In the snippet below, we have our data property loading which is set […]
There are a few common operations that are performed on lists: add a new item, search through the list, and deleting an item from a list. The snippet below shows how to delete an item from a list. list is an array of names. In the <template>, we render the list using v-for. For each […]
A common use for data binding is to conditionally alter the classes and styling of an element. The snippet below shows how this can be achieved: By default, the <p> tag is styled to have a red text color. However, <p> tags with the .active class get styled with a blue text. Since the data […]
Filters are part of many applications as it helps the user sort through a wide range of items. We can use the combination of v-model and computed properties to achieve this. In the snippet above, we have a list of items and an input field. As you type into the input field, the list gets […]
Sometimes you have a list of items you would like to add to, based on some user interaction or event. The snippet below gives a base template to achieve this. In the snippet above, we have a list, an input field and a button. When the button is clicked, the value of the input field […]
A Vue component to fetch and render a list Framework – Vue Use cases Recipe Todo list
Detect a user device screen orientation Framework: Vue Use cases Automatically launch fullscreen video on mobile when the user changes to landscape mode
Detect if a user has navigated away from the web page. Framework: Vue Use cases Stop animation while the page is in the background Pause video in the background
