October 21, 2020
Tutorial: Vue 3 Apps with DevTools
What's up everyone? Today I am here to talk with you about something near and dear to almost every Vue developer's hearts. DevTools.
While most people typically install the Vue DevTools, currently the support for Vue 3 is still in development, so this makes it a little bit trickier since sometimes the build won't work.
As a result, it may be faster to build the latest version of DevTools locally rather than wait for the next publishing cycle
There is a beta version in the marketplace, but in the event you're having issues with it detecting your Vue instance on a Vue 3 CLI scaffolded project, this
Before we get started, you should have the following prerequisites:
- Node.js LTS (v12) - https://nodejs.org/en/
- yarn Classic - https://classic.yarnpkg.com/en/docs/install/#mac-stable
- Chrome - https://www.google.com/chrome/
- Vue CLI - https://cli.vuejs.org/
- Vue.js DevTools - https://github.com/vuejs/vue-devtools
Setting Up Vue DevTools
To get setup, run the following commands:
# Install dependencies yarn # Build dependencies yarn build:watch
From this point, we have two choices:
- Setup a local development environment
- Setup local Chrome extension
Setup Local DevTools Development Environment
Once our dependencies have built, all we need to run a local DevTools environment is to run:
Once you run this command, you will be given a URL (default http://localhost:8090) that will serve the
shell-vue3 application to test the DevTools with.
Setup Local Chrome Extension
However, the primary purpose of this tutorial is to show you how to setup a local Chrome extension so we can connect it with other Vue 3 apps!
Assuming you still have
yarn build:watch running, you can do the following steps:
- Start local Chrome extension environment:
- Open Chrome
- Go to Extensions
- Turn on "Developer Mode"
- Click "Load unpacked"
Setup Vue 3 app Show Vue Devtools connected!
And with that, you're now fully equipped to not only run Vue.js DevTools locally with your Vue 3 app; but you can also contribute back to the project if you want as well!