Reusable components using Vue & Vuetify.

Chad Bosch
Feb 21 · 4 min read

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.

cd <app-name>

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.

Default Vue&Vuetify app.

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

  • TextField.vue
  • SelectField.vue
  • RadioField.vue
  • TimeField.vue
  • DateField.vue
touch TextField.vue SelectField.vue RadioField.vue TimeField.vue DateField.vue

Inside TextField.vue include:

Inside SelectField.vue include:

Inside RadioField.vue include:

Inside TimeField.vue

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:

survey[0].section[0]

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:

Landing Page (Output)

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.

Cheers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store