Tips, Expertise, Articles and Advice from the Pro's for Your Website or Blog to Succeed
You've made an awesome component with Vue.js that you think other developers could use in their projects. How can you share it with them?
In this article, I'll show you how to prepare your component so that it can be packaged and published on NPM. I'll use an example project and demonstrate the following:
Granny is delighted! Your latest update of her web app really impressed her. She can now comfortably manage guests for her upcoming birthday party, knowing that she will not accidentally submit invalid data to the table, thanks to our frontend validation. However, she also mentioned something about reviewing your code and asked about the reusability of components within the app. This sent a chill down your spine. It’s time to learn about reusable Vue Components…
The more you program in Vue, the more thankful you will be for the Vue component system. Components are not very useful in small applications that we covered in this series of tutorials up to now. It is really important to understand how they work and what they are as they become very useful when building large applications, which you will inevitably face in your programming career.
In our pursuit of being able to handle large, scalable, maintainable web apps we became familiar with and learned about Vue Components. We learned how to:
In this tutorial, we’ll learn how to trigger events in the app based on some user action registered by our “child” component.
In the previous article, we have implemented a quite impressive Guest Management App with Vue. V-model was the latest Vue directive we learned, and if you recall, it allowed us to effortlessly bind form input to the app data.
Granny’s party is just around the corner, and she loves our new app. However, she found an issue. It turns out that even if she doesn’t enter any data into the form, she can still submit it. This then results in an empty row being added to her list of guests. She was deeply disappointed with this discovery. After all, her grandchild is to be a Principal Software Engineer and slip-ups like this are unacceptable.
Granny now wants us to help her make a list of all the guests attending the party. She could use pen and paper, but her grandson is a programmer and she wants a Vue app.
In this tutorial, we’ll accept user input (information about a guest) and display it in the list, similar to when we displayed the list of groceries. However, today we’ll use the v-model directive to create two-way data bindings on the form input.
Granny is ready to send us grocery shopping again. The last time we went shopping for granny, she only added a few things to her typical (static) list. That was fine because we were easily able to program the “Add to the list” functionality in our Vue app.
This time, she is throwing a dinner party for all of her relatives, including the distant cousins you’ve never met before. We’re in trouble! Our Vue app doesn’t allow us to remove items from the list so we have to get programming.
With the age of SPAs (Single Page Applications) at its rise, JavaScript appears to be in it’s prime. A programming language that wouldn’t be considered a real programming language only a decade ago is now one of the most used on this planet.
Naturally, it’s not just JavaScript in its pure form that is at the forefront of the revolution. We have a number of frameworks built on top of JavaScript that bring some order to the chaos. The most popular are, of course:
If you've fallen in love with Vue.js, you'll be dreaming that your company will add it to their technology stack so you get to work with it every day.
For that to happen, though, you may need to convince certain decision makers in your company to give it a try, be it the CTO or some other stakeholder.