(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 dependenciesyarn# Build dependenciesyarn 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!