Nuxt common library

Common packages, plus a small set of plugins, for OIT Vue frontend apps

NUXT 2 / VUE 2 EOL Updates

One-time setup for your own machine

Get access to HeroDevs npm repository

1. Get the Hero Devs access token. There's only one token, shared across the organization. It's saved in LastPass in the "Shared-OIT-AppEng-Developer" folder, with the item name "HeroDev".

   If you do not have access, then request access from Rose Combs.

2. Run these two commands to update your system's .npmrc file:

   npm set --global @neverendingsupport:registry=https://registry.nes.herodevs.com/npm/pkg/

   npm set --global //registry.nes.herodevs.com/npm/pkg/:_authToken={{HERO DEVS ACCESS TOKEN HERE}}

Changes For Each Project

Step 1 - Update package.json

1. Add the following section to your package.json config:

"overrides": {
  "nuxt": "npm:@neverendingsupport/[email protected]",
  "@nuxt/babel-preset-app": "npm:@neverendingsupport/[email protected]",
  "@nuxt/builder": "npm:@neverendingsupport/[email protected]",
  "@nuxt/cli": "npm:@neverendingsupport/[email protected]",
  "@nuxt/components": "npm:@neverendingsupport/[email protected]",
  "@nuxt/config": "npm:@neverendingsupport/[email protected]",
  "@nuxt/core": "npm:@neverendingsupport/[email protected]",
  "@nuxt/generator": "npm:@neverendingsupport/[email protected]",
  "@nuxt/loading-screen": "npm:@neverendingsupport/[email protected]",
  "@nuxt/nuxt-start": "npm:@neverendingsupport/[email protected]",
  "@nuxt/server": "npm:@neverendingsupport/[email protected]",
  "@nuxt/telemetry": "npm:@neverendingsupport/[email protected]",
  "@nuxt/types": "npm:@neverendingsupport/[email protected]",
  "@nuxt/utils": "npm:@neverendingsupport/[email protected]",
  "@nuxt/vue-app": "npm:@neverendingsupport/[email protected]",
  "@nuxt/vue-renderer": "npm:@neverendingsupport/[email protected]",
  "@nuxt/webpack": "npm:@neverendingsupport/[email protected]",
  "@nuxtjs/youch": "npm:@neverendingsupport/[email protected]",
  "nuxt-start": "npm:@neverendingsupport/[email protected]",
  "vue": "npm:@neverendingsupport/[email protected]",
  "vuetify": "npm:@neverendingsupport/[email protected]",
  "vue-server-renderer": "npm:@neverendingsupport/[email protected]",
  "vue-template-compiler": "npm:@neverendingsupport/[email protected]",
  "@vue/compiler-sfc": "npm:@neverendingsupport/[email protected]",
  "vuex": "npm:@neverendingsupport/[email protected]",
  "vue-router": "npm:@neverendingsupport/[email protected]",
  "serialize-javascript": "^6.0.2"
}

2. If you have @byu-oit/nuxt-common in your dependencies, then bump its version to 3.0.2. If you are directly importing Nuxt and/or Vue, then skip to the next step.

"dependencies": {
        [ ... ]
        "@byu-oit/nuxt-common": "3.0.2",
        [ ... ]
}

3. Before running npm install, visually inspect your package.json to see if you have any of the overridden packages already listed in dependencies, devDependencies, and/or peerDependencies. If so, then copy the version numbers from the overrides entries into the existing dependency entries.

4. Run npm install. If you missed a direct dependency (previous step), then npm install will fail with the message Override for [package name] conflicts with direct dependency. If you get that message, then copy the version number from the overrides entry into the existing dependency entry, and run npm install again.

That should be everything required for local testing. Run your code and make sure everything works.

Step 2 - Github Actions updates

Everywhere in your .github/workflows files where you set up Node (most commonly via uses: actions/setup-node), add the following step immediately after setup but before any npm commands:

      - name: HeroDevs
        run: |
          npm set --global @neverendingsupport:registry=https://registry.nes.herodevs.com/npm/pkg/ && \
          npm set --global //registry.nes.herodevs.com/npm/pkg/:_authToken=${{secrets.HERO_DEVS_ACCESS_TOKEN}}

That HERO_DEVS_ACCESS_TOKEN secret is already set for the whole byu-oit Github organization, so no need to individually set it up for your project.

( -- end of Nuxt 2 EOL instructions -- )

Initial installation of this package

This package uses Nuxt 2, which has some... quirks when used with Node 18 or above. To get a clean installation, you must use the --legacy-peer-deps flag for the initial installation:

• DELETE any existing package-lock.json
• Run npm install --legacy-peer-deps
• Bizarrely, you can now run npm install without that legacy flag; the resulting package-lock will be different than if you run it without first running the legacy-flag version

One of the sub-dependencies of Nuxt 2 also requires a legacy OpenSSL environment flag for all nuxt commands. In your package.json, for each script that runs the nuxt command, prepend

cross-env NODE_OPTIONS=--openssl-legacy-provider 

For example:

  "scripts": {
    "dev": "cross-env NODE_OPTIONS=--openssl-legacy-provider nuxt",
    "build": "cross-env NODE_OPTIONS=--openssl-legacy-provider nuxt build",
    "start": "cross-env NODE_OPTIONS=--openssl-legacy-provider nuxt start",
  }

• AppDynamics

Add AppDynamics monitoring.

Usage: Set a build environment variable NUXT_ENV_APP_DYNAMICS_KEY, or a config environment variable appDynamicsKey

• Axios

Automatically attempt token refresh on WSO2 401 error, and automatically pop up a Vuetify dialog on any other response errors

Usage: enabled automatically. To disable the error popup (e.g. if you want to completely handle the error yourself), either set a global environment variable NUXT_ENV_NO_AXIOS_AUTO_ERROR, or add noAutoError to the config for individual axios calls, e.g.

  this.$axios.$get(url, { noAutoError: true })

• Filters

A few convenient Vue filters

• moment - a slightly-enhanced vue-moment filter that won't complain about null values

• yearTerm - convert year-term integers to full text, e.g. "20213" becomes "Spring 2021"

• stripHtml - strip HTML tags, i.e. extract plain-text content from HTML content

• Implicit Grant

Wraps WSO2 implicit grant process. Defaults the entire site to forced auto-login on load.

Usage: Set environment variables NUXT_ENV_OAUTH_CLIENT_ID and NUXT_ENV_OAUTH_CALLBACK_URL To disable auto-login (i.e. allow some public pages), set environment variable NUXT_ENV_OAUTH_DISABLE_AUTO_LOGIN