unplugin-vue-source

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

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

with

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

jsx without

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

with

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

Install

npm i -D unplugin-vue-source

Vue2

The bad news is that for jsx syntax support, you can't use it with jsx-vue2 because it doesn't support props that start with _. Click issues to learn more. The good news is that there are no problems with using babel-plugin-transform-vue-jsx.

jsx example

// 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

// 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.

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

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

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

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

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

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

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

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

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

Configuration

The following show the default values of the configuration

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 | StackBlitz | | Vite + Vue3 | StackBlitz | | Webpack + Vue3 | StackBlitz |