@lmiller1990/vue-devtools-inline

This package provides a browser-side devtools client. It can be used to debug Vue applications inside of same-domain iframes. It also works in any browser-like environment (Chrome, Safari, Firefox, and Edge)

Usage no npm install needed!

<script type="module">
  import lmiller1990VueDevtoolsInline from 'https://cdn.skypack.dev/@lmiller1990/vue-devtools-inline';
</script>

README

vue-inline-devtools

This package provides a browser-side devtools client. It can be used to debug Vue applications inside of same-domain iframes. It also works in any browser-like environment (Chrome, Safari, Firefox, and Edge)

:cd: Installation

Install the package globally:

npm i vue-inline-devtools -D

:rocket: Usage

Using global package

Once you installed the package, you can import it in your application and bind it where you'd like the devtools to render:

import { inlineDevtools } from 'vue-inline-devtools'

// talk to a Vue app rendered inside of a same-domain iframe
inlineDevtools('#container', document.getElementsByTagName('iframe')[0])

This will only work on development build of your app.

:beers: Development

  1. Install all dependencies
yarn
  1. Run:
yarn build

This will watch src folder and compile files on change

  1. Demo:
cd example
yarn install
yarn watch

:lock: License

MIT