Getting started

Installation

NPM

npm install @unisonjs/core @unisonjs/vue unplugin-unisonjs

Yarn

yarn add @unisonjs/core @unisonjs/vue unplugin-unisonjs

PNPM

pnpm install @unisonjs/core @unisonjs/vue unplugin-unisonjs

Bun

bun install @unisonjs/core @unisonjs/vue unplugin-unisonjs

Vite

// vite.config.ts
import { unisonVue } from "unplugin-unisonjs/vite";

export default defineConfig({
  plugins: [
    unisonVue({
      compiler: false,
      /* options */
    }),
    //...
  ],
});

webpack

// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require("unplugin-unisonjs/webpack")({
      compiler: false,
      /* options */
    }),
    //...
  ],
};

Farm

// farm.config.ts
import { unisonVue } from "unplugin-unisonjs/farm";

export default defineConfig({
  plugins: [
    unisonVue({
      compiler: false,
      /* options */
    }),
    //...
  ],
});

Rollup

// rollup.config.js
import { unisonVue } from "unplugin-unisonjs/rollup";

export default {
  plugins: [
    unisonVue({
      compiler: false,
      /* options */
    }),
    //...
  ],
};

Rolldown

// rolldown.config.js
import { unisonVue } from "unplugin-unisonjs/rolldown";

export default {
  plugins: [
    unisonVue({
      compiler: false,
      /* options */
    }),
    //...
  ],
};

esbuild

// esbuild.config.js
import { build } from "esbuild";
import { unisonVue } from "unplugin-unisonjs/esbuild";

build({
  plugins: [
    unisonVue({
      compiler: false,
      /* options */
    }),
    //...
  ],
});

Astro

// astro.config.mjs
import { defineConfig } from "astro/config";
import { unisonVue } from "unplugin-unisonjs/astro";

// https://astro.build/config
export default defineConfig({
  integrations: [
    unisonVue({
      compiler: false,
      /* options */
    }),
  ],
});

WARNING

Unison.js doesn't work with Tanstack Start

Babel

The compiler includes a Babel plugin which you can use in your build pipeline to run the compiler.

After installing, add it to your Babel config. Please note that it’s critical that the compiler run first in the pipeline:

// babel.config.js
const sharedUnisonConfig = {
  signals: ["ref", "shallowRef", "reactive", "shallowReactive", "readonly"],
  module: "@unisonjs/vue",
};

const UnisonFastRefreshConfig = {
  ...sharedUnisonConfig,
  /* ... */
};

module.exports = function () {
  return {
    plugins: [
      ["babel-plugin-unisonjs-fast-refresh", UnisonFastRefreshConfig],
      // ...
    ],
  };
};

Expo/React Native (Metro)

Due to compatibility issues between Babel plugins and the Metro bundler, no additional configuration is required at the moment. However, Fast Refresh is not currently working.

Creating a Unison component

Unison components are functions that need to be wrapped in the $unison function and return JSX as a function

import { $unison, ref } from "@unisonjs/vue";

const Counter = $unison(() => {
  const count = ref(0);

  setInterval(() => count.value++, 1000);

  return () => (
    <div>
      <p>Count: {count.value}</p>
    </div>
  );
});

New to Vue ?

If you haven't used Vue before, especially the Vue Composition API, I suggest you check out the Vue documentation on reactivity before continuing with this documentation :

• Reactivity Fundamentals

• Computed Properties