How to import type in vue3 setup script with typescript?

Question

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>

Michal Levý · Accepted Answer · 2021-04-26 05:35:38Z

16

Use this:

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

More info

answered Apr 26, 2021 at 5:35

Michal Levý

38.6k8 gold badges82 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to import type in vue3 setup script with typescript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related