Integration

with traditional backend (require version >= 0.5.4)

overlay does not display in development mode

When integrating with a traditional backend, in development mode, you need to inject vite-plugin-checker's runtime manually.

<!-- if development -->
<script type="module" src="http://localhost:5173/@vite/client"></script>
<script type="module" src="http://localhost:5173/main.js"></script>
<!-- add below for vite-plugin-checker -->
<script type="module" src="http://localhost:5173/@vite-plugin-checker-runtime-entry"></script>

with Nuxt3

overlay does not display in development mode

There're two ways to use vite-plugin-checker with Nuxt3 for now.

Use vite-plugin-checker as a normal Vite plugin (require version >= 0.5.5)

There are a few steps to do:

1. Add vite-plugin-checker typescript vue-tsc @types/node as devDependencies to your Nuxt project.

2. Create a Vue component with content:

   // vite-plugin-checker.vue
   <script setup>
   import('/@vite-plugin-checker-runtime-entry')
   </script>

3. Add vite-plugin-checker to vite.plugins in nuxt.config.ts.

   import { checker } from 'vite-plugin-checker'
   // https://nuxt.com/docs/api/configuration/nuxt-config
   export default defineNuxtConfig({
     vite: {
       plugins: [
         checker({
           vueTsc: true,
         }),
       ],
     },
   })

4. Import component above in the root component of your Nuxt project to have a global error overlay.

   <script setup lang="ts">
   import Vpc from './vite-plugin-checker.vue'
   </script>
   
   <template>
     <!-- your app code -->
     <DevOnly>
       <ClientOnly>
         <Vpc />
       </ClientOnly>
     </DevOnly>
   </template>

You are all set in both development and build mode.

Enable vite-plugin-checker as a built-in Nuxt functionality

WARNING

The error overlay can not be displayed in this way, we'll try to fix this with Nuxt in the future.

See Nuxt's official documentation's typecheck section.