Hi there, today we’ll be making reusable input components, Please note that I’ll be using the vuetify input components, other UI frameworks should work the same or quite similar. Even with the stable release of Vue 3, we’ll be using Vue 2, due the reason that all there UI Vue frameworks are still in the process of integrating Vue 3 into their Framework, hence why it fails when try adding vuetify to Vue.
Be sure you have the Vue CLI installed. If not, execute the follow command in your terminal.
npm install -g @vue/cli
So let’s just set up our directory Vue boilerplate. In the directory of your choice run the following command to create the default Vue application. I’ll be naming mine reusable-comps.
vue create <app-name>
Continue pressing Enter until the setup is completed. Then move into the root directory of the Vue app we just created with the following command.
Use the following command to add vuetify to our Vue app.
vue add vuetify
Now that we have installed everything we need, run our app with the follow command.
npm run serve
You’ll be met with the default vuetify app as show below.
Now it’s time to clear our code so that we can start making reusable components. Do the follow steps.
- Delete the HelloWorld Component.
- Remove the HelloWorld component and import from the App.vue file.
- Create New Component called Header.vue (App-bar) in components folder. Add the following code to that component.
- Inside your App.vue change the code to include the following.
- Create a sub folder called inputs in your components folder. Here we will keep all our reusable components.
You might be asking yourself what’s the point of reusing components? It’s very important to be productive and save yourself some time and keep your code a bit cleaner. Consider recycling your components when you see a constant need for it through out your app. By just passing through the necessary data, You’ll be all sorted and won’t need to hard code the same component all the time.
Let’s now create a few basic input fields and make of them reusable components.
Create the following Files in our inputs folder
touch TextField.vue SelectField.vue RadioField.vue TimeField.vue DateField.vue
Inside TextField.vue include:
Inside SelectField.vue include:
Inside RadioField.vue include:
Inside DateField.vue include:
All the Data that gets passed through the component can of course be different hence why it’s a great idea to reuse your components. One core component used as a template to output different data based on what gets sent through.
In all the examples above we can see that we have passed data via props (name can differ by preference).
We’re using the Created() Vue Life Cycle Hook to avoid any duplication on any data name (In this case fields). Fields get cloned and is renamed field to avoid any warning/error messages in browser console.
Add all changes to the App.vue File below:
In the above App.vue file we have imported the 5 input components from the ./components/inputs directory. We have also added the data we’d like to pass through as examples. The scaling of this can go quite deeper and you can definitely play around and get creative, As I myself have passed much complicated data through like an array of objects where the data passed through looks like the following:
Noticed how we passing our data through the components as fields. That being said we can have as many <TextFields :fields=”<different_data>”/> in our file without taking up too many lines of code, same goes with the other input component.
Final Output should look like the following:
That's how you make reusable components!, just remember all components work more or less in similar ways so don’t over think yourself, okay. Feel free to pop a question if stuck.
Find code repo here. Feel free to clone and test for yourselves.
Follow me on Twitter @cbazil3 for updates.
Hope this lesson helped. Stay tuned for more tutorials.