Reusable Tabs Using Tailwind CSS and Vue under Laravel Development

The codes and tutorial was originally taken from Jeffrey Way of Laracasts

Source: https://gist.github.com/JeffreyWay/f844ca4dd1887d566759849665068162

Video:

But our team uses Tailwind CSS and we are using Vue.js with Laravel, so it was a little confusing to apply but this is not hard when you are already familiar how vue components works and how to wire them to make it work.

Let’s begin with structuring our folder, I use _partials for the components I want to reused so it would look like this.

...components/_partials/Tab.vue and ...components/_partials/Tabs.vue

Then the codes on each file will look like these

As you can see on the codes above, it is easy to understand. If it still confusing, I suggest you watch the video to be enlighten.

Enjoy!

Written by

Full Stack Developer (Laravel/Vue.js)

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