# vite-plugin-vue-custom-blocks

> vue sfc 的自定义块 vite 插件

Latest version **0.1.0** (published 2022-02-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install vite-plugin-vue-custom-blocks
pnpm add vite-plugin-vue-custom-blocks
yarn add vite-plugin-vue-custom-blocks
bun add vite-plugin-vue-custom-blocks
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2022-02-13 |
| First published | 2022-02-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 7.6 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | markthree |
| Maintainers | markthree |
| Keywords | vite, plugin, template |

## Links

- npm: https://www.npmjs.com/package/vite-plugin-vue-custom-blocks
- Repository: https://github.com/dishait/vite-plugin-vue-custom-blocks
- Homepage: https://github.com/dishait/vite-plugin-vue-custom-blocks#readme
- Issues: https://github.com/dishait/vite-plugin-vue-custom-blocks/issues
- npm.io page: https://npm.io/package/vite-plugin-vue-custom-blocks

## Dependencies (4)

- [vue](https://npm.io/package/vue.md) ^3.2.30
- [defu](https://npm.io/package/defu.md) ^5.0.1
- [js-yaml](https://npm.io/package/js-yaml.md) ^4.1.0
- [@types/js-yaml](https://npm.io/package/@types/js-yaml.md) ^4.0.5

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 0.1.0 (latest) — 2022-02-13
- 0.0.2 — 2022-02-13

## README

# vite-plugin-vue-custom-blocks

vue sfc 的自定义块 `vite` 插件

<br />

## Motivation 🐇

有时候我们想要在单文件组件 `SFC` 内进行设置一些对象，但是写到 `setup` 中又太拥挤了。所以有了这个自定义块的插件 🤗🤗 

<br />
<br />

## Features 🦖

- json 解析
- yaml 解析


<br />
<br />

## 使用 🦕

### 安装

```shell
pnpm i vite-plugin-vue-custom-blocks -D

# npm i vite-plugin-vue-custom-blocks -D
# yarn add vite-plugin-vue-custom-blocks -D
```

<br />

### 配置插件

```ts
// vite.config.ts 或者 vite.config.js

import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import CustomBlocks from 'vite-plugin-vue-custom-blocks'

export default defineConfig({
    plugins: [
        Vue(), 
        CustomBlocks()
    ]
})
```

#### 具体配置

```ts
import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import CustomBlocks from 'vite-plugin-vue-custom-blocks'

export default defineConfig({
    plugins: [
        Vue(), 
        CustomBlocks({
            include: {
                tags: ['custom-block'], // 标签名, 默认只解析 custom-block
                langs: ['json', 'yaml'] // 允许的解析方式，默认支持 json 和 yaml 解析
            }
        })
    ]
})
```

<br />

### `SFC` 模板中

#### json 解析

```html
<script lang="ts" setup>
import { useCustomBlock } from "vite-plugin-vue-custom-blocks"

const block = useCustomBlock()

console.log(block) // 将输出 { foo: 'bar' }
</script>

<template>Hello, world!!</template>

<style>
</style>

<custom-block lang="json">
{
    "foo": "bar"
}
</custom-block>
```

#### yaml 解析

```html
<script lang="ts" setup>
import { useCustomBlock } from "vite-plugin-vue-custom-blocks"

const block = useCustomBlock()

console.log(block) // 将输出 { foo: 'bar' }
</script>

<template>Hello, world!!</template>

<style>
</style>

<custom-block lang="yaml">
foo:
    bar
</custom-block>
```

<br />
<br />


## License

Made with markthree

Published under [MIT License](./LICENSE).

<br />

---
_Source: https://npm.io/package/vite-plugin-vue-custom-blocks · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._