vue-code-layout

A editor layout for Vue
5,793 80
vue vue3 menu vscode editor code layout drag drop tab window dock panel context 编辑器 组件
Install
npm install vue-code-layout
Latest Version:1.2.5
Vue:3
License:MIT
Last Updated:Jul 31, 2026
Links: GitHub  ·  npm
Maintainer: imengyu

vue-code-layout

A Vue editor layout component that like VSCode and can be used to develop web editors.

screenshot

English | 中文

Features

  • Simple and easy to use, small size
  • Support adding panels
  • Support drag and drop panel
  • Support customize panel icons, text, rendering, etc
  • Supports VSCode outer layout and inner editor area layout
  • Support saving and loading data
  • Support defining CSS styles

Install

npm install -save vue-code-layout

Import in main.ts:

import 'vue-code-layout/lib/vue-code-layout.css'
import VueCodeLayout from 'vue-code-layout'

createApp(App)
  .use(VueCodeLayout)

For detailed usage, please refer to the documentation.

Documentation

Documentation

Demo

Develop

git clone git@github.com:imengyu/vue-code-layout.git
cd vue-code-layout
npm install
npm run dev        # Development serve project
npm run build-demo # Build example project
npm run build-lib  # Build library project

Problem

Open source projects require everyone's support to get better and better.

If you encounter any problems, you can submit an issue and I will do my best to solve it for you.

If you have any good modifications, welecome submit a PR!

AD: Author's other project

License

MIT

Related Packages

vue3-drag-split-layout

A split layout for Vue

695 3
code context dock drag drop editor layout menu panel tab +7
@edanweis/vue-code-layout

A Vue editor layout component with built-in persistence

2,424 0
code dock drag drop editor layout panel tab vscode vue +4
@guolao/vue-monaco-editor

Monaco Editor for Vue 2&3 - use the monaco-editor in any Vue application without...

1,506,110 339
code editor vscode vue vue3 monaco text vue-demi vue2
@vue-monaco/editor

Monaco Editor for Vue - use the monaco-editor in Vue2/3 without needing to use p...

14,092 1
code editor vscode vue vue3 monaco text vue-demi vue2
@codemirror/lang-vue

Vue template support for the CodeMirror code editor

71,371,417 29
code editor

Version History

Version Released License
1.2.5 MIT
1.2.4 MIT
1.2.3 MIT
1.2.2 MIT
1.2.1 MIT