Framework Configuration

In this section, we’ll cover how to configure your project for Pacy Devtools. First of all, Framework configuration is not required for sending prompts to your IDEs and AI agents, but it’s usually required for the “Edit” mode to work. For the following setups, the configuration might be optional, but we still recommend using @pacy-dev/plugin-devtools:

• React (v17-18) with Vite
• React (v18) with Remix
• Vue (v3) with Vite
• Svelte with Vite
• Next.js (v14, without Turbo)

@pacy-dev/plugin-devtools is mostly a wrapper around code-inspector at the moment, and it works by adding data attributes to the DOM elements to track the source code location of the elements.

It supports bundlers such as Webpack, Vite, Esbuild, Rspack / Rsbuild, and Turbopack, and frameworks such as React, Vue, Svelte, Preact, Next.js, Nuxt, Solid, Astro, and Qwik.

Usage

Here, confiuration patterns for different setups are listed. There’s no need to specify the framework. You only need to specify the bundler. The plugin does different transforms based on the file extensions such as .jsx, .tsx, .vue, .astro, .svelte, etc.

This section is mostly taken from code-inspector’s configuration instructions.

Vite

React

vite.config.js

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react'
import pacyDevtools from '@pacy-dev/plugin-devtools';

export default defineConfig({
  plugins: [
    pacyDevtools({
      bundler: 'vite',
    }),
    react(),
  ],
});

Caution

For React projects with Vite, if @vitejs/plugin-react or @vitejs/plugin-react-swc is installed, pacyDevtools plugin should come before them in the plugins array.

Vue

vite.config.js

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import pacyDevtools from '@pacy-dev/plugin-devtools';

export default defineConfig({
  plugins: [
    pacyDevtools({
      bundler: 'vite',
    }),
    vue(),
  ],
});

Caution

For Vue projects with Vite, pacyDevtools plugin should come before @vitejs/plugin-vue in the plugins array.

Svelte

vite.config.js

import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte'
import pacyDevtools from '@pacy-dev/plugin-devtools';

export default defineConfig({
  plugins: [
    pacyDevtools({
      bundler: 'vite',
    }),
    svelte(),
  ],
});

Caution

For Svelte projects with Vite, pacyDevtools plugin should come before @sveltejs/vite-plugin-svelte in the plugins array.

Others

vite.config.js

import { defineConfig } from 'vite';
import pacyDevtools from '@pacy-dev/plugin-devtools';

export default defineConfig({
  plugins: [
    pacyDevtools({
      bundler: 'vite',
    }),
    // Add your framework plugins here
  ],
});

Webpack

webpack.config.js

import pacyDevtools from '@pacy-dev/plugin-devtools';

module.exports = () => ({
  plugins: [
    pacyDevtools({
      bundler: 'webpack',
    }),
  ],
});

Next.js

Next.js ≤ 14.x

next.config.js

const pacyDevtools = require('@pacy-dev/plugin-devtools');

const nextConfig = {
  webpack: (config, { dev, isServer }) => {
    config.plugins.push(pacyDevtools({ bundler: 'webpack' }));
    return config;
  },
};

module.exports = nextConfig;

Next.js 15.0.x ~ 15.2.x

next.config.js

import type { NextConfig } from 'next';
const pacyDevtools = require('@pacy-dev/plugin-devtools');

const nextConfig: NextConfig = {
  experimental: {
    turbo: {
      rules: pacyDevtools({
        bundler: 'turbopack',
      }),
    },
  },
};

export default nextConfig;

Next.js ≥ 15.3.x

next.config.js

import type { NextConfig } from 'next';
const pacyDevtools = require('@pacy-dev/plugin-devtools');

const nextConfig: NextConfig = {
  turbopack: {
    rules: pacyDevtools({
      bundler: 'turbopack',
    }),
  },
};

export default nextConfig;

Important

In some Next.js versions, Turbopack can be on or off via the --turbopack flag in package.json (e.g. "dev": "next dev --turbopack"). Before setting the bundler option to turbopack or webpack, be sure to check the dev command in package.json.

Esbuild

esbuild.config.js

const esbuild = require('esbuild');
import pacyDevtools from '@pacy-dev/plugin-devtools';

esbuild.build({
  plugins: [pacyDevtools({ bundler: 'esbuild', dev: () => true })],
});

Rspack

rspack.config.js

import pacyDevtools from '@pacy-dev/plugin-devtools';

module.exports = {
  plugins: [
    pacyDevtools({
      bundler: 'rspack',
    }),
    // other plugins...
  ],
};

Rsbuild

rsbuild.config.js

import pacyDevtools from '@pacy-dev/plugin-devtools';

module.exports = {
  // other config...
  tools: {
    rspack: {
      plugins: [
        pacyDevtools({
          bundler: 'rspack',
        }),
      ],
    },
  },
};

Vue CLI

vue.config.js

import pacyDevtools from '@pacy-dev/plugin-devtools';

module.exports = {
  // ...other config
  chainWebpack: (config) => {
    config.plugin('@pacy-dev/plugin-devtools').use(
      pacyDevtools({
        bundler: 'webpack',
      })
    );
  },
};

Nuxt

For nuxt3.x :

nuxt.config.js

import { pacyDevtools } from '@pacy-dev/plugin-devtools';

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  vite: {
    plugins: [pacyDevtools({ bundler: 'vite' })],
  },
});

For nuxt2.x :

nuxt.config.js

import { pacyDevtools } from '@pacy-dev/plugin-devtools';

export default {
  build: {
    extend(config) {
      config.plugins.push(pacyDevtools({ bundler: 'webpack' }));
      return config;
    },
  },
};

Astro

astro.config.mjs

import { defineConfig } from 'astro/config';
import { pacyDevtools } from '@pacy-dev/plugin-devtools';

export default defineConfig({
  vite: {
    plugins: [pacyDevtools({ bundler: 'vite' })],
  },
});

Acknowledgement

@pacy-dev/plugin-devtools internally uses code-inspector. Thanks to all its contributors. You can surely use it directly, but we chose to wrap it in a plugin since we’re using it with the following non-default settings:

hideDomPathAttr: true,
hotKeys: false,
hideConsole: true,
pathType: 'absolute'