nw-vue-devtools

DEPRECATION NOTICE

We are no longer able to automate building from the Vue-DevTools source anymore due to their adoption of Yarn. When Yarn innevitably dies after npm 7 or 8, and they switch back to npm, we may be able to get the automation working again. But until then, there is an alternative that downloads directly from the Chrome Webstore a prebuilt version, then modifies it for NW.js. I recommend using that:

https://github.com/DimPaDev/nw-vue-devtools-prebuilt

This is a devDependency for adding Vue-DevTools into NW.js.

Prerequisites:

You must have Git, Node, and npm installed globally.

Instructions

npm install --save-dev nw-vue-devtools

Add this to your package.json:

"chromium-args": "--load-extension='./node_modules/nw-vue-devtools/extension'",

Vue.js must be in use in your app, and cannot be minified (vue.js not vue.min.js).

You may need to add Vue.config.devtools = true; to your main.js file.

If you are using nwjs-builder-phoenix then add in "chromium-args" to your package.json build.strippedProperties array (more info).

How it works:

This dependency will run an npm script that:

Clones down the latest source code for Vue-DevTools master branch.
Installs the dependencies for Vue-DevTools.
Builds the source code for Vue-DevTools.
Places the built version in node_modules/nw-vue-devtools/extension.
Tries to recover from past failures on future re-runs.
Skips everything if the extension had already been built successfully.

In Use

This package is used by:

https://github.com/nwutils/nw-vue-devtools/network/dependents

Notes

Buble is not running properly, so by the time it gets to Uglify it fails (because Uglify only works with ES5). Removing Uglify allows the build to "succeed" but it doesn't actually work when you move the files and load it in NW.js.

Missing devDependencies:

webpack
webpack-cli
webpack-merge
vue-loader
friendly-errors-webpack-plugin
uglifyjs-webpack-plugin
buble
buble-loader
vue-template-compiler
css-loader
postcss-loader
stylus-loader
style-resources-loader
@vue/ui
d3
url-loader
vue-router
vue-virtual-scroller
vuex
stylus
file-loader

Current workarounds

vue-devtools/packages/shell-chrome/webpackconfig.js

Change this line:

const { createConfig } = require('@vue-devtools/build-tools')

const { createConfig } = require('../build-tools')

vue-devtools/packages/build-tools/src/createConfig.js

Change the Buble transforms to have:

asyncAwait: false,

vue-devtools/packages/build-tools/src/createConfig.js

Change this

require.resolve('@vue-devtools/app-frontend/src/style/imports.styl')

require.resolve('../app-frontend/src/style/imports.styl')

vue-devtools/packages/build-tools/src/createConfig.js remove this

mangle: {
  safari10: false
}

⚙️ Browser devtools extension for debugging Vue.js applications.

vue-devtools Installation Get the Chrome Extension / (beta channel) Get the Firefox Addon / (beta channel) Get standalone Electron app (works with any

23.2k Jan 7, 2023

Identifies Vue components in DevTools Elements panel via HTML comments

Vue Source Overview Vue Source is a global Vue mixin which identifies components in source code by adding HTML comments: The plugin has various option

40 Feb 1, 2022

🍍Automatically Typed, Modular and lightweight Store for Vue using the composition api with DevTools support

9.5k Dec 30, 2022

Cordelia Vue - a VueJS plugin that allows you to add a rich color picker into your web pages

Color picker for web and mobile browsers. Vue plugin version of Cordelia Color Picker library.

2 Aug 29, 2018

Input alphabetic characters into a text box and add the letters together based on their place in the alphabet (a = 1, b = 2, etc.) and display if sum is prime

Input alphabetic characters into a text box and add the letters together based on their place in the alphabet (a = 1, b = 2, etc.) and display if sum is prime. This project was completed as the technical challenge for a job interview.

0 Nov 28, 2021

Vue CLI plugin to add vue-i18n to your Vue Project

🌏 vue-cli-plugin-i18n Vue CLI plugin to add vue-i18n to your Vue Project 🌟 Features vue-i18n basic scaffolding Locale messages in Single File compon

194 Aug 2, 2022

vue-easteregg - Easey add an easteregg to your vue app (default with konami code)

vue-easteregg ADD an easter egg to your vue app ;) template div id="app" {{ title }} easteregg @easter="test" :eggs="eggs" duration="50

13 Sep 17, 2021

A Vue component to add intersection-observer to a Vue component or HTML element.

Vue Intersect A Vue component to add intersection-observer to a Vue component or HTML element. Table of content Introduction Demo Installation Usage P

322 Aug 26, 2022

A Vue.js component that provides "Add to Calendar" functionality, works with Vue 2.X

Vue Add To Calendar A Vue.js renderless component providing 'Add to Calendar' functionality Less than 1kb gzipped Demo What is a renderless component?

133 Aug 20, 2022

Vue Snakke allows you to add a reading progress bar to your Vue 3 project.

Vue 3 utility that enables you to track page scrolling progress.

21 Dec 2, 2022

Example Repo demonstrating how to add the Airbnb config to a Typescript-Vue Project created with create-vue

4 Jul 19, 2022

Set of vue directives to add text restriction to your vue input

Vue-Input-Restriction-Directives Set of useful vue directives to add text restriction to your input No keyboard key validation, just regular expressio

5 Nov 19, 2021

Vue component to add a snowfall on your page

vue-niege Let it snow on your Vue applications! Single File Vue Component for lazy snow storms generation. Come on, let's make your Vue applications j

31 Jul 17, 2022

Vue js add-on to slide text.

Textra A Vue.js add-on to slide your text. demo Installing npm i -D vue-textra Then inside your project, start using it: import Vue from 'vue' import

31 Dec 30, 2022

Vue.js directive to add inputmask library to your inputs (vanilla javascript).

vue-inputmask Vue.js directive to add a mask to your inputs (vanilla javascript). It's a binding for the inputmask library by Robin Herbots https://gi

119 Jan 3, 2023

:running: Vue.js directive to add a document event listener on escape keyup.

vue-esc 🏃 Vue.js directive to add a document event listener on escape keyup. Support Vue.js 2 = [email protected]=2.0.0 [master] Vue.js 1 = [email protected] I

36 May 5, 2022

Add material design ripple effect to your Vue project.

vue-material-design-ripple Add material design ripple effect to your Vue project. Why another ripple plugin? Most of current plugins don't work exactl

31 Dec 15, 2022

Add i18n to your awesome Vue 3 app 🔉

V-Intl 🌏 Intl in your dopeass Vue 3 apps 👨‍🔧 Demo Usage In the docs 📓 Background The package exposes 5 Intl components, viz., Formatter What it do

14 Dec 14, 2022

Clone from latest tag
Notes

Buble is not running properly, so by the time it gets to Uglify it fails (because Uglify only works with ES5). Removing Uglify allows the build to "succeed" but it doesn't actually work when you move the files and load it in NW.js.

Missing devDependencies:

webpack

webpack-cli

webpack-merge

vue-loader

friendly-errors-webpack-plugin

uglifyjs-webpack-plugin

buble

buble-loader

vue-template-compiler

css-loader

postcss-loader

stylus-loader

style-resources-loader

@vue/ui

d3

url-loader

vue-router

vue-virtual-scroller

vuex

stylus

file-loader

Current workarounds

vue-devtools/packages/shell-chrome/webpackconfig.js

Change this line:

const { createConfig } = require('@vue-devtools/build-tools')

to

const { createConfig } = require('../build-tools')

vue-devtools/packages/build-tools/src/createConfig.js

Change the Buble transforms to have:

asyncAwait: false,

vue-devtools/packages/build-tools/src/createConfig.js

Change this

require.resolve('@vue-devtools/app-frontend/src/style/imports.styl')

to

require.resolve('../app-frontend/src/style/imports.styl')

vue-devtools/packages/build-tools/src/createConfig.js remove this

mangle: { safari10: false }
opened by TheJaredWilcurt 1

v1.3.1(Apr 4, 2020)

Added deprecation notice at the end of the install and the top of the README.
Source code(tar.gz)
Source code(zip)
v1.3.0(Mar 3, 2019)
Thanks to @masterjg for finding and fixing this bug.

Code changes since last release:

https://github.com/TheJaredWilcurt/nw-vue-devtools/compare/v1.2.0...v1.3.0

Source code(tar.gz)
Source code(zip)
v1.2.0(Sep 16, 2018)
Thanks to @Ian321 for finding and fixing this bug.

Code changes since last release:

https://github.com/TheJaredWilcurt/nw-vue-devtools/compare/v1.1.1...v1.2.0

Source code(tar.gz)
Source code(zip)
v1.1.1(Jul 19, 2018)

Forgot to bump the version in package.json.
Source code(tar.gz)
Source code(zip)
v1.1.0(Jul 19, 2018)

Had some trouble getting the webpack build for Vue-DevTools working. This release has cleaned that up.
Source code(tar.gz)
Source code(zip)
v1.0.0(Jul 4, 2018)

Source code(tar.gz)
Source code(zip)

devDependency to add Vue-DevTools into NW.js

Related tags

Overview

nw-vue-devtools

DEPRECATION NOTICE

Prerequisites:

Instructions

How it works:

See Also:

In Use

You might also like...

⚙️ Browser devtools extension for debugging Vue.js applications.

Identifies Vue components in DevTools Elements panel via HTML comments

🍍Automatically Typed, Modular and lightweight Store for Vue using the composition api with DevTools support

Cordelia Vue - a VueJS plugin that allows you to add a rich color picker into your web pages

Input alphabetic characters into a text box and add the letters together based on their place in the alphabet (a = 1, b = 2, etc.) and display if sum is prime

Vue CLI plugin to add vue-i18n to your Vue Project

vue-easteregg - Easey add an easteregg to your vue app (default with konami code)

A Vue component to add intersection-observer to a Vue component or HTML element.

A Vue.js component that provides "Add to Calendar" functionality, works with Vue 2.X

Vue Snakke allows you to add a reading progress bar to your Vue 3 project.

Example Repo demonstrating how to add the Airbnb config to a Typescript-Vue Project created with create-vue

Set of vue directives to add text restriction to your vue input

Vue component to add a snowfall on your page

Vue js add-on to slide text.

Vue.js directive to add inputmask library to your inputs (vanilla javascript).

:running: Vue.js directive to add a document event listener on escape keyup.

:running: Vue.js directive to add a document event listener on escape keyup.

Add material design ripple effect to your Vue project.

Add i18n to your awesome Vue 3 app 🔉

Comments

Clone from latest tag

Notes

Missing devDependencies:

Current workarounds

Releases(v1.3.1)

v1.3.1(Apr 4, 2020)

v1.3.0(Mar 3, 2019)

v1.2.0(Sep 16, 2018)

v1.1.1(Jul 19, 2018)

v1.1.0(Jul 19, 2018)

v1.0.0(Jul 4, 2018)

Owner

NW.js Utilities

Identifies Vue components in DevTools Elements panel via HTML comments

Vue Performance Devtool is a browser extension for inspecting the performance of Vue Components.

Visualization and debugging tool built for Vue.js

Handy debugging function for Vue

Provides customizable logging functionality for Vue.js. Compatible with Vue2.

Vue.js Inspector for Mobile Devices

Debug your Vue 2 & 3 code with Ray to fix problems faster

An Electron & Vue.js quick start boilerplate with vue-cli scaffolding, common Vue plugins, electron-packager/electron-builder, unit/e2e testing, vue-devtools, and webpack.

⚡ An Electron & Nuxt.js / Vue.js quick start boilerplate with vue-cli scaffolding, electron-builder, unit/e2e testing, vue-devtools

Convenient Vue wrapper for the add to calendar button snippet, which lets you reliably create beautiful buttons, where people can add events to their calendars.