(isoDateString) => { const dateFormat = new Date(isoDateString); const options = { year: "numeric", month: "long", day: "numeric" }; return dateFormat.toLocaleDateString("en-US", options); }

Tutorial: Vue 3 Apps with DevTools

Introduction

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

Prerequities

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:

yarn dev:shell-vue3

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: yarn dev:chrome
Open Chrome
Go to Extensions
Turn on "Developer Mode"
Click "Load unpacked"

Setup Vue 3 app Show Vue Devtools connected!

Final Thoughts

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!