Giving the value to "to" prop inside "b-navbar-nav" makes the web page behave in a weird way

[platput]

Hello,
So I am using bootstrap-vue in a couple of projects and this is the first and only time I have come across something. I don't understand why. I have the below code inside a component called SiteHeader.

<template>
	<b-navbar toggleable="lg" type="dark" variant="secondary">
		<b-navbar-brand href="/">Sample Webpage</b-navbar-brand>
		<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
		<b-collapse id="nav-collapse" is-nav>
			<b-navbar-nav>
				<b-nav-item to="/admin/product/list">Products</b-nav-item>
				<b-nav-item href="#">Orders</b-nav-item>
			</b-navbar-nav>
			<!-- Right aligned nav items -->
			<b-navbar-nav class="ml-auto">
				<b-nav-item-dropdown right>
					<!-- Using 'button-content' slot -->
					<template #button-content>
						<em>User Full Name</em>
					</template>
					<b-dropdown-item href="#">Profile</b-dropdown-item>
					<b-dropdown-item href="#">Sign Out</b-dropdown-item>
				</b-nav-item-dropdown>
			</b-navbar-nav>
		</b-collapse>
	</b-navbar>
</template>

When I load the page, I see the following errors in the console:

• Source map error: Error: request failed with status 404 Resource URL: http://localhost:3000/ Source Map URL: bootstrap.css.map
• Error while fetching an original source: request failed with status 404 Source URL:

This is what the whole page looks like:

Now as soon as I remove the 'to' prop and use 'href' in the below line the page looks as how it is supposed to look.
<b-nav-item to="/admin/product/list">Products</b-nav-item>

This is what the page looks like now:

Versions

• BootstrapVue: 2.21.1
• Bootstrap: 4.5.3
• Vue: 2.6.12
• Nuxt: 2.14.12

Environment:

• Device: Mac
• OS: macOS Big Sur
• Browser: Firefox and Safari

[jacobmllr95]

@platoputhur Can you please create a minimal reproduction of the issue on CodeSandbox or CodePen.

[platput]

@platoputhur Can you please create a minimal reproduction of the issue on CodeSandbox or CodePen.

Here is the link to code sandbox: https://codesandbox.io/s/condescending-dubinsky-9k8f0?file=/components/SiteHeader.vue

If you change the to in line number 9 to href, the issue will be gone.

[Hiws]

I can't seem to run your codesandbox, looks like there's some errors while compiling.

[Hiws]

Nevermind, I forked the codesandbox and removed core-js which removed all the errors.

The issue you're having is because of the unscoped styles found in pages/index.vue.
Mainly the styling applied to .container

.container {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

When you don't use scoped on your <style> tags, in a component it will bleed into other components/pages. To avoid this you have to add scoped to the <style> tag. <style scoped>.

The reason this is only happening when using the to drop, is because the to prop renderes a <nuxt-link>, which doesn't cause a page redirect, but instead just swaps out the content on the page. Meaning the style from the index.vue page is still loaded, and is now affecting your other page too since you're not using <scoped>.

[platput]

@Hiws Thanks a lot. I wasted a lot of time on this one. Anyway index.vue is the only page missing scoped. I don't think I would have figured it out anytime soon. Really appreciate your help.

[KalubowilaDMR]

Why does my navbar work properly? I couldn't solve it yet.

[Hiws]

Why does my navbar work properly? I couldn't solve it yet.

Because you've installed Bootstrap 5, while BootstrapVue uses Bootstrap 4.

[KalubowilaDMR]

Thank your mention...