hunyan-io / vite-plugin-vue-nested-sfc

Nest SFCs within your SFC.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Exporting Nested SFC's

louiss0 opened this issue · comments

At the moment I don't think you can export nested SFC's. This is useful because there are times when three components are. dependent on each other. How about a block for exporting components? Or you could use a special keyword for exporting them export.

Things that change together should live together.

Export block example

<export>
{ example }
</export>

<component name="example">
  <template>
  I'm component example.
  </template>
</component>

Export keyword example

<component name="example" export>
  <template>
  I'm component example.
  </template>
</component>

Thanks for the suggestion! Check out the latest release

Example usage:

<!-- App.vue -->
<template>
    <div>
        Hello, App!
        <HelloComponent />
    </div>
</template>

<script setup lang="ts">
import { HelloComponent } from './components/HelloWorld.vue';
</script>
<!-- HelloWorld.vue -->
<template>
    <div>
        Hello, World!
    </div>
</template>

<component name="hello-component" lang="vue">
    <template>
        <div>
            Hello, Component!
        </div>
    </template>
</component>

I don't think they should auto-export. But nice achievement.

I assume the template is the default one but the others are put in separate exports. automatically. I guess this means devs can choose between exporting multiple components or exporting one as the default and then others as components. The auto-exporting will cause some problems along the line. To prevent auto export there would have to be further nesting.