How to import type in vue3 setup script with typescript?

Viewed 2307

I want to use <script setup> feature with props type check in typescript. But it seems that <script setup> didn't import RouteRecordRaw as a type but as a value? And if I run this code in vite, the browser console will print an error:

"Uncaught SyntaxError: The requested module '/node_modules/.vite/vue-router.js?v=52a879a7' does not provide an export named 'RouteRecordRaw'"

Code:

<script lang="ts" setup>
import { RouteRecordRaw } from "vue-router";
// VSCode will print an error: "RouteRecordRaw" only refers to a type, butisbeing used as a value here. (TS2693) 

import { defineProps } from "vue";

const props = defineProps<{
  routeList: Array<RouteRecordRaw>;
}>();

const renderRoutes = props.routeList;
</script>
1 Answers

Use this:

import type { RouteRecordRaw } from "vue-router";

More info

Related