Merge branch 'master' of github.com:nativescript-community/ui-drawer into feature/swipe-menu

# Conflicts:
#	README.md
#	yarn.lock

Author: farfromrefug

.gitmodules

@@ -13,3 +13,6 @@
 [submodule "demo-vue"]
 	path = demo-vue
 	url = https://github.com/nativescript-community/plugin-seed-demo-vue.git
+[submodule "demo-vue3"]
+	path = demo-vue3
+	url = https://github.com/nativescript-community/plugin-seed-demo-vue3

README.md

@@ -1,4 +1,12 @@
-<!-- ⚠️ This README has been generated from the file(s) "blueprint.md" ⚠️--><!-- ⚠️ This README has been generated from the file(s) "blueprint.md" ⚠️-->
+<!-- ⚠️ This README has been generated from the file(s) "blueprint.md" ⚠️-->This monorepo contains multiple packages:<br><br><details>
+<summary><b>demo-snippets</b></summary>
+{{ load:packages/demo-snippets/README.md }}
+</details><details>
+<summary><b>src</b></summary>
+{{ load:packages/src/README.md }}
+</details><details>
+<summary><b>ui-drawer</b></summary>
+<!-- ⚠️ This README has been generated from the file(s) "blueprint.md" ⚠️-->
 <!--  !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
       !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
       !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
@@ -20,7 +28,7 @@
       !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
 <h1 align="center">@nativescript-community/ui-drawer</h1>
 <p align="center">
-		<a href="https://npmcharts.com/compare/@nativescript-community/ui-drawer?minimal=true"><img alt="Downloads per month" src="https://img.shields.io/npm/dm/@nativescript-community/ui-drawer.svg" height="20"/></a>
+		<a href="https://npmcharts.com/compare/@nativescript-community/ui-drawer?minimal=true"><img alt="Downloads per month" src="https://img.shields.io/npm/dm/@nativescript-community/ui-drawer.svg" height="20"/></a>
 <a href="https://www.npmjs.com/package/@nativescript-community/ui-drawer"><img alt="NPM Version" src="https://img.shields.io/npm/v/@nativescript-community/ui-drawer.svg" height="20"/></a>
 	</p>
 
@@ -36,57 +44,59 @@
 | --- | ----------- |
 | iOS Demo | Android Demo |
 
-
-[](#table-of-contents)
-
-
-[](#table-of-contents)
-
+
+[](#table-of-contents)
+
+
+[](#table-of-contents)
+
 ## Table of Contents
 
-* [Installation](#installation)
-* [Configuration](#configuration)
-* [API](#api)
-	* [Properties](#properties)
-	* [Methods](#methods)
-	* [Events](#events)
-* [Usage in Angular](#usage-in-angular)
-	* [Examples:](#examples)
-* [Usage in React](#usage-in-react)
-	* [Examples:](#examples-1)
-* [Usage in Svelte](#usage-in-svelte)
-	* [Examples:](#examples-2)
-* [Usage in Vue](#usage-in-vue)
-	* [Examples:](#examples-3)
-* [Demos and Development](#demos-and-development)
-	* [Repo Setup](#repo-setup)
-	* [Build](#build)
-	* [Demos](#demos)
-* [Contributing](#contributing)
-	* [Update repo ](#update-repo-)
-	* [Update readme ](#update-readme-)
-	* [Update doc ](#update-doc-)
-	* [Publish](#publish)
-	* [modifying submodules](#modifying-submodules)
+* [Installation](#installation)
+* [Configuration](#configuration)
+* [API](#api)
+	* [Properties](#properties)
+	* [Methods](#methods)
+	* [Events](#events)
+* [Usage in Angular](#usage-in-angular)
+	* [Examples:](#examples)
+* [Usage in React](#usage-in-react)
+	* [Examples:](#examples-1)
+* [Usage in Svelte](#usage-in-svelte)
+	* [Examples:](#examples-2)
+* [Usage in Vue](#usage-in-vue)
+	* [Examples:](#examples-3)
+* [Usage in Vue3](#usage-in-vue3)
+	* [Examples:](#examples-4)
+* [Demos and Development](#demos-and-development)
+	* [Repo Setup](#repo-setup)
+	* [Build](#build)
+	* [Demos](#demos)
+* [Contributing](#contributing)
+	* [Update repo ](#update-repo-)
+	* [Update readme ](#update-readme-)
+	* [Update doc ](#update-doc-)
+	* [Publish](#publish)
+	* [modifying submodules](#modifying-submodules)
 * [Questions](#questions)
 
-
-[](#installation)
-
-
-[](#installation)
-
+
+[](#installation)
+
+
+[](#installation)
+
 ## Installation
 Run the following command from the root of your project:
 
 `ns plugin add @nativescript-community/ui-drawer`
 
-
-[](#configuration)
-
-
-[](#configuration)
-
+
+[](#configuration)
+
+
+[](#configuration)
+
 ## Configuration
 For gestures to work, make sure to add the following code block inside the main application file (e.g. app.ts):
 
@@ -95,12 +105,12 @@ import { install } from '@nativescript-community/ui-drawer';
 install();
 ```
 
-
-[](#api)
-
-
-[](#api)
-
+
+[](#api)
+
+
+[](#api)
+
 ## API
 
 ### Properties
@@ -146,12 +156,12 @@ install();
 | open      | `side`, `duration` | Drawer opens                 |
 | close     | `side`, `duration` | Drawer closes                |
 
-
-[](#usage-in-angular)
-
-
-[](#usage-in-angular)
-
+
+[](#usage-in-angular)
+
+
+[](#usage-in-angular)
+
 ## Usage in Angular
 Import the module into your project.
 
@@ -178,12 +188,12 @@ export class AppModule { }
   - An example of drawers on all sides: left, right, top, bottom.
 
 
-
-[](#usage-in-react)
-
-
-[](#usage-in-react)
-
+
+[](#usage-in-react)
+
+
+[](#usage-in-react)
+
 ## Usage in React
 
 Register the plugin in your `app.ts`.
@@ -200,12 +210,12 @@ DrawerElement.register();
 - [All Sides](demo-snippets/react/AllSides.tsx)
   - An example of drawers on all sides: left, right, top, bottom.
 
-
-[](#usage-in-svelte)
-
-
-[](#usage-in-svelte)
-
+
+[](#usage-in-svelte)
+
+
+[](#usage-in-svelte)
+
 ## Usage in Svelte
 
 Register the plugin in your `app.ts`.
@@ -222,12 +232,12 @@ DrawerElement.register();
 - [All Sides](demo-snippets/svelte/AllSides.svelte)
   - An example of drawers on all sides: left, right, top, bottom.
 
-
-[](#usage-in-vue)
-
-
-[](#usage-in-vue)
-
+
+[](#usage-in-vue)
+
+
+[](#usage-in-vue)
+
 ## Usage in Vue
 
 Register the plugin in your `app.js`.
@@ -244,12 +254,35 @@ Vue.use(DrawerPlugin);
 - [All Sides](demo-snippets/vue/AllSides.vue)
   - An example of drawers on all sides: left, right, top, bottom.
 
-
-[](#demos-and-development)
-
-
-[](#demos-and-development)
-
+
+[](#usage-in-vue3)
+
+
+[](#usage-in-vue3)
+
+## Usage in Vue3
+
+Register the plugin in your `app.js`.
+
+```typescript
+import DrawerPlugin from '@nativescript-community/ui-drawer/vue3'
+
+app.use(DrawerPlugin);
+```
+
+### Examples:
+
+- [Basic Drawer](demo-snippets/vue3/BasicDrawer.vue)
+  - A basic sliding drawer.
+- [All Sides](demo-snippets/vue3/AllSides.vue)
+  - An example of drawers on all sides: left, right, top, bottom.
+
+
+[](#demos-and-development)
+
+
+[](#demos-and-development)
+
 ## Demos and Development
 
 
@@ -289,12 +322,12 @@ Demo setup is a bit special in the sense that if you want to modify/add demos yo
 Instead you work in `demo-snippets/[ng|react|svelte|vue]`
 You can start from the `install.ts` of each flavor to see how to register new demos 
 
-
-[](#contributing)
-
-
-[](#contributing)
-
+
+[](#contributing)
+
+
+[](#contributing)
+
 ## Contributing
 
 ### Update repo 
@@ -342,18 +375,19 @@ One easy solution is t modify `~/.gitconfig` and add
 	pushInsteadOf = https://github.com/
 ```
 
-
-[](#questions)
-
-
-[](#questions)
-
+
+[](#questions)
+
+
+[](#questions)
+
 ## Questions
 
 If you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord).
-
-[](#demos-and-development)
-
+
+
+[](#demos-and-development)
+
 ## Demos and Development
 
 
@@ -393,9 +427,9 @@ Demo setup is a bit special in the sense that if you want to modify/add demos yo
 Instead you work in `demo-snippets/[ng|react|svelte|vue]`
 You can start from the `install.ts` of each flavor to see how to register new demos 
 
-
-[](#contributing)
-
+
+[](#contributing)
+
 ## Contributing
 
 ### Update repo 
@@ -442,9 +476,9 @@ One easy solution is t modify `~/.gitconfig` and add
 [url "ssh://[email protected]/"]
 	pushInsteadOf = https://github.com/
 ```
-
-[](#questions)
-
+
+[](#questions)
+
 ## Questions
 
-If you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord).
+If you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord).