Nuxt 3(beta)でハマったところ集

概要

Nuxt 3を実際に使ってみてハマったところを一覧にしていきます。
Nuxt特有ではない、Vue3の内容も含みます。

ハマり次第追記予定。

ハマりポイント

update:valueでsyncできない

emit("update:value", value)をvalue.syncで監視できない
→.sync修飾子は廃止されました

破壊的変更: v-bind の .sync 修飾子とコンポーネントの model オプションは削除され、v-model の引数に置き換えられます。
https://v3.ja.vuejs.org/guide/migration/v-model.html

propsがリアクティブにならない

コンポーネントのpropsが変化してもcomponentの表示が変化しない。
→ withDefaultsは分割代入だとリアクティブではなくなる

<script lang="ts" setup>
type Props = {
  label: string
  value: string
}

const { label, value } = withDefaults(defineProps<Props>(), {
  label: "",
  value: "",
})
</script>

一度propsへ代入することで回避しました。

<script lang="ts" setup>
type Props = {
  label: string
  value: string
}

const props = withDefaults(defineProps<Props>(), {
  label: () => "",
  value: () => "",
})

const { label, value } = toRefs(props)
</script>

環境変数が参照できない

環境変数がprocess.envから参照できない
→ viteではVITE_prefixが付いた変数を読み込み、import.meta.envから参照する

Vite は環境変数を特別な import.meta.env オブジェクトに公開します。いくつかのビルトイン変数は全てのケースで利用可能です:
https://ja.vitejs.dev/guide/env-and-mode.html#env-variables

VITE_ から始まる変数のみが Vite で処理されたコードに公開されます。
https://ja.vitejs.dev/guide/env-and-mode.html#env-files

null型がanyとして解釈される

const nullableHoge: Hoge | null = null

null型がanyとして解釈されるのでnullableHogeがHoge型になってしまう
→ Nuxtが自動生成するtsconfigではstrictNullChecksがfalseになっている

Once you’ve converted your codebase to TypeScript and felt familiar with it, you can start enabling these checks for greater safety.
https://v3.nuxtjs.org/concepts/typescript#stricter-checks

// tsconfig.json
{
  "compilerOptions": {
    "strictNullChecks": true
  }
}

まとめ

ちゃんとドキュメントを読もう。