vue-cli-plugin-source v1.1.0

In

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" />
  </div>
</template>

Out

<div
  id="app"
  data-source="{
    "filename": "root/src/App.vue",
    "start": 0,
    "end": 14
  }"
>
  <img
    alt="Vue logo"
    src="./assets/logo.png"
    data-source="{
      "filename": "root/src/App.vue",
      "start": 17,
      "end": 61
    }"
  />
  <h1
    data-source="{
      "filename": "root/src/HelloWorld.vue",
      "start": 22,
      "end": 26
    }"
  >
    Welcome to Your Vue.js App
  </h1>
</div>

Why?

Useful for building developer tools that can use the location of the element — like UI Devtools

Installation

vue add source

or

yarn add -D vue-cli-plugin-source

vue-cli will automatically pick it up.

like it?

:star: this repo

license

MIT © siddharthkp