After deciding to use vue-bootstrap instead of just bootstrap for its additional features like tabs, I made the choice to rewrite the navigation using it as well. However, I encountered an issue where the links in the navigation menu are pointing to the correct URLs but not functioning when clicked. It seems that Vue might be intercepting the link requests internally.
The current code, written in Latte templating language, is as follows:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div>
<b-nav n:if="$menu->hasVisibleItemsOnMenu()">
{foreach $menu->getVisibleItemsOnMenu() as $itemsParent}
{if $itemsParent->hasVisibleItemsOnMenu() === false}
<b-nav-item n:attr="active => $itemsParent->isActive()">
<a href="{$itemsParent->getRealLink()}">{$itemsParent->getRealTitle()}</a>
</b-nav-item>
{else}
<b-nav-item-dropdown
text="{$itemsParent->getRealTitle()}"
extra-toggle-classes="nav-link-custom"
right
>
{foreach $itemsParent->getVisibleItemsOnMenu() as $item}
<b-dropdown-item n:attr="active => $item->isActive()" >
<a href="{$item->getRealLink()}">{$item->getRealTitle()}</a>
</b-dropdown-item>
{/foreach}
</b-nav-item-dropdown>
{/if}
{/foreach}
</b-nav>
</div>
</div>
</nav>
Although the dropdown links should redirect to the specified page or URL, currently they are not working as expected.
- Vue setup inside
<head>
<!-- Load required Bootstrap and BootstrapVue CSS -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css"/>
<!-- Load polyfills to support older browsers -->
<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CMutationObserver" crossorigin="anonymous"></script>
<!-- Load Vue followed by BootstrapVue -->
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
In the footer:
<script>
window.app = new Vue({
el: '#app',
})
</script>