Store the current tab in the URL, to navigate to it from anywhere else in the app

Image for post
Image for post
Photo by Chiara F on Unsplash

I would like to present to you a quick tip about working with the tabs component in Vuetify.js. I sometimes need to navigate to a specific tab in the application or want to share a direct tab link with a collaborator.

In order to achieve this, we need to store the information about the current tab in the URL in the browser address bar. A canonical solution involves using nested routes, but sometimes it’s an overkill to create a separate child page for each tab. Thankfully there’s a simpler approach that I quite often end up using.

TL;DR — go straight to the final code

Simple Tabs

First let’s look at a simple tabs component…


A neat trick when presenting lots of data using a Data Table

Image for post
Image for post
Photo by Alexander Mils on Unsplash

If the number of rows grows too large, or we are viewing the site on a mobile device, the table may not fit on the screen. If this happens, it can be unclear which column represents what information.

One solution to this problem is to always keep the table header visible when scrolling, and there are a couple of ways we can make this happen.

TL;DR — go straight to the final code

Fixed-Height Table

The simplest solution is to use the data table’s built-in fixed-header property, which only works if height of the table is defined (see v-data-table documentation for more info):

<v-data-table :headers="headers" :items="data" height="33vh" fixed-header />
Image for post
Image for post

However, what if we don’t want a fixed-height page subarea with a scrollbar? …


Image for post
Image for post

Vuetify.js is a Material Design component framework that allows customizing colors easily via themes. However, one color that is missing in the theme config is the background color. In this article we will fix that via CSS variables!

We will be using Nuxt.js — a meta-framework for Vue.js. However, very similar techniques can be applied to vanilla Vuetify.js.

TL;DR — go straight to the final code on Codesandbox:

As described in the official Vuetify.js documentation, it’s possible to choose between a light and dark theme and set the basic colors in the nuxt.config.js file vuetify section:

vuetify: {
theme: {
dark: true,
themes: {
dark: {
primary: '#4caf50',
secondary: '#ff8c00',
accent: '#9c27b0'
}
}
}…

About

Jarek Lipski

Full-Stack Developer / Agilist / Free and Open Source Software Fan.

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