-
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.
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
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 addscoped
to the<style>
tag.<style scoped>
.The reason this is only happening when using the
to
drop, is because theto
prop renderes a<nuxt-link>
, which doesn't cause a page redirect, but instead just swaps…