unplugin-vue-source

Add a __source prop to all Elements.

• 🌈 Supports Vue2 and Vue3.
• 🪐 Support add to <Component/>.
• ✨ JSX support in .vue, .jsx, .tsx.
• 😃 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.vue
export default function App() {
  return <div>hello word</div>
}

with

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

Install

npm i -D unplugin-vue-source

Vue2

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

Vite

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

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

Rollup

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

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

Webpack

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

Rspack

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

Vue CLI

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

esbuild

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

VueSource({
  // source root path
  root: process.cwd(),
  
  // generate sourceMap
  sourceMap: false,
})