Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/HunYan-io/vite-plugin-vue-nested-sfc
Nest SFCs within your SFC.
https://github.com/HunYan-io/vite-plugin-vue-nested-sfc
plugin vite vite-plugin vue
Last synced: 2 months ago
JSON representation
Nest SFCs within your SFC.
- Host: GitHub
- URL: https://github.com/HunYan-io/vite-plugin-vue-nested-sfc
- Owner: hunyan-io
- License: mit
- Created: 2023-03-24T10:33:16.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-06-21T21:57:47.000Z (over 1 year ago)
- Last Synced: 2024-09-19T16:48:18.793Z (4 months ago)
- Topics: plugin, vite, vite-plugin, vue
- Language: TypeScript
- Homepage:
- Size: 221 KB
- Stars: 97
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-vite - v3 - Nest SFCs inside your SFC. (Plugins / Vue)
- awesome-vite - v3 - Nest SFCs inside your SFC. (Plugins / Vue)
README
# vite-plugin-vue-nested-sfc
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![build][build-src]][build-href]
[![License][license-src]][license-href]
Nest SFCs within your SFC.
## Install
Install package:
```sh
# 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:
```js
// 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:
```jsonc
// tsconfig.app.json
{
"vueCompilerOptions": {
"plugins": ["vite-plugin-vue-nested-sfc/tooling"]
}
}
```
## Usage
### Defining components
Nested components are defined with the `` block. The block's content is treated as if it's a seperate SFC.
```html
Hello World!
```
### Exporting
You can export nested components with the `export` attribute.
```html
button {
border-radius: 20px;
}
```
Import them from other files as named exports.
```html
import { RoundedButton } from "./components/Button.vue";
Click me
```
## License
Made with 💛
Published under [MIT License](./LICENSE).
[npm-version-src]: https://img.shields.io/npm/v/vite-plugin-vue-nested-sfc?style=flat&colorA=18181B&colorB=F0DB4F
[npm-version-href]: https://npmjs.com/package/vite-plugin-vue-nested-sfc
[npm-downloads-src]: https://img.shields.io/npm/dm/vite-plugin-vue-nested-sfc?style=flat&colorA=18181B&colorB=F0DB4F
[npm-downloads-href]: https://npmjs.com/package/vite-plugin-vue-nested-sfc
[build-src]: https://github.com/HunYan-io/vite-plugin-vue-nested-sfc/actions/workflows/ci.yml/badge.svg?branch=main
[build-href]: https://github.com/HunYan-io/vite-plugin-vue-nested-sfc/actions/workflows/ci.yml
[license-src]: https://img.shields.io/github/license/HunYan-io/vite-plugin-vue-nested-sfc.svg?style=flat&colorA=18181B&colorB=F0DB4F
[license-href]: https://github.com/HunYan-io/vite-plugin-vue-nested-sfc/blob/main/LICENSE