Here are NPM templates to add ZIM to Vue, React, Svelte and Angular using NPM.

Useful links:

Instructions

Download the CODE (green button on main page)
Unzip, copy a desired template folder, and rename it
Drop the folder on an editor such as VS Code.
Open a terminal (CTRL ` )

If you are using React, Vue, Svelte

Run npm install
Run npm run dev

If you are have Angular and haven't done so already, install it globally by running

npm install -g @angular/cli

Run npm install
Run ng serve

And you are good to go.

Helper Modules

The ZIM Helper Modules are available here:

@zimjs/physics | @zimjs/game | @zimjs/three | @zimjs/cam | @zimjs/pizzazz

Follow the instructios on the NPM page

Using ZIM without typescript

If you have a project that doesn't use typescript you can use the samples below to add ZIM to your project

VUE - with zim namespace

<script setup>
  import { onMounted, onBeforeUnmount } from "vue";
  import zim from "zimjs";
  let frame;
  onMounted(() => {
    frame = new zim.Frame({
      scaling: "zim",
      width: 500,
      height: 400,
      color:light,
      ready: () => {
          // put code here
          new zim.Circle(50, red).center().drag();
      }
    });
  });
  onBeforeUnmount(() => {
    frame.dispose();
  });
</script>
<template>
  <div id="zim"></div>
</template>
<style>
</style>

VUE - without zim namespace

<script setup>
  import { onMounted, onBeforeUnmount } from "vue";
  import zim from "zimjs";
  zim.zimplify(); // make zim commands global
  let frame;
  onMounted(() => {
    frame = new Frame({
      scaling: "zim",
      width: 500,
      height: 400,
      color:light,
      ready: () => {
          // put code here
          new Circle(50, red).center().drag();
      }
    });
  });
  onBeforeUnmount(() => {
    frame.dispose();
  });
</script>
<template>
  <div id="zim"></div>
</template>
<style>
</style>

SVELTE - with zim namespace

<script >
  import { onMount, onDestroy } from "svelte";
  import zim from "zimjs";
  let frame: Frame;
  onMount(() => {
    frame = new zim.Frame({
      scaling: "zim",
      width: 500,
      height: 400,
      color:light,
      ready: () => {
          // put code here
          new zim.Circle(50, red).center().drag();
      }
    });
    function ready() {
      // put code here
      new zim.Circle(50, red).center().drag();
    }
  });
  onDestroy(() => {
    frame.dispose();
  });
</script>
<main>
  <div id="zim">
</main>
<style>
</style>

SVELTE - without zim namespace

<script>
  import { onMount, onDestroy } from "svelte";
  import zim from "zimjs";
  zim.zimplify(); // make zim commands global
  let frame;
  onMount(() => {
    frame = new Frame({
      scaling: "zim",
      width: 500,
      height: 400,
      color:light,
      ready: () => {
          // put code here
          new Circle(50, red).center().drag();
      }
    });
  });
  onDestroy(() => {
    frame.dispose();
  });
</script>
<main>
  <div id="zim">
</main>
<style>
</style>

REACT - with zim namespace

<script>
    import { Component, ReactNode, StrictMode } from "react";
    import "./App.css";
    import zim from "zimjs";
    class ZimFrame extends Component {
      frame: zim.Frame | undefined;
      componentDidMount(): void {
          this.frame = new zim.Frame({
            scaling: "zim",
            width: 500,
            height: 400,
            color:light,
            ready: () => {
                // put code here
                new zim.Circle(50, red).center().drag();
            }
          });
      }
      componentWillUnmount(): void {
          this.frame?.dispose();
      }
      render(): ReactNode {
          return null;
      }
    }
    function App() {
      return (
          <>
          <div>
              {/* Move StrictMove from the root to here */}
              <StrictMode>
              <div id='zim'></div>
              </StrictMode>
              {/* Include ZIM code outside StrictMode */}
              <ZimFrame />
          </div>
          </>
      )
    }
    export default App;
</script>

REACT - without zim namespace

<script>
    import { Component, ReactNode, StrictMode } from "react";
    import "./App.css";
    import zim from "zimjs";
    zim.zimplify(); // make zim commands global
    class ZimFrame extends Component {
      frame: Frame | undefined;
      componentDidMount(): void {
          this.frame = new Frame({
            scaling: "zim",
            width: 500,
            height: 400,
            color:light,
            ready: () => {
                // put code here
                new Circle(50, red).center().drag();
            }
          });
      }
      componentWillUnmount(): void {
          this.frame?.dispose();
      }
      render(): ReactNode {
          return null;
      }
    }
    function App() {
      return (
          <>
          <div>
              {/* Move StrictMove from the root to here */}
              <StrictMode>
              <div id='zim'></div>
              </StrictMode>
              {/* Include ZIM code outside StrictMode */}
              <ZimFrame />
          </div>
          </>
      )
    }
    export default App;
</script>

Special Thanks

Dr Abstract @danzen