Nested SFC Proposal

[louiss0]

I'm here to advocate for the use of Nested SFC's. A nested SFC is an SFC that is inside another SFC. This makes it so that multiple SFC's can be put in the template.

Motivation

The Vue community has been struggling for a long time to find a solution for not having to create a new file just to create a new Component. The only reliable solution is to use JSX. Another solution is to use Anthony Fu's Reusable Template There are problems with both solutions. Even with the solution that I'm proposing. The reason my solution is flawed is that it's not supposed by Vue. If it was, then it could be a good one.

This need is such a powerful need some decided to create an alternative syntax for writing Vue Components Vue Vine

JSX

There are a few issues with JSX

• Its template language is different from SFC's
• You can't use directives
• Refactoring from a stateful to stateless component requires a helper.
• JSX features mostly slots are not supported in Vue very well.
  • You can't get type inference from slots.
  • In Volar + SFC you can't get type inference from using events.
• You can't export functional components created in SFC's.

Create Reusable Template

The Create Reusable Template function has its own issues.

• You can't use events.
• Templates can't define props or emits.
• Furthermore, you can't export templates at any time.

Example API

A nested SFC is an SFC that is inside an SFC. It uses a component block to indicate that it is a component. It uses all the features we know and love except having to write template everywhere in Vue.

Stateless Component

<template>
	<Example />
</template> 

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

Stateful Component

<template>
	<ExampleButton />
</template> 

<component name="example-button">
	<script setup>
		const count = ref(0)
	</script>
	
	<template>
		<button @click="count++">
		 Increment {{count}} 
		</button 
	</template>
</component> 

Exported Component

<template>
	<ExampleButton />
	<ExampleButton />
	<ExampleButton />
</template> 

<component export name="example-button">
	<script setup>
		const count = ref(0)
	</script>
	
	<template>
		<button @click="count++">
		 Increment {{count}} 
		</button 
	</template>
</component> 

Since Vue supports multiple template languages. If a template language is used on the parent. Then the children should inherit the parent language. This goes for all blocks that Vue supports.

Example Implementation In The Wild

There is a new plugin called Vite Plugin Vue Nested SFC Out there that solves this problem. But there are a few problems with using it.

• It does not work with any tool that has a custom renderer Example Astro
• If you only specify components then you will not be able to do anything without having to use a script or template tag.
• It relies on Vite

Link to Example here

Conclusion

It's better to have vue support a way of creating SFC's rather than force developers to use JSX with sub-par results and complexity. Or make them rely on a utility that does not allow them to control the use of templates. I'm comfortable with just the power to create at least one level of SFC's in my templates.

The created SFC's don't have to allow the creation of SFC's within them.

I don't care too much about naming either.

I hope I'm able to create nested SFC without having to create an empty script or template block

[hminghe]

If so, I would like to create a vue file.

[louiss0]

Thanks for responding I think you should try it out. Here it is being used on Stackblitz with vue here

If you like it then please either talk to the creator about improving it or advocate for it to be a part of vue.

[louiss0]

I fixed the example to a vue one.

[thedamon]

I think the proposed API here is a perfectly clear approach to solving this issue and would love to see this in Vue.

I would like a way to inherit state from the 'main' component's <script> tag and I'd even contend it should be the default behaviour. If you're going to be defining new props and state, that's the perfect time to break the component out into a new file. I think the most common usecase for multiple components per file like this is to cut down on repetitions related to alternate structural wrapping or simple loops. In these cases defining props etc is basically boilerplate and it would make sense to share the parent state by default.

Maybe for semicomponents that you don't want to share state with you can add a specific attribute for.. but I really do think it makes sense to have a separate file as soon as you want to have a totally separate state and require props (and for that matter having export seems unnecessary to me too... why treat these as fully fledged components with all the options as an actual SFC? It makes sense for them to be forced to exist as children I think)

[louiss0]

The best way to support this idea is to talk about your experiences with this idea. Please use vue-nested-sfc and tell people what you think.

[pavi2410]

i like https://vue-macros.dev/features/named-template.html