unplugin-vue-named-export's Introduction

unplugin-vue-named-export

Named export for Vue SFC.

Installation

npm i -D unplugin-vue-named-export

Vite

// vite.config.ts
import VueNamedExport from 'unplugin-vue-named-export/vite'

export default defineConfig({
  plugins: [
    VueNamedExport({
      /* options */
    }),
  ],
})

Rollup

// rollup.config.js
import VueNamedExport from 'unplugin-vue-named-export/rollup'

export default {
  plugins: [
    VueNamedExport({
      /* options */
    }),
  ],
}

esbuild

// esbuild.config.js
import { build } from 'esbuild'

build({
  plugins: [
    require('unplugin-vue-named-export/esbuild')({
      /* options */
    }),
  ],
})

Webpack

// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-vue-named-export/webpack')({
      /* options */
    }),
  ],
}

Usage

Use pascal case named exports in Vue SFC.

import { MyComponent } from './MyComponent.vue'
import { MyCard } from './my-card.vue'
import { MyFooter } from './my_footer.vue'

Options

type Options = {
  include?: string | RegExp | (string | RegExp)[]
  exclude?: string | RegExp | (string | RegExp)[]

  /**
   * Convert filename to export name
   * @default pascalCaseFn
   */
  resolveName?: (id: string) => string | Promise<string>
  /**
   * Whether to keep default export
   * @default false
   */
  removeDefault?: boolean
}

Vue Language Tools (Volar)

For Vue Language Tools (Volar) < 2.0, please use [email protected]

Support only pascal case named export for Volar.

// tsconfig.json
{
  // ...
  "vueCompilerOptions": {
    "plugins": ["unplugin-vue-named-export/volar"],

    "namedExport": {
      // defaults to false
      "removeDefault": false,
    },
  },
}