Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/calirojas506/vue-inspector

Vue.js Inspector for Mobile Devices
https://github.com/calirojas506/vue-inspector

awesome-vue vue-inspector vue-router vuejs vuejs-components vuex

Last synced: about 1 month ago
JSON representation

Vue.js Inspector for Mobile Devices

Lists

README 

        
# vue-inspector 0.4.3

Vue.js Inspector for Mobile Devices



![](/images/header.png)



## What is vue-inspector?

[![NPM](https://nodei.co/npm/vue-inspector.png?compact=true)](https://npmjs.org/package/vue-inspector)



**vue-inspector** is a basic inspector for Vue.js that works with mobile devices. It could work in a desktop environment, but I do not recommend that; use **Vue.js devtools** instead.



With **vue-inspector** is possible to execute JavaScript code directly in your mobile browser and get error messages generated at run-time. Also inspect the data, props, router links, views/components, computed properties, routes, Vuex and more... inside your Vue.js project.



![](/images/screenshots/desktop/vue-inspector-01.png)



## Features

- Works with Vue.js 2

- Reactive _(of course)_

- Routes, data, Vuex and computed properties inspection

- Integrated JavaScript _(basic)_ console for code execution and messages/errors logging

- Navigation inside components and their children _(with inspection)_

- Responsive and simple UI

- Supports vue-router



## Installing vue-inspector via Yarn or npm

![](/images/npm.png)



Installing with npm:



```shell

npm install --save-dev vue-inspector

```



[![NPM](https://nodei.co/npm/vue-inspector.png?mini=true)](https://npmjs.org/package/vue-inspector)



![](/images/yarn.png)



Using Yarn:

```shell

yarn add --dev vue-inspector

```



## Using vue-inspector from jsDelivr CDN



JavaScript:

```html



```

![](/images/jsdelivr.png)



CSS:

```html



```

## How to use vue-inspector?

Install using npm or Yarn, then add **vue-inspector** _(CSS and JavaScript files)_ to your project. Last step is adding the **<vue-inspector/>** component inside your app wrapper _(**el**)_.



```html



  

  



```

Make sure **vue-inspector** is the last component added.



If you're having issues with the installation, please see any of the available demos in this repository. Currently **vue-inspector** does not support Nuxt, but I'm working on it :)



## Properties

The following properties are available _(all of them are Boolean and optional)_:



|Property|Type|Required|Default value|Description|

|--------|----|--------|-------------|-----------|

|is-visible|Boolean|false|true|Start visible|

|is-minimized|Boolean|false|false|Start minimized|

|hide-vuex|Boolean|false|false|Hide **Vuex** tab from UI|

|hide-components|Boolean|false|false|Hide **Components** tab from UI|

|hide-router|Boolean|false|false|Hide **Router** tab from UI|

|hide-lines|Boolean|false|false|Hide separator lines _(keeping this option in false improves readability)_|



If you hide any of the tabs _(Components, Vuex or Router)_ the console will be shown by default. The console can not be hidden or disabled.



## Screenshots

**Important:** sometimes these screenshots are not updated. Check the demos, so you can see the latest version running ;)



![](/images/screenshots/mobile/01.png)

![](/images/screenshots/mobile/02.png)

![](/images/screenshots/mobile/03.png)

![](/images/screenshots/mobile/04.png)

![](/images/screenshots/mobile/05.png)

![](/images/screenshots/mobile/06.png)

![](/images/screenshots/mobile/07.png)

![](/images/screenshots/mobile/08.png)

![](/images/screenshots/mobile/09.png)

![](/images/screenshots/mobile/10.png)

![](/images/screenshots/mobile/11.png)

![](/images/screenshots/mobile/12.png)



## Demos

All the demos are available for download from this repository. Clone the repository or download the folder **demos**. Also, I've uploaded them to a temporary free hosting account which you can access with your mobile device:



- [Simple demo](http://calirojas1.000webhostapp.com/vue-inspector/demos/simple)

- [CodePen demo](https://codepen.io/calirojas506/full/baqLxb/)

- [vue-router demo](http://calirojas1.000webhostapp.com/vue-inspector/demos/vue-router)

- [webpack demo](http://calirojas1.000webhostapp.com/vue-inspector/demos/webpack)

- [webpack + Vuex demo](http://calirojas1.000webhostapp.com/vue-inspector/demos/webpack-vuex)



![](/images/webpack.png)



**webpack users:** the property **assetsPublicPath** _(in config/index.js)_ was changed to '/vue-inspector/demos/webpack[-vuex]/'. Only for build. It's because I'm deploying the demo to a different directory instead server's root.



## Compatibility

I have tested this tool only with Android phones and tablets. If you have information about the compatibility with iOS, or/and other mobile browsers, please let me know to update this list. I will appreciate any collaboration with compatibility testing. Currently tested/compatible with:



- Firefox for Android

- Google Chrome for Android

- Works in desktop



![](/images/screenshots/desktop/vue-inspector-02.png)



## Pending / In Progress

- Events logging

- Firebase bindings

- Support for Nuxt _(In progress)_



## Changelog

- **January 27th, 2018**

  - Improved support for Date objects

  - Version 0.4.3 released _(npm)_

- **December 26th, 2017**

  - Improved variable type detection

  - **Console** tab removed _(now appears at the bottom)_

  - Basic support for Vuex added _(new tab Vuex)_

  - vue-router support improved _(new tab Router)_

  - JavaScript console improvements

  - UI changes and performance improvements

  - Recursive components

  - New props added: hide-lines, hide-vuex, hide-components, hide-router

  - Optional separator lines to improve readability in devices with small screens _(prop **hide-lines**, by default = false)_

  - New webpack demo using Vuex

  - npm package released, version 0.4.0

  - jsDelivr CDN added

  - Fixed small issue with "lastUpdate" property (patched to 0.4.1 / 0.4.2)

  - Released version 0.4.2

- **December 22th, 2017**

  - Improved support for vue-router

  - Fixed issue with Vuex

  - Version 0.3.1 released

  - npm package updated to 0.3.1 _(please, update your vue-inspector version)_

  - Screenshots updated to 0.3.1

- **December 21th, 2017**

  - UI updates

  - Component rewrite

  - Component prop **is-expanded** removed

  - Project's structure changed

  - New demos added

  - Version 0.3.0 released :)

- **December 19th, 2017**

  - New demo added for webpack integration.

- **December 16th, 2017**

    - **vue-inspector**, beta 0.2 released.

    - Added support for vue-router.

    - New demo created/added, using vue-router to demonstrate how the integration works.

    - Tested in Mozilla Firefox for Android. It works :)

- **December 14th, 2017**

  - **vue-inspector**, beta 0.1 released.



## Stay In Touch



- [Twitter](https://twitter.com/calirojas506)

- [Facebook](https://www.facebook.com/calirojas506)

- [LinkedIn](https://www.linkedin.com/in/cali-rojas-17403334/)

- [YouTube](https://youtube.com/calirojas506)



## License

[MIT](http://opensource.org/licenses/MIT)



Copyright (c) 2017-2018, Cali Rojas