Add source location to elements

 

 

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?

⭐ this repo

 

license

MIT © siddharthkp