exportExpose

Stability: experimental ⚠️ Experimental feature, use at your risk

Transform export statement as defineExpose params in Vue SFC script-setup.

Features	Supported
Vue 3	✅
Nuxt 3	?
Vue 2	✅
Volar Plugin	✅

Usage

Support these syntaxes:

• local variable/function/class
• export with alias
• export from other file
• namespace export
• rename export

1. local variable/function/class

<script setup lang="ts">
export const foo: string = 'foo',
  bar = 10
export let baz: string | undefined
export var qux = fn()
export const { a, b, c } = { a: 1, b: 2, c: 3 }

export function fn() {}
export class A {}
</script>

Compiled Code

<script setup lang="ts">
const foo: string = 'foo',
  bar = 10
let baz: string | undefined
const qux = fn()
const { a, b, c } = { a: 1, b: 2, c: 3 }

function fn() {}
class A {}

defineExpose({
  foo,
  bar,
  baz,
  qux,
  a,
  b,
  c,
  fn,
  A,
})
</script>

2. export with alias

<script setup lang="ts">
const foo = ''

export { foo as foo1 }
</script>

Compiled Code

<script setup lang="ts">
const foo = 'foo'

defineExpose({
  foo1: foo,
})
</script>

3. export from other file

App.vue

<script setup lang="ts">
export { foo, foo as bar, type Foo } from './types'
</script>

types.ts

const foo = 'foo'
type Foo = string

export { foo, type Foo }

Compiled Code

<script setup lang="ts">
import {
  foo as __MACROS_expose_0,
  foo as __MACROS_expose_1,
  type Foo,
} from './types'
defineExpose({
  foo: __MACROS_expose_0,
  bar: __MACROS_expose_1,
})
</script>

4. namespace export

App.vue

<script setup lang="ts">
export * as foo from './types'
</script>

types.ts

export const foo = 'foo'

Compiled Code

<script setup lang="ts">
import * as __MACROS_expose_0 from './types'
defineExpose({
  foo: __MACROS_expose_0,
})
</script>

5. rename export

<script setup lang="ts">
const foo = 1,
  bar = 1

export { foo } from './types'
export * as bar from './types'
</script>

Compiled Code

<script setup lang="ts">
import { foo as __MACROS_expose_0 } from './types'
import * as __MACROS_expose_1 from './types'

const foo = 1,
  bar = 1
defineExpose({
  foo: __MACROS_expose_0,
  bar: __MACROS_expose_1,
})
</script>

Limitations

Currently does't support these following cases:

// 1. export all ❌
export * from '../types'

// 2. export default ❌
const a = 'a'
export default a

Volar Configuration

// tsconfig.json
{
  "vueCompilerOptions": {
    "target": 3,
    "plugins": [
      "@vue-macros/volar/export-expose",
      // ...more feature
    ],
  },
}

Contributors

Kevin Deng

Changelog

Last edited about 11 hours ago

View full history

4e2cca7-refactor: remove dev condition from exports