feat: Migrate to Nuxt 3 (#923)

* Uninstall @nuxt/bridge

* Bump nuxt from 2.16.3 to 3.4.2

* Migrate @vue/vue2-jest to @vue/vue3-jest

* Bump @vue/test-utils from 1.3.0 to 2.3.2

* Rebuild package lock against trunk

* Migrate jest config to nuxt 3

* Migrate stubbing to vue test utils 2

  https://test-utils.vuejs.org/migration/#mocks-and-stubs-are-now-in-global

* Migrate wrapper unmount to vue test utils 2

  https://test-utils.vuejs.org/migration/#destroy-is-now-unmount-to-match-vue-3

* Migrate config to nuxt 3

* Disable google analytics and sentry modules

* Migrate default layout to app.vue

* Migrate snake to vue 3

config/base.js

@@ -2,23 +2,12 @@ export default () => ({
   app: {
     buildAssetsDir: '_'
   },
-  bridge: {
-    meta: true,
-    vite: true
-  },
   css: [
     '~/assets/stylesheets/app.scss'
   ],
   dir: {
-    static: '../public'
-  },
-  generate: {
-    subFolders: false
-  },
-  loading: {
-    color: '#3B8070'
+    public: '../public'
   },
-  modern: 'client',
   srcDir: 'src',
   ssr: false,
   target: 'static',

jest.config.cjs

@@ -26,15 +26,21 @@ module.exports = {
     '\\.(xml)$': '<rootDir>/spec/mocks/file-mock.js',
     '\\.(wasm)$': '<rootDir>/spec/mocks/file-mock.js',
     '~(.*)$': '<rootDir>/src/$1',
-    '#imports': '<rootDir>/node_modules/@nuxt/bridge/dist/runtime/head/composables.mjs'
+    '#imports': '<rootDir>/node_modules//nuxt/dist/app/composables/index.js'
   },
   setupFilesAfterEnv: [
     '<rootDir>/spec/setup.js'
   ],
   testEnvironment: 'jsdom',
+  testEnvironmentOptions: {
+    customExportConditions: [
+      'node',
+      'node-addons'
+    ]
+  },
   transform: {
     '^.+\\.(js|cjs|mjs)$': 'babel-jest',
-    '^.+\\.vue$': '@vue/vue2-jest'
+    '^.+\\.vue$': '@vue/vue3-jest'
   },
   transformIgnorePatterns: [
     `<rootDir>/node_modules/(?!(${transformPatterns.join('|')}))`

nuxt.config.js

@@ -1,18 +1,18 @@
 import 'dotenv/config'
-import { defineNuxtConfig } from '@nuxt/bridge'
+import { defineNuxtConfig } from 'nuxt/config'
 import deepmerge from 'deepmerge'
 import base from './config/base.js'
-import googleAnalytics from './config/google-analytics.js'
-import sentry from './config/sentry.js'
+// import googleAnalytics from './config/google-analytics.js'
+// import sentry from './config/sentry.js'
 
 export default async () => {
 
   const env = { ...process.env, baseDir: __dirname }
 
   const factories = [
     base,
-    googleAnalytics,
-    sentry,
+    // googleAnalytics,
+    // sentry,
   ]
 
   let config = {}