CODEWITHSUNDEEP
vue.jsnuxt.js
user1072337
user1072337

Reputation: 12935

Styling the body in Nuxt

I am trying to add styling to the body tag in Nuxt, but the default.vue seems to be overwriting it (it's not inheriting from body as it is in my pure html build - I'm porting it over to Nuxt).

I have this in the CSS:

body{font-family:'Geomanist', sans-serif;color:#000 !important}

However, when I run this, it keeps inheriting from "html" from the default.vue layout component (I don't include that in my build at all as you can see):

<script scoped>
  export default {
    head() {
      return {
        script: [
          {
            src: '/js/vendor/jquery.min.js' 
          },
          {
            src: '/js/site.js' 
          }
        ]
        
      }
    }
    
    
  }
</script>

<style scoped>
@import '~/assets/css/style.min.css';
</style>

Looks like this in developer tools:

html {
    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    word-spacing: 1px;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;

It should look like:

body {
    font-family: 'Geomanist', sans-serif;
    color: #000;
}

The default.vue looks like:

<template>
  <div>
    <Nuxt />
  </div>
</template>

<style>
html {
  font-family:
    'Source Sans Pro',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Arial,
    sans-serif;
  font-size: 16px;
  word-spacing: 1px;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}
.button--green {
  display: inline-block;
  border-radius: 4px;
  border: 1px solid #3b8070;
  color: #3b8070;
  text-decoration: none;
  padding: 10px 30px;
}
.button--green:hover {
  color: #fff;
  background-color: #3b8070;
}
.button--grey {
  display: inline-block;
  border-radius: 4px;
  border: 1px solid #35495e;
  color: #35495e;
  text-decoration: none;
  padding: 10px 30px;
  margin-left: 15px;
}
.button--grey:hover {
  color: #fff;
  background-color: #35495e;
}
</style>

Upvotes: 3

Views: 12975

Answers (4)

Jure Rajčić
Jure Rajčić

Reputation: 1

You can do something like this in Nuxt3: page/index.vue, layouts/default.vue, scsss and nuxt.config.ts

Upvotes: -1

AlexMA
AlexMA

Reputation: 10192

In Nuxt 3 you'll want to use this (Reference):

<script setup>
// pages/my-cool-page.vue or app.vue
useHead({
  bodyAttrs: {
    class: 'test'
  }
})
</script>
<template>
 <!-- omitted for brevity -->
</template>
<style>
.test {
  overflow: hidden;
}
</style>

Upvotes: 5

unnoq
unnoq

Reputation: 79

My solution

<template>
  <div>
    <!-- Tip add css to body tag -->
    <body class="max-h-[100vh] max-w-[100vw] overflow-hidden"></body>
</div>
</template>

I recent aware when we create a second body tag and add classes to it, outermost body tag will has same classes. But we will have a redundant body tag.

Upvotes: 1

Michael Mano
Michael Mano

Reputation: 3440

my guess is because you are scoping it, vue does not target the body nor html. its an element inside the body, the html targeted one works because its not scoped.

If you dont want it to leak, Have a main global css file and the rest scoped.

put the global styles in default.vue

Upvotes: 0

Related Questions