-
|
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…