@edanweis/vue-code-layout

vue-code-layout

This is a fork of the original vue-code-layout that adds built-in state persistence with Pinia and optional Supabase integration. You can use it to automatically save and restore layout states across sessions.

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

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
• Built-in state persistence with Pinia (optional)
• Optional Supabase integration for cloud storage
• Layout persistence with versioning (using Supabase)

TypeScript Support

When using TypeScript with the layout store plugin, you may need to override some types. The library currently uses @ts-nocheck in some internal files for compatibility. If you encounter type errors with initialize or other methods, you can extend the types as needed:

declare module '@edanweis/vue-code-layout' {
  interface LayoutStoreOptions {
    supabase?: any;
    stateId?: string;
    additionalData?: Record<string, any>;
    // Add other options as needed
  }
}

Install

Import in main.ts:

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

createApp(App)
  .use(VueCodeLayout)  

For detailed usage, please refer to the documentation.

Documentation

Documentation

Demo

• Getting Started
• Split Layout
• Layout Persistence
• Internationalization

Develop

git clone git@github.com:edanweis/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

• vue3-context-menu
• vue-dock-layout
• vue-dynamic-form A data driven form component for vue3

License

MIT