Skip to content

Commit 0795927

Browse files
sxzzsxzz
committed
docs: improve standalone version of defineOptions
1 parent 2c05319 commit 0795927

3 files changed

Lines changed: 100 additions & 163 deletions

File tree

‎docs/features/hoist-static.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
With enabling `hoistStatic`, constants declared in macros of `<script setup>` can be referenced.
44

5-
If you support this feature, you can go to [Vue PR](https://github.com/vuejs/core/pull/5752) and hit like :+1: or comment. Thanks!
5+
If you support this feature, feel free to hit like :+1: or comment on the [Vue PR](https://github.com/vuejs/core/pull/5752). Thanks!
66

77
| Features | Supported |
88
| :----------------: | :----------------: |
@@ -39,7 +39,7 @@ export default {
3939
```vue
4040
<script setup lang="ts">
4141
// A value that's even not a constant
42-
const name = /* hoist-static */ fn()
42+
const name = /* hoist-static */ fn()
4343
defineOptions({
4444
name,
4545
})

‎docs/macros/define-options.md‎

Lines changed: 88 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,103 @@
22

33
Options API can be declared using the `defineOptions` in `<script setup>`, specifically to be able to set `name`, `props`, `emits`, and `render` inside of one function.
44

5-
If you support this feature, you can go to [RFC Discussion](https://github.com/vuejs/rfcs/discussions/430) and hit like :+1: or comment. Thanks!
5+
If you support this feature, feel free to hit like :+1: or comment on the [RFC Discussion](https://github.com/vuejs/rfcs/discussions/430). Thanks!
66

77
| Features | Supported |
88
| :----------------: | :----------------: |
99
| Vue 3 | :white_check_mark: |
1010
| Vue 2 | :white_check_mark: |
1111
| TypeScript / Volar | :white_check_mark: |
1212

13-
::: tip
14-
if you need `defineOptions` only, the [standalone version](https://github.com/sxzz/unplugin-vue-macros/tree/main/packages/define-options) is better for you.
13+
## Installation Standalone Version
14+
15+
if you need `defineOptions` feature only, the standalone version is more appropriate for you.
16+
17+
### Installation
18+
19+
:::: code-group
20+
21+
::: code-group-item npm
22+
23+
```bash
24+
npm i -D unplugin-vue-define-options
25+
```
26+
27+
:::
28+
29+
::: code-group-item yarn
30+
31+
```bash
32+
yarn add -D unplugin-vue-define-options
33+
```
34+
35+
:::
36+
37+
::: code-group-item pnpm
38+
39+
```bash
40+
pnpm add -D unplugin-vue-define-options
41+
```
42+
43+
:::
44+
45+
::::
46+
47+
:::: code-group
48+
49+
::: code-group-item Vite
50+
51+
```ts
52+
// vite.config.ts
53+
import DefineOptions from 'unplugin-vue-define-options/vite'
54+
55+
export default defineConfig({
56+
plugins: [DefineOptions()],
57+
})
58+
```
59+
60+
:::
61+
62+
::: code-group-item Rollup
63+
64+
```ts
65+
// rollup.config.js
66+
import DefineOptions from 'unplugin-vue-define-options/rollup'
67+
68+
export default {
69+
plugins: [DefineOptions()],
70+
}
71+
```
72+
1573
:::
1674

75+
::: code-group-item esbuild
76+
77+
```js
78+
// esbuild.config.js
79+
import { build } from 'esbuild'
80+
81+
build({
82+
plugins: [require('unplugin-vue-define-options/esbuild')()],
83+
})
84+
```
85+
86+
:::
87+
88+
::: code-group-item Webpack
89+
90+
```js
91+
// webpack.config.js
92+
module.exports = {
93+
/* ... */
94+
plugins: [require('unplugin-vue-define-options/webpack')()],
95+
}
96+
```
97+
98+
:::
99+
100+
::::
101+
17102
## Basic Usage
18103

19104
```vue{3-6}

‎packages/define-options/README.md‎

Lines changed: 10 additions & 158 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,16 @@
1+
<p align="center">
2+
<img src="https://github.com/sxzz/unplugin-vue-macros/raw/main/docs/public/logo.svg" width="200px" />
3+
</p>
4+
15
# unplugin-vue-define-options [![npm](https://img.shields.io/npm/v/unplugin-vue-define-options.svg)](https://npmjs.com/package/unplugin-vue-define-options)
26

7+
<a href="https://vue-macros.sxzz.moe/macros/define-options">📜 Documentation</a>
8+
39
English | [简体中文](./README-zh-CN.md)
410

5-
Introduce a macro in `<script setup>`, `defineOptions`,
6-
to use Options API in `<script setup>`,
7-
specifically to be able to set `name`, `props`, `emits` and `render` in one function.
11+
Options API can be declared using the `defineOptions` in `<script setup>`, specifically to be able to set `name`, `props`, `emits`, and `render` inside of one function.
12+
13+
If you support this feature, feel free to hit like 👍 or comment on [RFC Discussion](https://github.com/vuejs/rfcs/discussions/430). Thanks!
814

915
## Features
1016

@@ -13,165 +19,11 @@ specifically to be able to set `name`, `props`, `emits` and `render` in one func
1319
- 🦾 Full TypeScript support.
1420
- ⚡️ Supports Vite, Webpack, Vue CLI, Rollup, esbuild and more, powered by <a href="https://github.com/unjs/unplugin">unplugin</a>.
1521

16-
### Discussion
22+
### See Also
1723

1824
- [Related issue](https://github.com/vuejs/core/issues/5218#issuecomment-1032107354)
1925
- [RFC](https://github.com/vuejs/rfcs/discussions/430)
2026

21-
## Usage
22-
23-
### Basic example
24-
25-
```vue
26-
<script setup lang="ts">
27-
import { useSlots } from 'vue'
28-
defineOptions({
29-
name: 'Foo',
30-
inheritAttrs: false,
31-
})
32-
const slots = useSlots()
33-
</script>
34-
```
35-
36-
<details>
37-
<summary>Output</summary>
38-
39-
```vue
40-
<script lang="ts">
41-
export default {
42-
name: 'Foo',
43-
inheritAttrs: false,
44-
props: {
45-
msg: { type: String, default: 'bar' },
46-
},
47-
emits: ['change', 'update'],
48-
}
49-
</script>
50-
51-
<script setup>
52-
const slots = useSlots()
53-
</script>
54-
```
55-
56-
</details>
57-
58-
### JSX in `<script setup>`
59-
60-
```vue
61-
<script setup lang="tsx">
62-
defineOptions({
63-
render() {
64-
return <h1>Hello World</h1>
65-
},
66-
})
67-
</script>
68-
```
69-
70-
<details>
71-
<summary>Output</summary>
72-
73-
```vue
74-
<script lang="tsx">
75-
export default {
76-
render() {
77-
return <h1>Hello World</h1>
78-
},
79-
}
80-
</script>
81-
```
82-
83-
</details>
84-
85-
## Installation
86-
87-
```bash
88-
npm i unplugin-vue-define-options -D
89-
```
90-
91-
<details>
92-
<summary>Vite</summary><br>
93-
94-
```ts
95-
// vite.config.ts
96-
import DefineOptions from 'unplugin-vue-define-options/vite'
97-
import Vue from '@vitejs/plugin-vue'
98-
99-
export default defineConfig({
100-
plugins: [Vue(), DefineOptions()],
101-
})
102-
```
103-
104-
<br></details>
105-
106-
<details>
107-
<summary>Rollup</summary><br>
108-
109-
```ts
110-
// rollup.config.js
111-
import DefineOptions from 'unplugin-vue-define-options/rollup'
112-
113-
export default {
114-
plugins: [DefineOptions()], // Must be before Vue plugin!
115-
}
116-
```
117-
118-
<br></details>
119-
120-
<details>
121-
<summary>esbuild</summary><br>
122-
123-
```ts
124-
// esbuild.config.js
125-
import { build } from 'esbuild'
126-
127-
build({
128-
plugins: [
129-
require('unplugin-vue-define-options/esbuild')(), // Must be before Vue plugin!
130-
],
131-
})
132-
```
133-
134-
<br></details>
135-
136-
<details>
137-
<summary>Webpack</summary><br>
138-
139-
```ts
140-
// webpack.config.js
141-
module.exports = {
142-
/* ... */
143-
plugins: [require('unplugin-vue-define-options/webpack')()],
144-
}
145-
```
146-
147-
<br></details>
148-
149-
<details>
150-
<summary>Vue CLI</summary><br>
151-
152-
```ts
153-
// vue.config.js
154-
module.exports = {
155-
configureWebpack: {
156-
plugins: [require('unplugin-vue-define-options/webpack')()],
157-
},
158-
}
159-
```
160-
161-
<br></details>
162-
163-
#### TypeScript Support
164-
165-
```jsonc
166-
// tsconfig.json
167-
{
168-
"compilerOptions": {
169-
// ...
170-
"types": ["unplugin-vue-define-options/macros-global" /* ... */]
171-
}
172-
}
173-
```
174-
17527
## Sponsors
17628

17729
<p align="center">

0 commit comments

Comments
 (0)