Nuxt: css of error.vue appears in page rendering

Question

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

Mani Mirjavadi · Accepted Answer · 2022-01-21 09:05:26Z

1

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.

edited Jan 21, 2022 at 9:05

Mani Mirjavadi

1,08311 silver badges19 bronze badges

answered Jan 21, 2022 at 5:35

Atif Zia

7932 gold badges12 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

RmR Over a year ago

Oops. This is indeed embarrasing. The auto suggest even puts it and I removed it. :-). Thanks

Collectives™ on Stack Overflow

Nuxt: css of error.vue appears in page rendering

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related