nuxt.config.ts

import welcomescreen from './app/components/welcomescreen'
import { pwa } from './app/config/pwa'
import { appDescription } from './app/constants/index'

export default defineNuxtConfig({
  modules: [
    '@vueuse/nuxt',
    '@nuxt/fonts',
    '@pinia/nuxt',
    '@vite-pwa/nuxt',
    'nuxt-typed-router',
    '@nuxt/icon',
    '@nuxt/eslint',
    '@nuxt/image',
  ],

  experimental: {
    payloadExtraction: false,
    renderJsonPayloads: true,
    typedPages: true,
  },

  imports: {
    autoImport: true,
  },

  css: [
    '@/assets/styles/main.scss',
  ],

  nitro: {
    esbuild: {
      options: {
        target: 'esnext',
      },
    },
    prerender: {
      crawlLinks: true,
      routes: ['/'],
    },
  },

  app: {
    head: {
      viewport: 'width=device-width,initial-scale=1',
      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: 'icon', href: '/favicon.ico', sizes: 'any' },
      ],
      meta: [
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        { name: 'description', content: appDescription },
        { name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent' },
        { name: 'msapplication-TileColor', content: '#3aa39f' },
        { name: 'theme-color', content: '3aa39f' },
      ],
      noscript: [
        { children: 'JavaScript is required' },
      ],
    },
    pageTransition: { name: 'page', mode: 'out-in' },
    layoutTransition: { name: 'layout', mode: 'out-in' },
  },

  pwa,

  devtools: {
    enabled: false,
  },

  devServer: {
    loadingTemplate: (data) => {
      return welcomescreen({
        ...data,
        appName: 'FurniHub',
      })
    },
  },

  eslint: {
    config: {
      standalone: false,
    },
  },

  future: {
    compatibilityVersion: 4,
  },

  fonts: {
    families: [
      { name: 'Darker Grotesque', provider: 'google' },
      { name: 'Raleway', provider: 'google' },
    ],
  },

  image: {
    inject: true,
    quality: 80,
  },

  icon: {
    componentName: 'NuxtIcon',
  },

  pinia: {
    storesDirs: ['./app/stores/**'],
  },

  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@use "@/assets/styles/_variables.scss" as *;',
        },
      },
    },
  },

  compatibilityDate: '2024-04-03',
})