docs: 📝 add readme

README.md

@@ -1,94 +1,131 @@
-<!--
-Get your module up and running quickly.
+<h1 align="center">Nuxt Excalidraw</h1>
 
-Find and replace all on all files (CMD+SHIFT+F):
-- Name: My Module
-- Package name: my-module
-- Description: My new Nuxt module
--->
+<br/>
 
-# My Module
+<p align="center">
+  <a href="https://npmjs.com/package/nuxt-excalidraw">
+    <img alt="Nuxt Excalidraw is released under the MIT license." src="https://img.shields.io/npm/v/nuxt-excalidraw/latest.svg?style=flat&colorA=18181B&colorB=28CF8D"  />
+  </a>
+  <a href="https://npmjs.com/package/nuxt-excalidraw">
+    <img alt="Nuxt Excalidraw is released under the MIT license." src="https://img.shields.io/badge/license-MIT-blue.svg"  />
+  </a>
+  <a href="https://npmjs.com/package/nuxt-excalidraw">
+    <img alt="npm downloads/month" src="https://img.shields.io/npm/dm/nuxt-excalidraw.svg?style=flat&colorA=18181B&colorB=28CF8D"  />
+  </a>
+    <img alt="PRs welcome!" src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat"  />
+</p>
 
-[![npm version][npm-version-src]][npm-version-href]
-[![npm downloads][npm-downloads-src]][npm-downloads-href]
-[![License][license-src]][license-href]
-[![Nuxt][nuxt-src]][nuxt-href]
+<div align="center">
+  <figure>
+    <a href="https://excalidraw.com" target="_blank" rel="noopener">
+      <img src="https://excalidraw.nyc3.cdn.digitaloceanspaces.com/github%2Fproduct_showcase.png" alt="Product showcase" />
+    </a>
+    <figcaption>
+      <p align="center">
+        Add the amazing <a hrer="https://github.com/excalidraw/excalidraw">Excalidraw</a> on your Nuxt 3 project.
+      </p>
+    </figcaption>
+  </figure>
+</div>
 
-My new Nuxt module for doing amazing things.
+<h4><a href="https://excalidraw.com" target="_blank" rel="noopener">▶️ See Excalidraw demo</a></h4>
 
-- [✨ &nbsp;Release Notes](/CHANGELOG.md)
-<!-- - [🏀 Online playground](https://stackblitz.com/github/your-org/my-module?file=playground%2Fapp.vue) -->
-<!-- - [📖 &nbsp;Documentation](https://example.com) -->
+<br/>
 
-## Features
+## 📌 Features
 
-<!-- Highlight some of the features your module provide here -->
-- ⛰ &nbsp;Foo
-- 🚠 &nbsp;Bar
-- 🌲 &nbsp;Baz
+You can use following APIs:
 
-## Quick Setup
+- ✅ [Props](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api/props/)
+- 🚧 [Children Components](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api/children-components)
+- 🚧 [Utils](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api/utils)
+- 🚧 [Constants](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api/constants)
+- 🚧 [Creating Elements programmatically](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api/excalidraw-element-skeleton)
 
-1. Add `my-module` dependency to your project
+Feel free to contribute and get in touch.
+
+## ⚡ Quick Setup
+
+Add `nuxt-excalidraw` dependency to your project
 
 ```bash
 # Using pnpm
-pnpm add -D my-module
+pnpm add -D nuxt-excalidraw
 
 # Using yarn
-yarn add --dev my-module
+yarn add --dev nuxt-excalidraw
 
 # Using npm
-npm install --save-dev my-module
+npm install --save-dev nuxt-excalidraw
 ```
 
-2. Add `my-module` to the `modules` section of `nuxt.config.ts`
+Add `nuxt-excalidraw` to the `modules` section of `nuxt.config.ts`
 
 ```js
 export default defineNuxtConfig({
   modules: [
-    'my-module'
+    'nuxt-excalidraw',
+    // other modules
   ]
 })
 ```
 
-That's it! You can now use My Module in your Nuxt app ✨
-
-## Development
-
-```bash
-# Install dependencies
-npm install
-
-# Generate type stubs
-npm run dev:prepare
+🪶 No configuration is necessary
 
-# Develop with the playground
-npm run dev
+## 👣 Usage
 
-# Build the playground
-npm run dev:build
+The module injects a component called `ExcalidrawBoard` in your NuxtApp.
 
-# Run ESLint
-npm run lint
+The basicest use of it is:
 
-# Run Vitest
-npm run test
-npm run test:watch
+```vue
+<script setup lang="ts">
+</script>
 
-# Release new version
-npm run release
+<template>
+  <div>
+    <ClientOnly>
+      <ExcalidrawBoard />
+    </ClientOnly>
+  </div>
+</template>
 ```
 
-<!-- Badges -->
-[npm-version-src]: https://img.shields.io/npm/v/my-module/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
-[npm-version-href]: https://npmjs.com/package/my-module
-
-[npm-downloads-src]: https://img.shields.io/npm/dm/my-module.svg?style=flat&colorA=18181B&colorB=28CF8D
-[npm-downloads-href]: https://npmjs.com/package/my-module
+It is important that you load the component once browser APIs are available.
+
+### Using Props
+
+If you want to use, for example, Excalidraw props [`initialData`](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api/props/initialdata) and [`onChange`](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api/props/#onchange), you can do it as following:
+
+```vue
+<script setup lang="ts">
+import type { ExcalidrawElement } from '@excalidraw/excalidraw/types/element/types'
+import type { AppState, BinaryFiles } from '@excalidraw/excalidraw/types/types'
+
+function myCallback(
+  elements: readonly ExcalidrawElement[],
+  appState: AppState,
+  files: BinaryFiles,
+) {
+  // Do something cool here...
+}
+
+const initialDataFromMyService = useMyService().data
+</script>
+
+<template>
+  <div>
+    <ClientOnly>
+      <ExcalidrawBoard 
+        :on-change="myCallback" 
+        :initial-data="initialDataFromMyService" 
+      />
+    </ClientOnly>
+  </div>
+</template>
+```
 
-[license-src]: https://img.shields.io/npm/l/my-module.svg?style=flat&colorA=18181B&colorB=28CF8D
-[license-href]: https://npmjs.com/package/my-module
+<br/>
 
-[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
-[nuxt-href]: https://nuxt.com
+- [✨ Release Notes](/CHANGELOG.md)
+- [🤝 Contributing](/CONTRIBUTING.md)