なつねこメモ

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

カテゴリー一覧
このサイトについて
検索

2023/04/27

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

カテゴリー：

TypeScript
Vue.js

公式ドキュメントにちらっと書いてはいるけど、 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 側でもそうじゃない方に記述したものも使える。便利。
ということで、メモでした。