JSFiddle - React, Tailwind, and code Playground

by rootd

HTML

<ul  class="nav flex-column nav-pills side-nav" id="v-pills-tab" role="tablist" aria-orientation="vertical">
  <li class="list-group-item" :class="{ active: $route.path === '/nutrition/foodmenu' }"> <router-link to="/nutrition/foodmenu">Перспективное меню</router-link></li>
  <li class="list-group-item" :class="{ active: $route.path === '/nutrition/journal' }"><router-link to="/nutrition/journal">Журнал питания</router-link></li>
  <li class="list-group-item" :class="{ active: $route.path === '/nutrition/ambarbook' }"><router-link to="/nutrition/ambarbook">Амбарная книга</router-link></li>
</ul>

JavaScript

export default {
	data: () => ({
  	menu: [
    	{
      	title: 'Перспективное меню',
        url: '/nutrition/foodmenu'
      },
      {
      	title: 'Журнал питания',
        url: '/nutrition/journal'
      },
      {
      	title: 'Амбарная книга',
        url: '/nutrition/ambarbook'
      }
    ]
  })
}