Closed3

Nuxt3 (とかVue3) つまづいたとこ

ピン留めされたアイテム
sngazmsngazm

雑なメモです。まだパブリックベータなので色々変わるところもあると思います
今はパブリックな情報があまりなくてdiscordの#nuxt3チャンネルで皆いろんなことを聞いてるので、困ったらそこで検索するとなんか出てくるかもしれません

sngazmsngazm

composable内でuseNuxtApp()が呼べない

composables/useHoge.ts
export default function useHoge() {
  const app = useNuxtApp()
  return { app }
}

なんか nuxt instance unavailable 言われる。ガイドだと使えてるんだけども…

useNuxtApp()が呼べるのはsetup関数オンリーなので、composableもsetup関数で呼ばれたやつなら動くということも言われているがいまいちよくわからない。他にも変なタイミングでこけたりするので、こけたら呼び出す位置を調整したりして対応してる。1回目は呼べるけど2回呼ぼうとしたらこけるので変数に格納して使い回したら大丈夫とか…

sngazmsngazm

script setup記法で定義した変数や関数はデフォルトで外から叩けない

NuxtじゃなくてVue composition APIでつまづいたとこ
<script setup>で定義した変数は自動的にテンプレートで使えるので、template refsで親コンポーネントから子コンポーネントにアクセスしてそいつの関数を叩こうとしたけど叩けなくてつまづいた。

こうすると叩けるようになる

Hoge.vue
<script setup lang=ts>
const fuga = () => {
  console.log('hey')
}
defineExpose({
  fuga
})

</script>

returnしなくてもそのコンポーネント内のテンプレートでは使えるから油断してたけど、外部に対しては閉じている。ちゃんとリファレンスに書いてあるんだな
SFC <script setup> | Vue.js

このスクラップは5ヶ月前にクローズされました