chore: upgrade to Vue3/Vuetify3

nuxt.config.js

@@ -1,151 +1,61 @@
-import { defineNuxtConfig } from '@nuxt/bridge'
-import translations from './translations'
-import numberFormats from './translations/numberFormats'
+import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
+import { defineNuxtConfig } from 'nuxt/config'
 
 export default defineNuxtConfig({
-  alias: {
-    tslib: 'tslib/tslib.es6.js'
-  },
-  bridge: {
-    meta: true
-  },
   build: {
-    extend (config) {
-      config.module.rules.push({
-        include: /node_modules/,
-        test: /\.mjs$/,
-        type: 'javascript/auto'
-      })
-    },
-    babel: {
-      presets ({ isServer }) {
-        return [
-          [
-            // require.resolve('@nuxt/babel-preset-app'),
-            require.resolve('@nuxt/babel-preset-app-edge'), // For nuxt-edge users
-            {
-              buildTarget: isServer ? 'server' : 'client',
-              corejs: { version: 3 }
-            }
-          ]
-        ]
-      }
-    },
-    loaders: {
-      vue: {
-        prettify: false
-      }
-    },
-    transpile: ['date-fns', '@unhead/vue', 'unhead']
-  },
-  buildModules: [
-    // https://go.nuxtjs.dev/eslint
-    ['@nuxtjs/eslint-module', { exclude: ['graphql/generated', 'node_modules'] }],
-    // https://go.nuxtjs.dev/stylelint
-    '@nuxtjs/stylelint-module',
-    // https://go.nuxtjs.dev/vuetify
-    '@nuxtjs/vuetify'
-  ],
-  css: ['vuetify/dist/vuetify.css', '~/assets/scss/global.scss'],
-  env: {
-    graphqlApi: process.env.GRAPHQL_API
-  },
-  head: {
-    link: [
-      {
-        rel: 'apple-touch-icon',
-        sizes: '180x180',
-        href: '/apple-touch-icon.png'
-      },
-      {
-        rel: 'icon',
-        type: 'image/png',
-        sizes: '32x32',
-        href: '/favicon-32x32.png'
-      },
-      {
-        rel: 'icon',
-        type: 'image/png',
-        sizes: '16x16',
-        href: '/favicon-16x16.png'
-      },
-      { rel: 'manifest', href: '/site.webmanifest' },
-      { rel: 'mask-icon', href: '/safari-pinned-tab.svg', color: '#7f0aff' },
-      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
-      {
-        rel: 'stylesheet',
-        href: 'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons'
-      },
-      {
-        rel: 'stylesheet',
-        href: 'https://fonts.googleapis.com/css?family=Material+Icons'
-      },
-      {
-        rel: 'stylesheet',
-        href: 'https://cdn.materialdesignicons.com/3.3.92/css/materialdesignicons.min.css'
-      }
-    ],
-    meta: [
-      {
-        name: 'viewport',
-        content:
-          'width=device-width, initial-scale=1, user-scalable=no, minimal-ui'
-      }
-    ]
+    transpile: ['vuetify', 'date-fns'],
   },
+  devtools: { enabled: true },
   i18n: {
-    strategy: 'prefix_and_default',
     detectBrowserLanguage: {
       useCookie: true,
       cookieKey: 'nuxt_i18n_redirected',
+      redirectOn: 'root', // recommended
       alwaysRedirect: true,
-      fallbackLocale: 'sv'
+      fallbackLocale: 'sv',
     },
+    langDir: 'translations',
+    lazy: true,
     locales: [
-      {
-        code: 'en',
-        iso: 'en-US'
-      },
-      {
-        code: 'sv',
-        iso: 'sv-SE'
-      }
+      { code: 'sv', name: 'Svenska', file: 'sv.ts' },
+      { code: 'en', name: 'English', file: 'en.ts' },
     ],
     defaultLocale: 'sv',
-    vueI18n: {
-      fallbackLocale: 'sv',
-      messages: translations,
-      numberFormats
-    }
+    vueI18n: './i18n.config.ts', // if you are using custom path, default
   },
   modules: [
-    '@nuxtjs/i18n',
+    (_options, nuxt) => {
+      nuxt.hooks.hook('vite:extendConfig', (config) => {
+        // @ts-expect-error
+        config.plugins.push(
+          vuetify({
+            autoImport: true,
+            // styles: { configFile: "assets/settings.scss" },
+          }),
+        )
+      })
+    },
+    '@nuxtjs/eslint-module',
     '@pinia/nuxt',
-    '@nuxtjs/sentry'
+    '@pinia-plugin-persistedstate/nuxt',
+    '@nuxtjs/i18n',
+    '@nuxt/devtools',
   ],
-  plugins: [
-    '~/plugins/apollo',
-    '~/plugins/i18n',
-    '~/plugins/pinia'
-  ],
-  router: {
-    middleware: ['auth']
-  },
-  sentry: {
-    dsn: 'https://da2e8d42185a4013909d49955432a116@o365290.ingest.sentry.io/5187660',
-    config: {
-      tracing: {
-        tracesSampleRate: 1.0,
-        browserTracing: {},
-        vueOptions: {
-          trackComponents: true
-        }
-      }
-    } // Additional config
+  piniaPersistedstate: {
+    cookieOptions: {
+      sameSite: 'strict',
+    },
+    storage: 'localStorage',
   },
   ssr: false,
-  target: 'static',
-  vuetify: {
-    optionsPath: './vuetify.options.js'
-  }
+  vite: {
+    resolve: {
+      dedupe: ['pinia'],
+    },
+    vue: {
+      template: {
+        transformAssetUrls,
+      },
+    },
+  },
 })