なつねこメモ

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

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

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 側でもそうじゃない方に記述したものも使える。便利。
ということで、メモでした。