Imagine your product manager Slacking you a quick message…
Product: “Could you add a little notification to our game list to show when it is removed?”
You: “Oh, crap. I’m going to have to change a bunch of different places to fix that.. ugh!”
Reusable components used in large scale applications provide flexibility and future proofing of your code. It also helps to adhere to the DRY Principle. The following simple example is one way of creating a reusable V-Combobox.
Installing Yarn/Vue/Vuetify (Fedora 28)
I prefer using yarn as a package manager over npm (npm5 is closing the gap over yarn.)
curl --silent --location https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.reposudo dnf install yarnyarn --version
Install Vue and Vuetify => Quick start
yarn global add @vue/cli
vue create my-chip
? Please pick a preset: default (babel, eslint)
? Pick the package manager to use when installing dependencies: Yarncd my-chip
vue add vuetify? Use a pre-made template? (will replace App.vue and HelloWorld.vue) Yes
? Use custom theme? No
? Use a-la-carte components? Yes
? Use babel/polyfill? Yesyarn serve
Open a browser to http://localhost:8080
Create a new component MyChip
Don’t forget to add VCombobox and VChip to /plugins/vuetify.js.
If you end up wanting to abstract more than the VCombobox, you can quickly obtain a list of Vuetify components with the follow commands
ls ./node_modules/vuetify/src/components/Now we have MyChip, a component that isn’t reusable but does display what we want.
Lets abstract!
What changed here?
I removed the hard coded data selectedChips and availableChips then created props for them. selectedChips became value, enabling vue’s v-model feature. availableChips became the more generic available prop. The parent component will now pass these in.
Methods have also changed. Vue props work by using one-way data flow. If you attempt to change the value of a prop you will get warning about mutating data. To prevent this issue, simply set your own data variable, mutate it and emit the value back to the parent.
Why all the fuss? Why not just use VCombobox?
As initially stated, imagine you have a large application and you have copy and pasted VCombobox in multiple places.
Manager says, “Could you just go ahead and put a notification when a game is removed? Yeah.. then we want to save the changes to the database. Thaaaaanks.”
Aaaah! We don’t have a reusable component! We will be forced to change all of instances of the add/remove method! No worries! Lets add this alert to our reusable component in one place!
Steps:
Add VSnackbar to plugins/vuetify.js
Add another div with a V-Snackbar to our MyChip component
Add data to control this Snackbar
That’s it!
In a recent large Vue project, I had abstracted many of Vuetify’s components into reusable ones. The Vuetify v1.1.0 release refactored VSelect with tabs into VCombobox. I only had to update a single component, instead of all the places I would have been directly using VSelect.
What else can be abstracted? VChip? Should we add Vuex to save to the database?
Thanks for reading, I hope it helps others!
View the source code.
