Nest SFCs within your SFC.
Install package:
# npm
npm install -D vite-plugin-vue-nested-sfc
# yarn
yarn add -D vite-plugin-vue-nested-sfc
# pnpm
pnpm add -D vite-plugin-vue-nested-sfcAdd to vite config:
// vite.config.js
import vue from "@vitejs/plugin-vue";
import vueNestedSFC from "vite-plugin-vue-nested-sfc";
export default {
plugins: [vue(), vueNestedSFC()],
};Add volar plugin for IDE support:
// tsconfig.app.json
{
"vueCompilerOptions": {
"plugins": ["vite-plugin-vue-nested-sfc/tooling"]
}
}Nested components are defined with the <component> block. The block's content is treated as if it's a seperate SFC.
<template>
<MyHeader>
Hello World!
</MyHeader>
</template>
<component name="MyHeader" lang="vue">
<template>
<h1>
<slot />
</h1>
</template>
</component>You can export nested components with the export attribute.
<!-- Button.vue -->
<template>
<button>
<slot />
</button>
</template>
<component name="RoundedButton" lang="vue" export>
<template>
<button>
<slot />
</button>
</template>
<style scoped>
button {
border-radius: 20px;
}
</style>
</component>Import them from other files as named exports.
<!-- App.vue -->
<script setup>
import { RoundedButton } from "./components/Button.vue";
</script>
<template>
<RoundedButton>
Click me
</RoundedButton>
</template>Made with 💛
Published under MIT License.