Noosphere Possibilities Maximized

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

    0.1.8 • 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.



    MIT, see the license file


    npm i @pognetwork/vite-plugin-wasm-pack

    DownloadsWeekly Downloads






    Unpacked Size

    13.3 kB

    Total Files


    Last publish


    • explodingcamera