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 | 中文
- 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)
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
}
}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.
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 projectOpen 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!