In this article we continue describing development of a new Vuetify component for treeview. If you haven’t already, you can read Part I here and the Part II here.

This article has been long overdue in my task queue due to higher priorities with projects, so I will put focus on fulfilling at least some of the comments from the previous parts and enabling you to use the treeview component in your projects.

Please note, this component is a work in progress and there are some known issues and lack of features (as well as some unfinished ones). …

In this article we continue development of a new Vuetify component for treeview. If you haven’t already, you can read Part I here.

Where we are

In the previous part we built a foundation and demonstrated how to build a recursive component. The result of it is a tree of plain looking indented labels.

Image for post
Image for post

Like with any library, there comes a time when something more advanced needs to be built and a suitable component is not available out-of-the-box. This has happened to me recently with Vuetify — I needed a treeview component for a project and realized that there isn’t one included with it.

So I have two choices:

  • take a component from some other library; or
  • build it by myself

Taking a component from another library means that some discrepancies in styling and usage could occur eventually, and possibly increased application size because of additional scripts and styles which need to be included. …

In the Part II of the Vuetiful Tabs series (you can read Part I here), we will use what we have learned so far and make a practical example with some real-world data. We will also customise the way the tabs are displayed to enrich the available information.

For inspiration we will use the stock tickers commonly found on finance web sites. An example of such display can be seen in the following picture:

Image for post
Image for post
Stock information in tabs — inspiration for the Part II

Bitcoin is everywhere in the news currently, and everyone is talking about the price jumping up and down, so let’s use this as the theme for our task. We will also show how to download and use the pricing data from a publicly available API, and how to dynamically add tabs from search results. …

Having lot’s of different views, data and functionalities in the application can be messy, and after some time we will have many commands, input fields and other controls. One of the ways to decrease the application complexity is to group and structure all of the elements.

Today we will show you how you can use Vuetify’s Tab Component to do this. They enable faster navigation between views, documents or commands, and are styled according to the Material Design Guidelines.

I am sure you are already familiar with the concept of Tabs, as we can see them in almost all of the applications we can encounter on a daily basis. According to Wikipedia, they have been with us since the early 1980s. The interface was inspired by traditional card tabs which are inserted in paper files or card indexes, but in some styles like the Material Design, the desktop metaphor is no longer visually present. …


Damjan Namjesnik


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