I am a newcomer to Nuxt 3 and facing challenges with importing an exported interface in app.vue.
The DTO I have defined is as follows:
// in ~/types/dtos
export interface UserDto {
id: string;
email: string;
}
There is an index.ts file in ~/types/dtos:
// ~/types/dtos/index.ts
export * from "./UserDto";
In my app.vue, when I import it and use it like this:
<script setup type="ts">
import {UserDto} from "~/types/dtos";
const user = ref<UserDto>({
id: "abc123",
email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c3a2a1a0f2f1f083a6bba2aeb3afa6eda0acae">[email protected]</a>"
});
console.log(user);
</script>
An error appears in the browser:
Uncaught SyntaxError: The requested module 'http://localhost:3000/_nuxt/types/dtos/index.ts' doesn't provide an export named: 'UserDto'
Additionally, I receive a lint error stating that it is only being used as a type, so it should be imported as a type. When I attempt to do so, I encounter another error (specifically within app.vue):
Vue: import type declarations can only be used in TypeScript files.
Lastly, I have configured an alias for the dtos which still does not work in app.vue:
alias: {
"@dtos": "~/types/dtos",
},
If I perform the same actions in any Page within ~/pages, everything works smoothly.
Question 1: Is there a special step I need to take to make it function properly in the app.vue?
Question 2: Why am I encountering that error when the setup script is typed as Typescript?
Thank you in advance for any assistance or guidance provided.