vite-plugin-vue-nested-sfc

Nest SFCs within your SFC.

Install

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-sfc

Add 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"]
  }
}

Usage

Defining components

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>

Exporting

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>

License

Made with 💛

Published under MIT License.