Importing .vue files in typescript

Question

I am trying to setup a Vue3 project with Typescript.
I get the error: "File '/home/.../src/App.vue.ts' is not a module".

When using Javascript in main.js, it works fine, but when renaming it to main.ts, I am unable to import ".vue" files.
Main.ts:

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App).use(router).mount('#app');

Now, when running yarn serve, the output shows:

ERROR in src/main.ts:2:17
TS2306: File '/home/.../src/App.vue.ts' is not a module.
    1 | import { createApp } from 'vue';
  > 2 | import App from './App.vue';
      |                 ^^^^^^^^^^^
    3 | import router from './router';

What is the way to make Typescript understand .vue-files?

Hendrik Jan · Accepted Answer · 2021-03-26 13:10:37Z

6

It turned out that I should add "export default {}" to my App.vue file.

The original (faulty) App.vue:

<template>
  <router-view></router-view>
</template>

<script lang="ts">
console.log('Loading App.vue');
</script>

I fixed the error by adding "export default {};".
The new App.vue:

<template>
  <router-view></router-view>
</template>

<script lang="ts">
console.log('Loading App.vue');

export default {}; // <-- added this line to fix the error
</script>

answered Mar 26, 2021 at 13:10

Hendrik Jan

4,9509 gold badges47 silver badges79 bronze badges

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

1 Comment

tao Over a year ago

<script> tag is optional in a .vue file. But, when it's missing, the framework provides a default export. So you can't just add one for logging. If you add it, it has to export the component logic, whether it's Options API, Composition API, or the <script setup> macro (which is an alternative, removing some boilerplate)... To better understand what Vue does behind the scenes, play in the playground and peek at the JS tab.

evilxin · Accepted Answer · 2023-05-26 04:21:33Z

6

App.vue must be:

<script setup lang="ts">
<script>

or

<script lang="ts">
export default {};
</script>

answered May 26, 2023 at 4:21

evilxin

611 silver badge1 bronze badge

2 Comments

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

ib_ganz Over a year ago

thanks a lot. it was a silly mistake

Collectives™ on Stack Overflow

Importing .vue files in typescript

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related