First tab

This is the content of the first tab.

Second tab

This is the content of the second tab.

Disabled tab

This content will be unavailable while :is-disabled prop set to true

Custom fragment

The hash that is appended to the url can be customized.

Prefix and suffix

A prefix and a suffix can be added — HTML allowed.


The tab component above is powered by spatie/vue-tabs-component.

The component will use the fragment of the url to choose which tab to open. So clicking #second-tab will display the contents of the tab named Second tab.

The component will also remember which tab was opened previously. If you reload without fragment the tab that is currently active will receive focus again. More about this feature on Github.

Code on Github | Proudly presented by