iOS safariで100vhがうまくいかない時に、
window.innerHeightを取って各要素のstyle属性に一個一個付ける、
というのをやりがちでしたが、楽な方法が無いかと探すとカスタムプロパティが使えるそうなので、
その手順をNuxt.js版で書きます。

mixinを作る

--whという名前でカスタムプロパティを定義する。
ロード時と、リサイズ時にwindow.innerHeightを取って--whに入れる。

exportdefault{data:()=>({style:{'--wh':'100vh'}}),mounted(){this.$nextTick(()=>{this.getWindowSize()window.addEventListener('resize',this.getWindowSize)})},methods:{getWindowSize(){this.style['--wh']=`${window.innerHeight}px`}}}

mixinを読み込む

mixinを読み込んで、styleオブジェクトをwrapper要素のstyle属性に入れる。

<templatelang="pug">
.l-wrap(:style="style")
  nuxt
</template><script>importdeviceMixinfrom'~/mixins/device'exportdefault{mixins:[deviceMixin]}</script>

カスタムプロパティを使う

heightにvar(--wh, 100vh)と書いて、使用する。
書き方: var(設定したカスタムプロパティ名, プロパティが無い時用の初期値)

<templatelang="pug">
.p-top
</template><script>exportdefault{}</script><style lang="stylus"scoped>.p-topheightvar(--wh,100vh)</style>

まとめ

これで、iOSのツールバーを考慮した実装が

1. wrapperでwindow.innerHeight取って、変数に格納する
2. wrapperかそれ以下の小要素でheight var(--wh, 100vh)する

という形でほぼCSSで指定出来るようになりました。

IEはまだ未検証ですが、Nuxt.jsの場合はheight var(--wh, 100vh)とすると、
height 100vhを自動的に手前に追加してくれるようなので、
varが認識されなくても問題なくvhできるかと思います。

<style lang="stylus"scoped>.p-topheight100vhheightvar(--wh,100vh)</style>

※mixinを使ったのはlayoutsが複数あるときに、各所に同じ処理を入れることになりそうで面倒だと思ったからなので、default.vueでmixinでやってる処理をそのまま書いても問題ないです。