Nuxt: css of error.vue appears in page rendering-CodePudding

I am new to Nuxt.

I have a page

// pages/page1.vue
<template>
   <h1 >Page</h1>
</template>
<style>
  .title {
     font-size: 16px;
  }
</style>

Then, under layouts I have an error.vue

//layouts/error.vue
<template>
  <h1 >Error Page</h1>
</template>
<style>
  .title {
    color: red;
    font-size: 18px;
  }
</style>

What I found is that when page1 is rendered, the title appears in Red. I checked the inspect elements and found that the CSS of error as well as of page 1 is applied.

I do not have a default.vue in the layouts directory.

As mentioned this is my first project in Nuxt (or vue) and want to understand how to ensure that CSS of a page are applied on that page only. This is in development mode (npm run dev). Thanks

CodePudding user response：

The issue is CSS without scoped attribute renders at application level. You should use scoped attribute in styles tag as

layouts/error.vue

<template>
  <h1 >Error Page</h1>
</template>
<style scoped>
  .title {
    color: red;
    font-size: 18px;
  }
</style>

**When a <style> tag has the scoped attribute, its CSS will apply to elements of the current component only otherwise consider global style.