Nuxt.jsでSafeArea（iphoneX以降）に対応する方法

Nuxt.jsでSafeArea（iphoneX以降）に対応する方法になります。

viewport-fit=coverの指定を追加する

まずは、metaタグのviewportの設定にviewport-fit=coverを追記します。
Nuxt.jsのmetaタグはnuxt.config.jsで設定できます。

nuxt.config.js

export default {
  head: {
    title: 'title',
    meta: [
      { charset: 'utf-8' },
      {
        name: 'viewport',
        content: 'width=device-width, initial-scale=1, viewport-fit=cover'
      },
      {
        hid: 'description',
        name: 'description',
        content: 'my website description'
      }
    ]
  }
}

CSSで調整する

<template>
  <div class="demo"></div>
</template>

<style lang="scss" scoped>
.demo {
  padding: 8px;
  /* ↓iphone X向けの指定↓ */
  padding-left: calc(env(safe-area-inset-left) + 8px);
  padding-top: calc(env(safe-area-inset-top) + 8px);
  padding-right: calc(env(safe-area-inset-right) + 8px);
  padding-bottom: calc(env(safe-area-inset-bottom) + 8px);
}
</style>

上記の指定では、SafeAreaにpaddingで余白を設定しています。
SafeAreaが無いデバイスですと、safe-area-insetは0になります。

参考