Using VueJS with NodeJS

3 brilliant examples for learning Vue.js.

Published on May 16, 2019Last updated on April 28, 2021

Vue.js is currently on everyone's lips. The dynamics and flexibility of the JS framework make it perfect for single-page applications, but also for smaller features on websites. Here I show you 3 practical examples to learn Vue.js as quickly as possible!

Vue.js has partly similar syntax as AngularJS or ReactJS. If you have already dealt with these frameworks, you will surely like Vue.js.

Compared to jQuery, Vue.js has gained significantly in recognition in recent years. The following statistics show the number of search requests from the two frameworks. Of course, this is not the exact use, but a clear trend can already be seen here:

Source: Google Trends

That's why you now have the chance to jump on the “Vue.js” train and get started!

You can use this HTML file as a basis for the following projects:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Vue.js Examples</title> </head> <body> <div id="app"> <h1>Vue.js Examples</h1> <!-- PUT YOUR VUE.JS CONTENT HERE --> </div> <script loading="lazy" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el: '#app' }); </script> </body> </html>

This is a completely normal HTML file in which we only integrate Vue.js via CDN and create an instance for Vue.js in JavaScript. This means that our Vue.js application runs inside the container and we run our other program code there.

Now we come to the three different practical examples. If you have programmed and understood these, you are familiar with the basics of Vue.js. You can open the source code of the respective applications by clicking on "HTML", "JS" and "CSS". I realized a little styling using bootstrap.

If you're a bookworm, this book may be an option for you *:

But go now!

1. Search function

Live search functions are a very nifty feature. This means that as soon as you enter a search term, the results are displayed in real time. The first exercise is such a search. We have a list of entries and when typing a term in the search bar, the corresponding results are displayed. This could look like this:

See the Pen Vue.js Search by WebDEasy (@WebDEasy) on CodePen.

In the HTML we have a search field that has an attribute. This gives us the opportunity to access and change it in the JS code. We also have one that contains our still unfiltered entries. The element has a Vue.js for loop. This iterates all entries and outputs them.

In the JS we have a list with all list entries and an empty search string. With the computed property we have the option of generating a variable that is recalculated almost permanently. We take advantage of this and say that the variable should consist of all list entries from which occurs. When comparing, we use lowercase letters to ensure the comparison.

2. To-do list

I know ToDo Lists are boring and have existed a thousand times already, yes! But I still find you a nice exercise every time to get used to a new framework.

Therefore the task is to program a to-do list. We want to be able to add new entries and delete old ones. Here is my sample code:

See the Pen RmRWKG by WebDEasy (@WebDEasy) on CodePen.

In this example we again have an input to add a new ToDo and again a loop to output our existing ToDos. The peculiarity here is that we make a function call with every ToDo that is supposed to delete the ToDo.

In the JS we also have a list of ToDos that have already been initialized. The function is executed as soon as you press "Enter" in the input field. It receives a new ID and is added to the array.

The function sets itself the same array as before, with the small difference that the ToDo with the same ID as the transferred one is filtered out.

3. Form

Forms are often indispensable, but often difficult and have security flaws. Therefore, in addition to the client-side validation of the data, a server-side validation should also take place (also in my example).

In this example we have some form fields that we check for completeness and, if necessary, output an error message. In the code I have a comment line in which, for example, a RestAPI request can be made. This should validate the data again and can then send it by email or write it into a database. This is what my example looks like:

See the Pen Vue.js Form by WebDEasy (@WebDEasy) on CodePen.

In the HTML we have the various inputs, which all receive a v-model attribute with the corresponding name. We also have a container for error notifications and a container for successfully submitting the form. These are hidden by default via. The function is called when you click on “Send”.

In the JS, all attributes are individually checked for emptiness in the function. Such an error can be detected using a Boolean that is set to by default. If this is the case, the variable is filled with text and thus automatically displayed to the user
(thanks) and the function returns. If the variable is set to, the instruction is ignored and the server-side validation could proceed. It is also set to to show the user a success message.

Everything else is now in your hands. Vue.js has great documentation. There are also many other practical examples given and you can actually find a solution for every problem.

Here you will find more exciting articles and tutorials about web development and web server administration. Have a look if there is anything else for you: