- What is the correct use of 'style scoped'?
The <style scoped></style>
notation is not ambiguous, as the scoped
attribute suggests, all the CSS elements defined within this scope apply only to the current component. If the CSS element exists globally, the scoped one -having the same name and type- takes precedence, that is, it overrides the globally defined CSS element.
For example, let us define in /components folder 3 components Component1.vue, Component2.vue, Component3.vue:
Component1.vue:
<template>
<div class="yellow-text">Component 1</div>
</template>
<script>
export default {
name: 'Component1'
}
</script>
<style>
.yellow-text {
color: yellow;
}
</style>
Component2.vue:
<template>
<div class="yellow-text">Component 2</div>
</template>
<script>
export default {
name: 'Component2'
}
</script>
<style scoped>
.yellow-text {
color: red;
}
</style>
Component3.vue:
<template>
<div class="yellow-text">Component 3</div>
</template>
<script>
export default {
name: 'Component3'
}
</script>
- In Component1.vue, the text will be displayed in yellow.
- In Component2.vue, the text will be displayed in red because the scoped CSS class takes precedence over the globally defined one in Component1.vue.
- In Component3.vue, the text will be displayed in yellow.
So to respond to your question: there is no correct way because there is only one way to do that, and the meaning is not subject to any form of interpretation.
- Or should the routing process be rather than ?
Even if <nuxt-link />
is rendered as <a href>
, the documentation clearly states the former must be used to navigated through the Nuxt.js application and In the future, we will add features to the component, like pre-fetching on the background for improving the responsiveness of Nuxt.js Applications.