Nuxt: css of error.vue appears in page rendering

January 21, 2022

I am new to Nuxt.

I have a page

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

Then, under layouts I have an error.vue

//layouts/error.vue
<template>
  <h1 class="title">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

>Solution :

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 class="title">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.