# unplugin-vue-source

> Add a __source prop to all Elements

Latest version **0.0.7** (published 2024-07-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install unplugin-vue-source
pnpm add unplugin-vue-source
yarn add unplugin-vue-source
bun add unplugin-vue-source
```

## 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.0.7 |
| Published | 2024-07-17 |
| First published | 2023-09-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=14 |
| Dependencies | 12 |
| Unpacked size | 32.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 27 |
| Author | zjxxxxxxxxx |
| Maintainers | zjxxxxxxxx |

## Links

- npm: https://www.npmjs.com/package/unplugin-vue-source
- Repository: https://github.com/zjxxxxxxxxx/unplugin-vue-source
- Issues: https://github.com/zjxxxxxxxxx/unplugin-vue-source/issues
- npm.io page: https://npm.io/package/unplugin-vue-source

## Dependencies (12)

- [unplugin](https://npm.io/package/unplugin.md) ^1.5.1
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.22.10
- [magic-string](https://npm.io/package/magic-string.md) ^0.30.3
- [@babel/parser](https://npm.io/package/@babel/parser.md) ^7.22.16
- [unist-util-visit](https://npm.io/package/unist-util-visit.md) ^2.0.3
- [@vue/compiler-dom](https://npm.io/package/@vue/compiler-dom.md) ^3.3.4
- [mdast-util-mdx-jsx](https://npm.io/package/mdast-util-mdx-jsx.md) ^0.1.4
- [@rollup/pluginutils](https://npm.io/package/@rollup/pluginutils.md) ^5.0.5
- [@babel/plugin-syntax-jsx](https://npm.io/package/@babel/plugin-syntax-jsx.md) ^7.22.5
- [mdast-util-from-markdown](https://npm.io/package/mdast-util-from-markdown.md) ^0.8.5
- [micromark-extension-mdxjs](https://npm.io/package/micromark-extension-mdxjs.md) ^0.3.0
- [@babel/plugin-syntax-typescript](https://npm.io/package/@babel/plugin-syntax-typescript.md) ^7.22.5

## Recent versions

- 0.0.7 (latest) — 2024-07-17
- 0.0.6 — 2024-07-16
- 0.0.5 — 2024-06-10
- 0.0.4 — 2024-01-02
- 0.0.3 — 2023-12-09
- 0.0.2 — 2023-11-28
- 0.0.1 — 2023-09-23
- 0.0.1-beta.1 — 2023-09-20
- 0.0.1-beta.0 — 2023-09-17

## README

# unplugin-vue-source

[![CI](https://github.com/zjxxxxxxxxx/unplugin-vue-source/actions/workflows/ci.yml/badge.svg)](https://github.com/zjxxxxxxxxx/unplugin-vue-source/actions/workflows/ci.yml)
[![NPM version](https://img.shields.io/npm/v/unplugin-vue-source?color=)](https://www.npmjs.com/package/unplugin-vue-source)
[![MIT](https://img.shields.io/github/license/zjxxxxxxxxx/unplugin-vue-source)](https://opensource.org/licenses/MIT)

Add a \_\_source prop to all Elements.

- 🌈 Supports `Vue2` and `Vue3`.
- 🪐 Support add to `<Component/>`.
- ✨ JSX support in `.vue`, `.jsx`, `.tsx`, `.mdx`.
- 😃 Supports `Vite`, `Webpack`, `Rspack`, `Vue CLI`, `Rollup`, `esbuild`.

> For development only

---

sfc without

```html
<!-- src/App.vue -->
<template>
  <div>hello word</div>
</template>
```

with

```html
<!-- src/App.vue -->
<template>
  <div __source="/src/App.vue:3:3">hello word</div>
</template>
```

---

jsx without

```tsx
// src/App.tsx
export default function App() {
  return <div>hello word</div>;
}
```

with

```tsx
// src/App.tsx
export default function App() {
  return <div __source="/src/App.tsx:3:9">hello word</div>;
}
```

## Install

```bash
npm i -D unplugin-vue-source
```

## Vue2

The bad news is that for `jsx` syntax support, you can't use it with [jsx-vue2](https://github.com/vuejs/jsx-vue2) because it doesn't support props that start with `_`. Click [issues](https://github.com/vuejs/jsx-vue2/issues/310) to learn more. The good news is that there are no problems with using [babel-plugin-transform-vue-jsx](https://github.com/vuejs/babel-plugin-transform-vue-jsx).

[jsx example](./examples//rollup/rollup.config.js)

```ts
// main.ts
import Vue from 'vue';
import VueSource from 'unplugin-vue-source/vue';
import App from './App.vue';

Vue.use(VueSource);

new Vue({
  el: '#app',
  render: (h) => h(App),
});
```

## Vue3

```ts
// main.ts
import { createApp } from 'vue';
import VueSource from 'unplugin-vue-source/vue';
import App from './App.vue';

const app = createApp(App);
app.use(VueSource);
app.mount('#app');
```

## Plugins

You need to make sure that `VueSource` is executed before vue compiles the plugin for execution.

<details>
<summary>Vite</summary><br>

```ts
// vite.config.ts
import VueSource from 'unplugin-vue-source/vite';

export default defineConfig({
  plugins: [
    VueSource({
      /* options */
    }),
    // other plugins
  ],
});
```

<br></details>

<details>
<summary>Rollup</summary><br>

```ts
// rollup.config.js
import VueSource from 'unplugin-vue-source/rollup';

export default {
  plugins: [
    VueSource({
      /* options */
    }),
    // other plugins
  ],
};
```

<br></details>

<details>
<summary>Webpack</summary><br>

```ts
// webpack.config.js
module.exports = {
  plugins: [
    require('unplugin-vue-source/webpack')({
      /* options */
    }),
    // other plugins
  ],
};
```

<br></details>

<details>
<summary>Rspack</summary><br>

```ts
// rspack.config.js
module.exports = {
  plugins: [
    require('unplugin-vue-source/rspack')({
      /* options */
    }),
    // other plugins
  ],
};
```

<br></details>

<details>
<summary>Vue CLI</summary><br>

```ts
// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      require('unplugin-vue-source/webpack')({
        /* options */
      }),
      // other plugins
    ],
  },
};
```

<br></details>

<details>
<summary>esbuild</summary><br>

```ts
// esbuild.config.js
import { build } from 'esbuild';
import VueSource from 'unplugin-vue-source/esbuild';

build({
  plugins: [
    VueSource({
      /* options */
    }),
    // other plugins
  ],
});
```

<br></details>

## Configuration

The following show the default values of the configuration

```ts
export interface Options {
  /**
   * source root path
   *
   * @default process.cwd()
   */
  root?: string;
  /**
   * generate sourceMap
   *
   * @default false
   */
  sourceMap?: boolean;
  /**
   * Array containing the plugins that you want to enable.
   *
   * @default ['jsx', 'typescript']
   */
  babelParserPlugins?: ParserPlugin[];
  /**
   * @default /\.(vue|jsx|tsx|mdx)$/
   */
  include?: string | RegExp | (string | RegExp)[];
  /**
   * @default /\/node_modules\//
   */
  exclude?: string | RegExp | (string | RegExp)[];
}
```

## Playgrounds

| Source code                                                                                     | Online trial                                                                                           |
| ----------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
| [Rollup + Vue2](https://github.com/zjxxxxxxxxx/unplugin-vue-source/tree/main/examples/rollup)   | [StackBlitz](https://stackblitz.com/github/zjxxxxxxxxx/unplugin-vue-source/tree/main/examples/rollup)  |
| [Vite + Vue3](https://github.com/zjxxxxxxxxx/unplugin-vue-source/tree/main/examples/vite)       | [StackBlitz](https://stackblitz.com/github/zjxxxxxxxxx/unplugin-vue-source/tree/main/examples/vite)    |
| [Webpack + Vue3](https://github.com/zjxxxxxxxxx/unplugin-vue-source/tree/main/examples/webpack) | [StackBlitz](https://stackblitz.com/github/zjxxxxxxxxx/unplugin-vue-source/tree/main/examples/webpack) |

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