When I load the page, I see the following errors in the console:
\n- \n
- Source map error: Error: request failed with status 404 Resource URL: http://localhost:3000/ Source Map URL: bootstrap.css.map \n
- Error while fetching an original source: request failed with status 404 Source URL: \n
This is what the whole page looks like:
\n
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.
\n<b-nav-item to=\"/admin/product/list\">Products</b-nav-item>
This is what the page looks like now:
\n
Versions
\n- \n
- BootstrapVue: 2.21.1 \n
- Bootstrap: 4.5.3 \n
- Vue: 2.6.12 \n
- Nuxt: 2.14.12 \n
Environment:
\n- \n
- Device: Mac \n
- OS: macOS Big Sur \n
- Browser: Firefox and Safari \n
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.
\nMainly the styling applied to .container
.container {\n margin: 0 auto;\n min-height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n text-align: center;\n}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>.
-
|
Hello, When I load the page, I see the following errors in the console:
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. This is what the page looks like now: Versions
Environment:
|
Beta Was this translation helpful? Give feedback.
Replies: 6 comments 2 replies
-
|
@platoputhur Can you please create a minimal reproduction of the issue on CodeSandbox or CodePen. |
Beta Was this translation helpful? Give feedback.
-
Here is the link to code sandbox: https://codesandbox.io/s/condescending-dubinsky-9k8f0?file=/components/SiteHeader.vue If you change the |
Beta Was this translation helpful? Give feedback.
-
|
I can't seem to run your codesandbox, looks like there's some errors while compiling.
|
Beta Was this translation helpful? Give feedback.
-
|
Nevermind, I forked the codesandbox and removed The issue you're having is because of the unscoped styles found in .container {
margin: 0 auto;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}When you don't use The reason this is only happening when using the |
Beta Was this translation helpful? Give feedback.
-
|
@Hiws Thanks a lot. I wasted a lot of time on this one. Anyway index.vue is the only page missing |
Beta Was this translation helpful? Give feedback.
-
|
|
Beta Was this translation helpful? Give feedback.
-
Because you've installed Bootstrap 5, while BootstrapVue uses Bootstrap 4. |
Beta Was this translation helpful? Give feedback.
-
|
Thank your mention... |
Beta Was this translation helpful? Give feedback.
Nevermind, I forked the codesandbox and removed
core-jswhich 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
.containerWhen you don't use
scopedon your<style>tags, in a component it will bleed into other components/pages. To avoid this you have to addscopedto the<style>tag.<style scoped>.The reason this is only happening when using the
todrop, is because thetoprop renderes a<nuxt-link>, which doesn't cause a page redirect, but instead just swaps…