nuxt.config.ts

nuxt.config.ts

import { fileURLToPath } from 'node:url'
import { config } from 'dotenv'

const nodeEnviroment = process.env.NODE_ENV // 'development' or 'production'
const productionOnly = nodeEnviroment === 'production'

// Load all environment variables from .env files
// config({ path: `.env.production` })
config({ path: `.env.${nodeEnviroment}` })

// const isProduction = process.env.NODE_ENV === 'production'
// const isStaging = process.env.NODE_ENV === 'staging'

export default defineNuxtConfig({

  ssr: true,

  nitro: {
    // Enable static rendering in production mode. This can help improve
    // performance, but it can also cause issues with image paths in
    // development mode. Therefore, we only enable it in production mode.
    // static: isProduction,
    static: productionOnly,
    // Disable link crawling for pre-rendering. This can help speed up
    // build times if we have a lot of pages, but it means that we'll
    // need to manually specify which pages to pre-render.
    prerender: { crawlLinks: false, ignore: [
      path => ['/app', '/auth', '/companies', '/jobs'].some(start => path.startsWith(start)),
    ] },

    // Specify the regions for Vercel deployment. This can help improve
    // performance by deploying skriptjobs closer to our users.
    vercel: {
      regions: ['arn1'], // Stockholm, Sweden
    },
  },

  routeRules: {
    '/': { prerender: true },
    '/app/**': { ssr: false },
    '/auth/**': { ssr: false },
  },

  /*
  prints out hook names and timings on the server,
  and logs hook arguments as well in the browser.
*/
  debug: true,

  // plugins: ['~/plugins/settings.ts'],

  modules: [
    '@unocss/nuxt',
    '@pinia/nuxt',
    '@vueuse/nuxt',
    '@nuxtjs/tailwindcss',
    // '@nuxtjs/color-mode',
    'unplugin-fonts/nuxt',
    'vuetify-nuxt-module',
    '@nuxt/image',
    'nuxt-lodash',
    '@nuxt/content',

  ],

  unocss: {
    icons: true,
  },

  image: {
    quality: 30,

    presets: {
      cover: {
        modifiers: {
          fit: 'fill',
        },
      },
    },
  },

  // colorMode: {
  //   preference: appSettings.defaultTheme,
  //   storageKey: 'color-scheme',
  //   classPrefix: '',
  //   classSuffix: '',
  // },

  // unfonts: {
  //   custom: {
  //     families: [
  //       {
  //         name: 'Product Sans',
  //         local: 'Product Sans',
  //         // 👉 ProductSans-Regular.woff
  //         src: 'assets/fonts/*.woff',
  //       },
  //     ],
  //   },
  // },

  imports: {
    injectAtEnd: true,
    dirs: ['stores', 'scripts/**/*.{ts,js}', 'data/**/*.{ts,js}', 'utils/**/*.{ts,js}'],

    presets: [
      {
        from: '~/composables/app-setttings',
        imports: ['appSettings'],
      },

      {
        from: 'vuetify',
        imports: ['useDisplay', 'useTheme'],
      },

      {
        // import * as Yup from 'yup'
        from: 'yup',
        imports: [['*', 'Yup']],
      },

    ],
  },

  components:
  [{
    path: '@/components',
    pathPrefix: false,
  }],

  vite: {

    vue: {
      script: {
        defineModel: true,
        propsDestructure: true,
      },
    },

    optimizeDeps: {
      // pre-bundle 'yup' and avoid app reload after optimized.
      include: ['yup'],
      exclude: ['vuetify'],
      entries: [
        './**/*.vue',
      ],
    },

    define: {
      'process.env.DEBUG': false,
    },

    resolve: {
      alias: {
        '@': fileURLToPath(new URL('.', import.meta.url)),
      },
    },

  },

  // ℹ️ Disable source maps until this is resolved: https://github.com/vuetifyjs/vuetify-loader/issues/290
  sourcemap: {
    server: false,
    client: false,
  },

  css: [
    'assets/css/globals.css',
    'assets/css/progress-bar.css',
    'assets/vuetify/main.scss',
    'assets/vuetify/settings.scss',
    'assets/css/vuetify.css',
  ],

  // Aparently the vuetify moduleOptions are contemplating hybrid rendering modes.
  // in a non-ssr environment, the client will crash becasue hints are not available.
  // so we inject ssrClientHints only if ssr is enabled allowing hybrid rendering.

  hooks: () => {
    return {
      'modules:before': ({ nuxt }) => {
        const isSSR = nuxt.options.render.ssr

        nuxt.options.vuetify = {
          moduleOptions: {
            ssrClientHints: isSSR
              ? {
                  prefersColorScheme: true,
                  prefersColorSchemeOptions: {},
                  viewportSize: true,
                }
              : {},

          },
        }
      },

    }
  },

  vuetify: {
    moduleOptions: {
      styles: {
        configFile: 'assets/vuetify/settings.scss',
      },
    },
  },

  build: {

    /*
This is only for increasing non ES6+ browser compatibility.
Arguabke if this should be enabled or not, also from a build performance standpoint.
*/
    // transpile: ['vuetify'],
  },

  features: {
    inlineStyles: false,
  },

  experimental: {
    typedPages: true,

    // https://github.com/nuxt/nuxt/issues/24391
    // renderJsonPayloads: false,
  },

  devtools: { enabled: false },

})