Webflow Vite Plugin

Overview

The Webflow Vite Plugin is designed to help you quickly set up a Webflow extension structure with the framework you want to use, such as React, Vue, or TypeScript, using Vite. This plugin ensures that you can work with frameworks easily and get the benefit of hot reload features, making your development process more efficient and organized.

Features

• Simple to use
• Allows hot reload
• Works on Webflow in real-time
• Provides hosting link to use the extension (not recommended)

Installation

Install using npm, yarn, pnpm, or bun as a devDependency:

npm install webflow-vite-plugin --save-dev

Usage

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import webflowVitePlugin from 'webflow-vite-plugin';

export default defineConfig({
  plugins: [
    vue(),
    webflowVitePlugin({
      extension: {
        name: 'webflow',
        publicDir: 'public',
        size: 'default',
        appVersion: '2',
      },
      apply: 'build',
    }),
  ],
});

Type

interface Options {
    extension: {
        name: string;
        publicDir: string;
        size: "default" | "compact" | "comfortable" | "large";
        appVersion: "2";
    },
    apply: 'build' | 'serve';
}

Example

Contributing

If you would like to contribute to this project, please fork the repository and submit a pull request. We welcome all contributions!

License

This project is licensed under the MIT License. See the LICENSE file for more details.

Contact

If you have any questions or feedback, please open an issue on the GitHub repository.

By using webflow-vite-plugin with Vite, you can ensure that you can work with frameworks easily and get the benefit of hot reload features, or just host the designer extension yourself (not recommended), making your development process more efficient and organized.