Removing Padding From Body In Nuxt.js

user_16789038 0
Viewed 579

I thought of creating a website with Nuxt.js. I heard that its pretty cool and easy to use. I am having a little knowledge on vue.js but still cant find the solution to this problem:

How will I remove the padding of the body?

I know the default margin/padding is 8px.

I tried following:

  1. Created app.html/idex.html at root and set the style.

  2. Added style in pages/index.vue

  3. Used both margin / padding with !important tag.

But still, cant find solution

nuxt.js css html javascript
1 Answers

You can use the head() function in your layout or your page.

<script>
export default {
  head () {
    return {
      bodyAttrs: {
        class: 'reset-body'
      }
    }
  }
}
</script>

<style>
.reset-body {
  margin: 0
}
</style>

Stackblitz: https://stackblitz.com/edit/nuxt-starter-pl9ywp?file=pages%2Findex.vue

Or, if you want to really set it globally via the app.html file it should also work (added to the Stackblitz)

user_58747910
Related