DEV Community

Milo Delgado
Milo Delgado

Posted on

Issue Using Vue Components

I am using a main vue component in my astro app and I would like to break it down into smaller components by importing them into the main component. This doesn't seem to work. as it "can't be found". Is this possible? What is the Astro way to achieve this?

example:

# pages/about.astro
---
import MyVueComponent from '../components/MyVueComponent.vue';
---
<html>
  <body>
    <h1 class="editable">Use Vue components directly in Astro!</h1>
    <MyVueComponent />
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode
# components/MyVueComponent.vue

... Can't find SubComponent error

<script lang="ts">
import SubComponent from '../components/shared/SubComponent.vue'
export default {
  components: {
    SubComponent
  }
}
</script>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)