Nuxt 3 upgrade with NuxtUI and Tailwind

.dockerignore

@@ -1,6 +1,6 @@
 .env
 .git
-.bin
 .idea
 node_modules
 .nuxt
+certs

.env.example

@@ -1,15 +1,15 @@
-BASE_URL=https://cash-track.app/
-API_URL=https://api.cash-track.app
-WEB_APP_URL=https://my.cash-track.app
-GATEWAY_URL=https://gateway.cash-track.app
+NUXT_PUBLIC_BASE_URL=https://cash-track.app/
+NUXT_PUBLIC_WEB_APP_URL=https://my.cash-track.app
+NUXT_PUBLIC_GATEWAY_URL=https://gateway.cash-track.app
 
-GOOGLE_ANALYTICS_ID=
-GOOGLE_CLIENT_ID=
+NUXT_PUBLIC_GOOGLE_ANALYTICS_ID=
+NUXT_PUBLIC_GOOGLE_CLIENT_ID=
 
-CAPTCHA_CLIENT_KEY=
-CAPTCHA_SECRET_KEY=
+NUXT_PUBLIC_CAPTCHA_CLIENT_KEY=
 
 HTTPS_ENABLED=0
 HTTPS_HOST=dev.cash-track.app
 HTTPS_KEY_PATH=certs/dev.cash-track.app.key
 HTTPS_CRT_PATH=certs/dev.cash-track.app.crt
+
+RELEASE_VERSION=1.3.0-dev-1

.eslintrc

@@ -0,0 +1,17 @@
+{
+    "root": true,
+    "extends": [
+        "@nuxtjs/eslint-config-typescript"
+    ],
+    "rules": {
+        "indent": ["error", 4],
+        "space-before-function-paren": "off",
+        "no-console": "off",
+        "vue/html-indent": ["error", 4],
+        "vue/multi-word-component-names": "off",
+        "vue/no-v-html": "off"
+    },
+    "ignorePatterns": [
+        "./.nuxt", "./node_modules"
+    ]
+}

.github/workflows/build.yml

@@ -18,13 +18,13 @@ jobs:
     steps:
       - name: Checkout repository
         if: github.event_name != 'pull_request'
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       # Login against a Docker registry except on PR
       # https://github.com/docker/login-action
       - name: Login to Docker Hub
         if: github.event_name != 'pull_request'
-        uses: docker/login-action@v2
+        uses: docker/login-action@v3
         with:
           username: ${{ secrets.DOCKER_HUB_USER }}
           password: ${{ secrets.DOCKER_HUB_TOKEN }}
@@ -34,7 +34,7 @@ jobs:
       - name: Extract Docker metadata
         if: github.event_name != 'pull_request'
         id: meta
-        uses: docker/metadata-action@v4
+        uses: docker/metadata-action@v5
         with:
           images: ${{ env.REPO }}
           tags: |
@@ -44,15 +44,15 @@ jobs:
         # Setup BuildX
         # https://github.com/docker/setup-buildx-action
       - name: Setup BuildX
-        uses: docker/setup-buildx-action@v2
+        uses: docker/setup-buildx-action@v3
         id: buildx
         with:
           install: true
 
       # Build and push Docker image with Build (don't push on PR)
       # https://github.com/docker/build-push-action
       - name: Build and push
-        uses: docker/build-push-action@v4
+        uses: docker/build-push-action@v5
         with:
           context: .
           push: ${{ github.event_name != 'pull_request' }}

.github/workflows/deploy.yml

@@ -24,7 +24,7 @@ jobs:
 
     steps:
       - name: Checkout infra repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           repository: ${{ env.INFRA_REPO }}
           ref: ${{ env.INFRA_REPO_REF }}
@@ -49,7 +49,7 @@ jobs:
       - name: Extract Docker metadata
         if: github.event_name != 'pull_request'
         id: meta
-        uses: docker/metadata-action@v4
+        uses: docker/metadata-action@v5
         with:
           images: ${{ env.REPO }}
           tags: |

.github/workflows/quality.yml

@@ -19,12 +19,12 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Install Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: '14'
+          node-version: '20'
           cache: 'npm'
 
       - name: Install dependencies

.gitignore

@@ -1,95 +1,26 @@
-# Created by .ignore support plugin (hsz.mobi)
-### Node template
-# Logs
-/logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-*.crt
-*.key
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# TypeScript v1 declaration files
-typings/
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
-.env
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-
-# next.js build output
-.next
-
-# nuxt.js build output
+# Nuxt dev/build outputs
+.output
+.data
 .nuxt
-
-# Nuxt generate
+.nitro
+.cache
 dist
 
-# vuepress build output
-.vuepress/dist
-
-# Serverless directories
-.serverless
-
-# IDE / Editor
-.idea
-.bin
+# Node dependencies
+node_modules
 
-# Service worker
-sw.*
+# Logs
+logs
+*.log
 
-# macOS
+# Misc
 .DS_Store
+.fleet
+.idea
 
-# Vim swap files
-*.swp
+# Local env files
+.env
+.env.*
+!.env.example
 
 certs

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:14-alpine
+FROM node:20-alpine
 
 ENV APP_ROOT /web
 
@@ -11,6 +11,6 @@ RUN npm ci
 
 ADD . ${APP_ROOT}
 
-RUN npm run build
+RUN npm ci && npm run build
 
-CMD ["npm", "run", "start"]
+CMD ["node", "/web/.output/server/index.mjs"]

Makefile

@@ -29,11 +29,12 @@ start:
 	  --rm \
       --name $(CONTAINER_NAME) \
       -p $(CONTAINER_PORT):3000 \
-      -e BASE_URL=$(BASE_URL) \
-      -e API_URL=$(API_URL) \
-      -e WEB_APP_URL=$(WEB_APP_URL) \
-      -e GATEWAY_URL=$(GATEWAY_URL) \
-      --env-file .env \
+      -e NUXT_PUBLIC_BASE_URL=$(NUXT_PUBLIC_BASE_URL) \
+      -e NUXT_PUBLIC_WEB_APP_URL=$(NUXT_PUBLIC_WEB_APP_URL) \
+      -e NUXT_PUBLIC_GATEWAY_URL=$(NUXT_PUBLIC_GATEWAY_URL) \
+      -e NUXT_PUBLIC_GOOGLE_ANALYTICS_ID=$(NUXT_PUBLIC_GOOGLE_ANALYTICS_ID) \
+      -e NUXT_PUBLIC_GOOGLE_CLIENT_ID=$(NUXT_PUBLIC_GOOGLE_CLIENT_ID) \
+      -e NUXT_PUBLIC_CAPTCHA_CLIENT_KEY=$(NUXT_PUBLIC_CAPTCHA_CLIENT_KEY) \
       -d \
       $(IMAGE_DEV)
 

api/api.ts

@@ -0,0 +1,8 @@
+import { $fetch } from 'ofetch'
+import type { FetchOptions } from 'ofetch'
+import { useRuntimeConfig } from '#app'
+
+export function useApi<T>(url: string, options: FetchOptions<'json'>): Promise<T> {
+    options.baseURL = useRuntimeConfig().public.gatewayUrl
+    return $fetch<T, 'json'>(url, options)
+}

api/authProvider.ts

@@ -1,25 +1,23 @@
-import { NuxtAxiosInstance } from '@nuxtjs/axios'
-import { LoginResponseInterface } from '~/api/login'
+import type { LoginResponseInterface } from '@/api/login'
+import { useApi } from '@/api/api'
 
 export interface GoogleAuthRequestInterface {
     token: string
 }
 
 export function googleAuthProvider(
-    http: NuxtAxiosInstance,
     data: GoogleAuthRequestInterface,
     captchaChallenge: string
 ): Promise<LoginResponseInterface> {
-    return http.$post<LoginResponseInterface>(
+    return useApi<LoginResponseInterface>(
         '/api/auth/provider/google',
         {
-            token: data.token,
-        },
-        {
+            method: 'POST',
+            body: data,
             headers: {
-                'X-CT-Captcha-Challenge': captchaChallenge,
+                'X-CT-Captcha-Challenge': captchaChallenge
             },
-            withCredentials: true,
+            credentials: 'include'
         }
     )
 }

api/email.ts

@@ -1,9 +1,11 @@
-import { NuxtAxiosInstance } from '@nuxtjs/axios'
+import { useApi } from '@/api/api'
 
-export function confirmEmail(http: NuxtAxiosInstance, token: string) {
-    return http.$post(
+export function confirmEmail(token: string) {
+    return useApi(
         `/api/auth/email/confirmation/confirm/${token}`,
-        {},
-        { withCredentials: true }
+        {
+            method: 'POST',
+            credentials: 'include'
+        }
     )
 }