Vue Source

Overview

Vue Source is a global Vue mixin which identifies components in source code by adding HTML comments:

!inspector

The plugin has various optional features:

- render comments as class names, tags, or file paths
- manual or automatic activation based on environment variable
- attach JavaScript references to DOM comments
- inspect in Vue Devtools v4

Installation and usage

Download via NPM:

``
npm install vue-source --save
`

Import and run from your main application file:

`js
import VueSource from 'vue-source'

Vue.use(VueSource)
`

The default settings are:

- render comments as class names
- activate in development, but not in production
- attach component and file references to rendered comments

Settings

You can pass settings to Vue.use() to change Vue Source's behaviour:

`js
import Vue from 'vue'
import VueSource from 'vue-source'

Vue.use(VueSource, {
type: 'file',
active: true,
debug: true
})
`

$3

Render comment as class name, file path, or source code tag:

> type : ('class'|'file'|'tag')

Class names:

!comment-class

File paths:

!comment-file

Tags:

!comment-component

Where files don't exist (i.e router links) the plugin will attempt to render classes or tags instead.

$3

Activate or disable at startup:

> active : ('auto'|true|false|expression)

Pass:

- 'auto' (the default) which checks process.env.NODE_ENV to run in anything except production
- true to always enable
- false to always disable
- any other expression which evaluates to true/false to choose whether to enable

$3

Attach references to the rendered comment:

> debug : (true|false)

By default, the plugin attaches the following references to the DOM comment:


- vm: the Vue instance
- tag: the markup tag
- file: the source file path
- class: the source class name
- inspect(): a function to inspect the component in Vue's DevTools (v4 feature)

To access these references in your browser's Vue Devtools:

1. inspect the HTML comment in the Elements panel
2. reference it in the Console via $0

!debug

Set debug to false` if you want to disable this functionality.