なつねこメモ

主にプログラミング関連のメモ帳 ♪(✿╹ヮ╹)ノ

書いてあるコードは自己責任でご自由にどうぞ。記事本文の無断転載は禁止です。

2023/04/27

Vue3 の setup 構文でも named export をしたい

カテゴリー:

公式ドキュメントにちらっと書いてはいるけど、 script setup を使っていても、 named export したい!
ということでやり方。

<script lang="ts" setup>
type Colors = (typeof COLORS)[number];
 
type Props = {
  color: Colors;
};
 
defineProps<Props>();
</script>
 
<script lang="ts">
const COLORS = ["red", "yellow", "blue"] as const;
 
export default {
  name: "ColorPalette",
};
 
export { COLORS };
</script>

とまぁこんな感じで、 script のほうに書けば良い感じにしてくれる。
ついでに、普通に setup 側でもそうじゃない方に記述したものも使える。便利。
ということで、メモでした。

Copyright (c) 2015 - 2023 Natsuneko <me@natsuneko.cat>