Nuxt•2mo ago

vite.config.ts vs app.config.ts

2 Replies

Hi @nvme. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Certainly! Here’s a focused comparison of vite.config.ts and app.config.ts in the context of Nuxt, based strictly on the provided knowledge sources: --- vite.config.ts - Purpose: Used to configure Vite, the underlying build tool for Nuxt 3. This file is primarily for build-time and development server configuration, such as adding plugins, customizing the build process, and extending Vite’s behavior. - Usage: You can add plugins (like @vitejs/plugin-vue or Nuxt UI plugins), set up custom build options, and define how your app is bundled. - Example:

  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  import ui from '@nuxt/ui/vite'

  export default defineConfig({
    plugins: [
      vue(),
      ui({
        ui: {
          colors: {
            primary: 'blue',
            neutral: 'zinc'
          }
        }
      })
    ]
  })

  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  import ui from '@nuxt/ui/vite'

  export default defineConfig({
    plugins: [
      vue(),
      ui({
        ui: {
          colors: {
            primary: 'blue',
            neutral: 'zinc'
          }
        }
      })
    ]
  })

See more: Nuxt UI Theme Configuration --- app.config.ts - Purpose: Used to expose public, reactive configuration to your Nuxt application at runtime. This is for app-level settings that are safe to be bundled and sent to the client, such as theme options, site title, or other non-sensitive project configuration. - Usage: Define configuration that can be accessed anywhere in your app using the useAppConfig() composable. Supports hot module replacement (HMR) and can be updated at runtime. - Example:

  export default defineAppConfig({
    title: 'Hello Nuxt',
    theme: {
      dark: true,
      colors: {
        primary: '#ff0000'
      }
    }
  })

  export default defineAppConfig({
    title: 'Hello Nuxt',
    theme: {
      dark: true,
      colors: {
        primary: '#ff0000'
      }
    }
  })

See more: Nuxt App Config --- Key Differences | Feature | vite.config.ts | app.config.ts | |------------------------|---------------------------------------------------|--------------------------------------------------| | Scope | Build tool (Vite) configuration | Public, runtime app configuration | | When Used | At build time and for dev server | At runtime (bundled with client) | | Access in App | Not directly accessible in app code | Accessible via useAppConfig() | | Sensitive Data | Can contain build secrets (not exposed to client) | Should NOT contain secrets (exposed to client) | | Reactivity | No | Yes (reactive, supports HMR) | | Purpose | Plugins, build options, asset handling, etc. | Theme, site title, public config, etc. | --- Summary:
- Use vite.config.ts for build and plugin configuration. - Use app.config.ts for public, reactive app settings that you want to access throughout your Nuxt app at runtime. For more details, see the official Nuxt documentation on Nuxt Configuration and App Config. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@1265695120725119036> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

vite.config.ts vs app.config.ts

Did you find this page helpful?