Provide a Vue 3 new marco `defineOptions`.

三咲智子

Last update: Jan 1, 2023

Overview

unplugin-vue-define-options

Provide a Vue 3 new marco defineOptions.

✨ With this marco, you can use Options API in script-setup.
⚡️ Supports Vite, Webpack, Vue CLI, Rollup, esbuild and more, powered by unplugin.

Related issue

Example:

<script setup lang="ts">
defineOptions({
  name: 'Foo',
  inheritAttrs: false,
})

defineProps<Props>()
// ...
</script>

and it will transform to

<script lang="ts">
export default {
  name: 'Foo',
  inheritAttrs: false,
}
</script>

<script lang="ts" setup>
defineProps<Props>()
// ...
</script>

Installation

npm i unplugin-vue-define-options -D

// vite.config.ts
import DefineOptions from 'unplugin-vue-define-options/vite'
import Vue from '@vitejs/plugin-vue'

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

Comments

'defineOptions' is not defined.
Describe the bug

First of all . thanks for code

Probably a mistake because I missed something, I'm sorry for that

I use this plugin as described in the README 1、npm i unplugin-vue-define-options -D 2、config vite.config.js

import DefineOptions from 'unplugin-vue-define-options/vite' import Vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [Vue(), DefineOptions()], })

3、config tsconfig.json

{ "compilerOptions": { // ... "types": ["unplugin-vue-define-options/macros-global" /* ... */] } }

Then vscode will prompt me 'defineOptions' is not defined.

the defineOptions does not exist in .eslintrc-auto-import.json auto-imports.d.ts

Reproduction

https://github.com/yangliguo7/vite-project

System Info

npm run dev

Used Package Manager

npm

Validations

[X] Follow our Code of Conduct

[X] Read the Contributing Guide.

[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.

[X] The provided reproduction is a minimal reproducible of the bug.
opened by yangliguo7 14
Feature request: copy locally-declared variables in generated `
opened by Greasen 5

添加 eslint 支持？目前只能通过 "no-undef": "off" ，但是这样 eslint 失去了意义

Describe the bug

'defineOptions' is not defined.eslint[no-undef](https://eslint.org/docs/rules/no-undef)

Reproduction

defineOptions({ name: 'SystemRole', });

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (12) x64 Intel(R) Core(TM) i7-10710U CPU @ 1.10GHz
    Memory: 752.65 MB / 15.83 GB
  Binaries:
    Node: 14.18.1 - D:\Software\nvm-node\node.EXE
    Yarn: 1.22.19 - D:\Software\nvm-node\yarn.CMD
    npm: 6.14.15 - D:\Software\nvm-node\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.819.0), Chromium (107.0.1418.56)
    Internet Explorer: 11.0.22621.1

Used Package Manager

npm

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guide.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
[X] The provided reproduction is a minimal reproducible of the bug.

opened by kaivanwong 4

升级vue后， vite.config.js中 transformShortVmodel 报错

Clear and concise description of the problem

Type 'import("C:/Users/kodaku/Desktop/vue-hq/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-core/dist/compiler-core").NodeTransform' is not assignable to type 'import("C:/Users/kodaku/Desktop/vue-hq/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-core/dist/compiler-core").NodeTransform'. Types of parameters 'node' and 'node' are incompatible. Type 'import("C:/Users/kodaku/Desktop/vue-hq/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-core/dist/compiler-core").RootNode | import("C:/Users/kodaku/Desktop/vue-hq/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-core/dist/compiler-core").TemplateChildNode' is not assignable to type 'import("C:/Users/kodaku/Desktop/vue-hq/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-core/dist/compiler-core").RootNode | import("C:/Users/kodaku/Desktop/vue-hq/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-core/dist/compiler-core").TemplateChildNode'. Type 'RootNode' is not assignable to type 'RootNode | TemplateChildNode'. Type 'import("C:/Users/kodaku/Desktop/vue-hq/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-core/dist/compiler-core").RootNode' is not assignable to type 'import("C:/Users/kodaku/Desktop/vue-hq/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-core/dist/compiler-core").RootNode'. Types of property 'type' are incompatible. Type 'import("C:/Users/kodaku/Desktop/vue-hq/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-core/dist/compiler-core").NodeTypes.ROOT' is not assignable to type 'import("C:/Users/kodaku/Desktop/vue-hq/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-core/dist/compiler-core").NodeTypes.ROOT'

Alternative

No response

Additional context

No response

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guide.
[X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

needs reproduction

opened by selegiline 4

feat(setupComponent): resolve valid expression

Description

fix https://github.com/sxzz/unplugin-vue-macros/issues/131

Linked Issues

https://github.com/sxzz/unplugin-vue-macros/issues/131

Additional context

opened by SnowingFox 4

Add Tabs for Docs

Like Tauri

I think we could combine bundlers and package managers into multi tabs

https://vue-macros.sxzz.moe/guide/getting-started#installation
https://vue-macros.sxzz.moe/guide/getting-started#vite-first-class-support
https://vue-macros.sxzz.moe/macros/short-vmodel#vite-integration

/cc @alexzhang1030 Would you like to make it?

opened by sxzz 4

按照文档基本示例运行发生错误

Describe the bug

按照文档基本示例提供的代码运行错误：

<script setup lang="ts">
import { useSlots } from 'vue'
defineOptions({
  name: 'Foo',
  inheritAttrs: false,
  props: {
    msg: { type: String, default: 'bar' },
  },
  emits: ['change', 'update'],
})
const slots = useSlots()
</script>

报错信息：

[vite] Internal server error: unplugin-vue-define-options SyntaxError: defineOptions() please use defineProps or defineEmits instead.

搜索 issuse 发现一条相关的问题：https://github.com/sxzz/unplugin-vue-macros/issues/19

但不能够消除我的困惑，根据作者提供的错误示例模板来看，我以为指的是 defineOptions 不能够与 defineProps 同时进行使用。

之后我创建了一个 Vite + Vue3 模板，按照文档中的基本示例提供的代码运行时也发生相同的错误。

所以我不明白这是属于一个 Bug 还是文档有误或者解释的不够清楚？如果这不属于一个 Bug 的话希望作者能重新编辑一下文档。

Reproduction

none

System Info

System:
  OS: Windows 10 10.0.25163
  CPU: (8) x64 Intel(R) Core(TM) i7-6700K CPU @ 4.00GHz
  Memory: 16.64 GB / 31.94 GB
Binaries:
  Node: 18.3.0 - C:\Program Files\nodejs\node.EXE
  npm: 8.12.1 - C:\Program Files\nodejs\npm.CMD
Browsers:
  Edge: Spartan (44.25163.1010.0), Chromium (98.0.1108.50)
  Internet Explorer: 11.0.25163.1000

Used Package Manager

npm

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guide.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
[X] The provided reproduction is a minimal reproducible of the bug.

opened by Ryongyon 4

添加 eslint 支持？目前只能通过 "no-undef": "off" ，但是这样 eslint 失去了意义

Describe the bug

Reproduction

System Info

Used Package Manager

Validations

Provide a Vue 3 new marco `defineOptions`.

Related tags

Overview

unplugin-vue-define-options

Installation

Comments

'defineOptions' is not defined.

Describe the bug

Reproduction

System Info

Used Package Manager

Validations

Feature request: copy locally-declared variables in generated `

升级vue后， vite.config.js中 transformShortVmodel 报错

Clear and concise description of the problem

Suggested solution

Alternative

Additional context

Validations

feat(setupComponent): resolve valid expression

Description

Linked Issues

Additional context

Add Tabs for Docs

按照文档基本示例运行发生错误

Describe the bug

Reproduction

System Info

Used Package Manager

Validations

[@vue/compiler-sfc]