How do i export a component with <script setup> syntax?

I want to import a child component into a parent component and get this error:

SyntaxError: The requested module ‘/src/views/AppsChildView.vue?t=1673426241580’ does not provide an export named ‘AppsChildView’

I tried:

export default { title: "AppsChildView", }
export default { name: AppsChildView }

Etcetc.
I did alot of Googling but did not find an answer.
VS Code gives me a (typescript?) error:
“A default export must be at the top level of a file or module declaration.ts(1258)”

Any advice appreciated

1 Like

hello @dizid ,
Can you please provide source code so that I can get more idea about the problem?

5 Likes

Hi Addweb,

The code is on github, but i already removed the “parent/child” part and worked around the issue.

My question is basically: how to export a Vue component so it can be used in another (parent) component?

From what i remember years ago, this is pretty standard. But in Vue 3, especially with the syntax, almost everything is different :frowning:

The error message “The requested module ‘/src/views/AppsChildView.vue?t=1673426241580’ does not provide an export named ‘AppsChildView’” suggests that you are trying to import a Vue component using a default import, but the component is not being exported as the default export.

You can fix this by exporting the component as a named export instead. In your child component AppsChildView.vue, you need to add the following:

<script>
export const AppsChildView = {
  // component code here
}
</script>

You can then import it in the parent component like this:

<script>
import { AppsChildView } from './src/views/AppsChildView.vue'

export default {
  // component code here
  components: {
    AppsChildView
  }
}
</script>

Regarding the error “A default export must be at the top level of a file or module declaration.ts(1258)” this could be related to TypeScript. If you’re using TypeScript, you should make sure that you have a default export at the top level of the file, this is the recommended way for handling modules in TypeScript.
If your AppsChildView.vue component is not using TypeScript, please remove the export default from the component file.

1 Like

export default AppsChildView.

The methods you tried exports an object, not the component.

Thank you :pray:

You are welcome.