Getting started

Create a new Vite project

First you need a new Vite project:

Add the plugin

Next, you need to install the vite-plugin-fable package:

It is important that the post-install script of the plugin did run. The first time this runs, it can take some time.

If for some reason it didn't run, please manually invoke:

Note: you don't need to install Fable as a dotnet tool when using this plugin.

Update your Vite configuration

Lastly, we need to tell Vite to use our plugin:

import { defineConfig } from "vite";
import fable from "vite-plugin-fable";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [fable()],
});

⚠️ Depending on your use-case, you may need to further tweak your configuration.
Check out the recipes page for more tips.

Start Vite

We can now start the Vite dev server:

You should see a bunch of logs:

12:32:42 PM [vite] [fable]: configResolved: Configuration: Debug
12:32:42 PM [vite] [fable]: configResolved: Entry fsproj /home/projects/your-project-folder/App.fsproj
12:32:42 PM [vite] [fable]: buildStart: Starting daemon
12:32:42 PM [vite] [fable]: buildStart: Initial project file change!
12:32:42 PM [vite] [fable]: projectChanged: dependent file /home/projects/your-project-folder/App.fsproj changed.
12:32:42 PM [vite] [fable]: compileProject: Full compile started of /home/projects/your-project-folder/App.fsproj
12:32:42 PM [vite] [fable]: compileProject: fable-library located at /home/projects/your-project-folder/node_modules/@fable-org/fable-library-js
12:32:42 PM [vite] [fable]: compileProject: about to type-checked /home/projects/your-project-folder/App.fsproj.
12:32:44 PM [vite] [fable]: compileProject: /home/projects/your-project-folder/App.fsproj was type-checked.
12:32:44 PM [vite] [fable]: compileProject: Full compile completed of /home/projects/your-project-folder/App.fsproj

And now we can import our code from F# in our index.html:

<script type="module">
  import "/App.fs";
</script>

⚠️ We cannot use <script type="module" src="/App.fs"></script> because Vite won't recognize the .fs extension outside the module resolution. See vitejs/vite#9981