Narcissistic Project Managers

    TypeScript icon, indicating that this package has built-in type declarations

    0.1.12 • Public • Published

    vite + wasm pic

    🦀 Vite plugin for rust wasm-pack, it's simple.

    npm npm npm

    Quick start

    Make sure wasm-pack installed correctly.

    Clone this repo or download the zip file, extract the example folder.

      |-- my-crate       # rust project folder, there is a Cargo.toml in it
      |-- src            # front end source code
      |   |-- index.ts   # entry point
      |-- index.html     # html entry
      |-- vite.config.ts # vite config file
      |__ package.json   # npm config file

    Install npm develop dependencies, in example folder run:

    yarn install
    # or
    # npm install

    After that you can build rust project to WebAassembly by using wasm-pack.

    wasm-pack build ./my-crate --target web

    Now the my-crate module is ready, start vite dev server.

    yarn dev
    #npm run dev

    Done, if below is showing.

      vite v2.6.5 dev server running at:
      > Local: http://localhost:3000/
      ready in 169ms.

    Install manually

    yarn add vite vite-plugin-wasm-pack -D
    # or
    # npm i vite vite-plugin-wasm-pack vite -D


    Add this plugin to vite.config.ts

    import { defineConfig } from 'vite';
    import wasmPack from 'vite-plugin-wasm-pack';
    export default defineConfig({
      // pass your local crate path to the plugin
      plugins: [wasmPack('./my-crate')]

    Add script to package.json

    "scripts": {
      "dev": "vite",
      "build": "vite build"

    Don't forget to build your wasm-pack crate first!

    wasm-pack build ./my-crate --target web

    Tips: you can add a wasm script to package.json like this:

    "scripts": {
        "wasm": "wasm-pack build ./my-crate --target web",
        "dev": "yarn wasm && vite",
        "build": "vite build"

    Then, run:

    yarn dev

    This will start dev server, and install my-crate that you built earlier.

    Use wasm-pack package installed via npm

    If you want use a package from npm that built with wasm-pack, like this one test-npm-crate

    you have to pass the package name to the second param of our plugin.


    full example is in ./npm-crate-example folder.

    notice, we only support package build with --target web for now , if a package you use is built without --target web, you should rebuild it.

    like this example [Photon-vite] [source]

    Cache Problem

    I'm not sure if anybody have met the problem that after modified your package, your package don't update.

    That's becasue vite pre bundling your package, you can follow vite guide to solve the problem.

    If you met the problem , or any problems. feel free to create an issue, let me see if I can do something to help you, thanks.



    MIT, see the license file


    npm i vite-plugin-wasm-pack

    DownloadsWeekly Downloads






    Unpacked Size

    14.5 kB

    Total Files


    Last publish


    • nshen121