Update Nuxt.js and Vuetify.js in CWA (client web app).

[victorkane]

Nuxt 1.0 to 2.x, Vuetify from 1.0 to 1.5

If it were from scratch

See #2 for how we originally scaffolded cwa (.

We want to modernize create-nuxt-app, for new projects and for updating existing projects

We also want to use npx to run create-nuxt-app instead of installing it globally, since npx will always utilize the latest version of create-nuxt-app and everything else (at least up to the point where it updates its dependency templates). See the create-nuxt-app repo.

sudo npm uninstall -g create-nuxt-app
create-nuxt-app cannot
-bash: /usr/local/bin/create-nuxt-app: No such file or directory

cd dev
node -v
v10.15.1
npx create-nuxt-app checkitout
$ npx create-nuxt-app checkitout
npx: installed 379 in 12.169s
> Generating Nuxt.js project in /home/reactpathways/dev/nuxt-test/checkitout
? Project name checkitout
? Project description My unreal Nuxt.js project
? Use a custom server framework none
? Choose features to install Prettier, Axios
? Use a custom UI framework vuetify
? Use a custom test framework none
? Choose rendering mode Universal
? Author name victorkane
? Choose a package manager npm
  To get started:

	cd checkitout
	npm run dev

  To build & start for production:

	cd checkitout
	npm run build
	npm start

cd checkitout
cat package.json
{
  "name": "checkitout",
  "version": "1.0.0",
  "description": "My unreal Nuxt.js project",
  "author": "victorkane",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "cross-env": "^5.2.0",
    "nuxt": "^2.4.0",
    "vuetify": "^1.5.0",
    "vuetify-loader": "^1.2.0",
    "@nuxtjs/axios": "^5.3.6"
  },
  "devDependencies": {
    "nodemon": "^1.18.9",
    "eslint-config-prettier": "^3.1.0",
    "eslint-plugin-prettier": "2.6.2",
    "prettier": "1.14.3",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2"
  }
}

Updating from significantly earlier versions

Nuxt.js

Read the Migration guide for 2-0-0, and an upgrade not for 2.4.0 probably taking the long but peaceful approach in release notes for 2.0.

• stop app
• create new dev branch
• edit package.json to new releases (nuxt.js and vuetify.js)

diff --git a/cwa/package.json b/cwa/package.json
index ac0822b..c0d2943 100644
--- a/cwa/package.json
+++ b/cwa/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "np-lso",
+  "name": "dcmrw-cwa",
   "version": "1.0.0",
   "description": "DurableDrupal Content Migration Rescue Website",
   "author": "victorkane",
@@ -13,19 +13,21 @@
     "precommit": "npm run lint"
   },
   "dependencies": {
-    "@nuxtjs/axios": "^5.0.0",
+    "cross-env": "^5.2.0",
+    "nuxt": "^2.4.0",
+    "@nuxtjs/axios": "^5.3.6",
     "@nuxtjs/dotenv": "^1.1.1",
     "@nuxtjs/markdownit": "^1.2.1",
-    "nuxt": "^1.0.0",
-    "vuetify": "^1.0.19"
+    "vuetify": "^1.5.0",
+    "vuetify-loader": "^1.2.0"
   },
   "devDependencies": {
-    "cross-env": "^5.0.1",
+    "nodemon": "^1.18.9",
     "babel-eslint": "^8.2.1",
     "eslint": "^5.0.1",
     "eslint-loader": "^2.0.0",
     "eslint-plugin-vue": "^4.0.0",
     "stylus": "^0.54.5",
-    "stylus-loader": "^3.0.1"
+    "stylus-loader": "^3.0.2"
   }
 }

• delete node-modules dir, and package-lock.json
• perform npm install
• perform npm run dev

It worked!!!

But warning in terminal: WARN Classic mode for store/ is deprecated and will be removed in Nuxt 3.

Warnings in browser console:

Source map error: request failed with status 404
Resource URL: http://durabledrupal.net:4071/_nuxt/vendors.app.js
Source Map URL: colors.js.map[Learn More]
Classic mode for store/ is deprecated and will be removed in Nuxt 3.

So read the other release notes, all the way up from 2.0 to 2.4 to find out about this. But for now we're good to go.

Everything seems to be working!

Vuetify.js

(successfully updated!! See above)

Read Release notes for Vuetify 1.5.0 all the way down to 1.0