@open-editor/vue

Add a _debugSource prop to all Elements.

• 🌈 Supports Vue2, Vue3, Nuxt.
• 🪐 Support add to <Component/>.
• ✨ JSX support in .vue, .jsx, .tsx.
• 😃 Supports Vite, Webpack, Vue CLI, Rollup.

For development only

SFC

before

<!-- src/App.vue -->
<template>
  <div>hello word</div>
</template>

after

<!-- src/App.vue -->
<template>
  <div :_debugSource='{ "file": "src/App.vue", "line": 3, "column": 3 }'>hello word</div>
</template>

JSX

before

// src/App.tsx
export default function App() {
  return <div>hello word</div>;
}

after

// src/App.tsx
export default function App() {
  return <div _debugSource={{ file: 'src/App.tsx', line: 3, column: 9 }}>hello word</div>;
}

Install

npm i @open-editor/vue -D

Plugins

You need to make sure that openEditorVue is executed before vue compiles the plugin for execution.

// vite.config.ts
import openEditorVue from '@open-editor/vue/vite';

export default defineConfig({
  plugins: [
    openEditorVue({
      /* options */
    }),
    // other plugins
  ],
});

// rollup.config.js
import openEditorVue from '@open-editor/vue/rollup';

export default {
  plugins: [
    openEditorVue({
      /* options */
    }),
    // other plugins
  ],
};

// webpack.config.js
module.exports = {
  plugins: [
    require('@open-editor/vue/webpack')({
      /* options */
    }),
    // other plugins
  ],
};

// nuxt.config.js
import openEditorVue from '@open-editor/vue/vite';

export default defineNuxtConfig({
  vite: {
    plugins: [
      openEditorVue({
        /* options */
      }),
      // other plugins
    ],
  },
});

Configuration

The following show the default values of the configuration

export interface Options {
  /**
   * 源码根路径 | Source root path
   * @default process.cwd()
   */
  rootDir?: string;
  /**
   * 是否生成 sourceMap | Generate sourceMap
   * @default false
   */
  sourceMap?: boolean;
  /**
   * 包含的文件 | Files to include
   * @default /\.(vue|jsx|tsx)$/
   */
  include?: string | RegExp | (string | RegExp)[];
  /**
   * 排除的文件 | Files to exclude
   * @default /\/node_modules\//
   */
  exclude?: string | RegExp | (string | RegExp)[];
}