Vue.js Studies Day 1

I’m putting this core curriculum structure together to accomplish two things.

  1. Learn Vue.js for my own use.
  2. Teach others Vue.js.

The following is my general outline of what I think should be covered for knowledge of Vue.js. I’d love any input, additions, subtractions (i.e. is something not specifically Vue.js related?)

The Vue.js App.

  1. Creating a Vue App.
  2. Features of Vue.js.
  • Declarative Rendering
  • Reactivity Fundamentals
  • Attribute Binding
  • Conditional Rendering
  • List Rendering
  • Event Handling
  • Class & Style Binding
  • Computed Properties
  • Components & Props
    • Registration
    • Props
    • Events
    • Fallthrough Attributes
    • Slots
    • Provide/inject
    • Async Components
  • Communicating Events
  • Form Input
  • Lifecycle Hooks


  • Single File Components
  • Vuex
    • Global State
    • Updating State
    • Fetching State
    • Error Handling
  • Vue Router Essentials
    • URL Parameters
    • Pagination
    • Nested Routes
    • Redirect & Alias
    • Programmatic Navigation
    • Error Handling & 404s
    • Flash Messages
    • In-Comopnent Route Guards
    • Global and Per-Route Guards
  • Axios API Calls
  • Dynanic Routing
  • Deploying
  • Scaling

Unit Testing Vue 3

  • Writing tests with Jest
  • Testing Props & User Interaction
  • Testing Emitted Events
  • Testing API Calls
  • Stubbing Child Components


  • CSS & Debugging
  • Working with Assets
  • Getting Vite Going

There will be a number of changes to this but the ideas & topical coverage are all there. The ordering will also, very likely, have. a number of changes. For example I’m already thinking that Vite should be up at the beginning of coverage just like the list of ways to get up and running. As I create additional posts on these topics, I’ll link the topics in this post to the topics on the other pages.

JSON Web Tokens

JSON Web Tokens, one hears all about them all the time. But what exactly are they? I’ve used them a thousand times myself but I never really checked out exactly what they are. So this post fills that gap for me, and hopefully it’s useful to a few of you readers out there too.

What is a JSON Web Token?

JSON Web Token, or JWT, is open standard RFC 7519 for compact and self-contained secure information transmission between two parties using JSON objects. For a refresher, JSON stands for JavaScript Object Notation. JWTs provide security between parties by being signed, which can be used the verify the integrity of the claims contained. JWTs can be signed using a secret or a public / private key pair using RSA or ECDSA. JWTs can also be encrypted to hide those claims as well.

What are JWTs good for? When should you use a JWT?

The most common, and what I’ve found the most recommended use of JWTs, is for API authentication or server-to-server authorization.

JWT Structure

Paraphrased and summarized using the Wikipedia example here.

The header identifies which algorithm generated the signature, such as HMAC-SHA256, as indicated in the example below.

  "alg": "HS256",
  "typ": "JWT"

Then the contenxt, or payload, contains the claims. There are seven Registered Claim Names (RCN) as standard fields commonly included in tokens. Custom claims can also be included, the following is the At Time claim, designated iat and custom claim of loggedInAs. The others include: iss (issuer), sub (subject), aud (audience), exp (expiration time), nbf (not before time), iat (issued at time), and jti (JWT ID). For these and many other claims the IANA has a resource here.

  "loggedInAs": "admin",
  "iat": 1422779638

The signature securely validates the token. It’s calculated through encoding the header and payload using Base64url encoding per RFC 4648 and concatenated with a period as the seperator. This string is run through a cryptographic algorithm specified in the header (i.e. HMAC SHA 256). A function signature would look something like this.

  base64urlEncoding(header) + '.' +

All concatenated together the token would then look like this.


Do and Do Nots

  • Do not use JWTs as session tokens. At least in general, they have a wider range of features and a wider scope. Session tokens are a different beast and using JWTs can increase potential mistakes. Some other issues with this is a JWT doesn’t simply can’t be removed at the end of a session, as it is self-contained without a central authority, and another is that they’re relatively large for such a purpose.
  • Do use JWTs for API Authentication. This is the most common use for JWTs today, as it fits the use case and in many ways was designed specifically for it.
  • Do use a library or some other known way to generate JWT tokens. Don’t just randomly generate a string that looks like a JWT. I’ve seen people just generate a big ole’ wad of text that looks like a JWT before but then it is literally just a big wad of text, you can’t fake a JWT, and in turn when it’s verified or processed by a library for authentication purposes you’ll end up with errors and other issues.

JSON – JavaScript Object Notation

JSON (JavaScript Object Notation), a lightweight data-interchange format. It’s relatively easy to read for us humans, which is nice, and is a subset of the JavaScript Programming Language Standard (ECMA-262 3rd Edition – December 1999).

JSON is a text format, and even though it’s a subset of JavaScript, is language independent. The conventions are of the C-family of languages like C, C++, C#, Java, JavaScript, and others.

There are two structures to JSON; a collection of name value pairs and ordered lists of values. For more details check out the organization. A few examples for reference.

A simple JSON object.


An array of JSON objects.

        color: "red",
        value: "#f00"
        color: "green",
        value: "#0f0"
        color: "blue",
        value: "#00f"
        color: "cyan",
        value: "#0ff"
        color: "magenta",
        value: "#f0f"
        color: "yellow",
        value: "#ff0"
        color: "black",
        value: "#000"

A JSON object using a list.

    "cars":["Ford", "BMW", "Fiat"]  

Choosing Circles


With Twitter under new management combined with the urge to leave over the last number of years, I’ve left my account and moved to a more specific circle of connections on as me If you want to keep receiving my feed of this and that; tech, bicycle, train and travel, heavy metal, war related tweets – at least until Russia is defeated and removed from Ukraine, and all the other random brain waves I did tweet – bounce over to Mastadon and startup an account, follow me and I’ll follow you back, and we’ll continue on like old times!

MINOR UPDATE: Dec 4th, 2022. I’m now thinking I may just delete my Twitter account soon. With the mass exodus that has occurred, the remainder of accounts seem to be an even greater cesspool of right wing, pseudo fascist, tankie, annoyances than before. I guess I could do a mass unfollow, but just nuking my account seems like an ideal thing to do. Albeit, I will probably still keep my @Adron for as long as Twitter exists. But I’m seriously leaning toward “deletion” vs. staying as a fly on the wall, there just isn’t much upside left.


I’ve also kicked off a cohost account. Which I did this ages ago, but I’m intending to start putting actual blurbs and tidbits there, so we’ll see how that goes. It’s located here @ It seems to be, at this point, a hybrid between Twitter, Mastadon, and blogging.

I’ve updated by Github Page

That’s the based page located here It’s a neat Github feature and has all my up to date links to areas I exist in on this ole’ world wide web.

Finally, ThrashingCode Code Streaming & Videos

Ok, it’s more than just code streaming, and as is it’s been a while, but I will be getting the ole’ video vlogging going back on in the coming weeks. right now my intent is before end of year. Just like Cohost, we’ll see how that goes.

That’s where I’m at, at this point, November 9th, 2022. See all of ya out there on the interwebs. πŸ•ΈοΈ

Could not resolve “@popperjs/core”

I keep getting this error on running dev. Albeit it doesn’t appear I’m getting it in production.

I run.

npm run dev

Then everything appears to be ok, with the standard message like this from vite.

  vite v2.9.9 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 740ms.

But then, once I navigate to the site to check things out.

X [ERROR] Could not resolve "@popperjs/core"

      6 β”‚ import * as Popper from '@popperjs/core';
        β•΅                         ~~~~~~~~~~~~~~~~

  You can mark the path "@popperjs/core" as external to exclude it from the bundle, which will
  remove this error.

…and this error annoyingly crops up.

11:36:23 PM [vite] error while updating dependencies:
Error: Build failed with 1 error:
node_modules/bootstrap/dist/js/bootstrap.esm.js:6:24: ERROR: Could not resolve "@popperjs/core"
    at failureErrorWithLog (C:\Users\Adron Hall\Codez\estuary\node_modules\esbuild\lib\main.js:1603:15)
    at C:\Users\Adron Hall\Codez\estuary\node_modules\esbuild\lib\main.js:1249:28
    at runOnEndCallbacks (C:\Users\Adron Hall\Codez\estuary\node_modules\esbuild\lib\main.js:1034:63)
    at buildResponseToResult (C:\Users\Adron Hall\Codez\estuary\node_modules\esbuild\lib\main.js:1247:7)
    at C:\Users\Adron Hall\Codez\estuary\node_modules\esbuild\lib\main.js:1356:14
    at C:\Users\Adron Hall\Codez\estuary\node_modules\esbuild\lib\main.js:666:9
    at handleIncomingPacket (C:\Users\Adron Hall\Codez\estuary\node_modules\esbuild\lib\main.js:763:9)
    at Socket.readFromStdout (C:\Users\Adron Hall\Codez\estuary\node_modules\esbuild\lib\main.js:632:7)
    at Socket.emit (events.js:315:20)
    at addChunk (_stream_readable.js:309:12)
Vite Error, /node_modules/.vite/deps/pinia.js?v=72977742 optimized info should be defined
Vite Error, /node_modules/.vite/deps/bootstrap.js?v=14c3224a optimized info should be defined
Vite Error, /node_modules/.vite/deps/pinia.js?v=72977742 optimized info should be defined
Vite Error, /node_modules/.vite/deps/pinia.js?v=72977742 optimized info should be defined (x2)


…and on and on and on goes these errors. For whatever reason, even though npm install has been run once just get to the point of running npm run dev, there needs to be a subsequent, specifically executed npm install @popperjs/core to install this particular dependency that throws this error.

So that’s it, that’s your fix. Cheers!