Merge pull request #26 from domgew/vue3

Feat: Vue 3

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+#### 3.1.0 (July 5th, 2021)
+
+**Features**
+- Added support for Vue 3 (#26)
+
 #### 3.0.3 (December 24th, 2020)
 
 **Bug fixes**

README.md

@@ -13,8 +13,9 @@
 Declarative shared-element transitions between pages for [Vue.js](https://vuejs.org/).  
 *Uses [illusory](https://npmjs.com/package/illusory) under the hood.*
 
-> #### v3.0.0 is out! 
-> **If you are upgrading from v2.x, please reference the [changelog](https://github.com/justintaddei/v-shared-element/blob/master/CHANGELOG.md) for the (short) list of breaking changes.**
+> #### v3.1.0 released!
+> **Vue 3 is now supported with Vue 2 backwords compatibility**  
+> _Special thanks to [@domgew](https://github.com/domgew) for [#26](https://github.com/justintaddei/v-shared-element/pull/26)_
 
 ### **[Example page](https://justintaddei.github.io/v-shared-element/)**  <!-- omit in toc -->
 > _Source code for the example can be found on the [`example` branch](https://github.com/justintaddei/v-shared-element/tree/example)._
@@ -26,14 +27,16 @@ Declarative shared-element transitions between pages for [Vue.js](https://vuejs.
 **Index**
 - [Install](#install)
   - [Register the plugin](#register-the-plugin)
-    - [Vue.js + vue-router](#vuejs--vue-router)
+    - [Vue.js + vue-router (Vue 2)](#vuejs--vue-router-vue-2)
+    - [Vue.js + vue-router (Vue 3)](#vuejs--vue-router-vue-3)
     - [Nuxt.js](#nuxtjs)
 - [Usage](#usage)
     - [Usage with `v-for`](#usage-with-v-for)
     - [Usage with `keep-alive`](#usage-with-keep-alive)
 - [Options](#options)
   - [Setting global options](#setting-global-options)
-    - [Vue.js + vue-router](#vuejs--vue-router-1)
+    - [Vue.js + vue-router (Vue 2)](#vuejs--vue-router-vue-2-1)
+    - [Vue.js + vue-router (Vue 3)](#vuejs--vue-router-vue-3-1)
     - [Nuxt.js](#nuxtjs-1)
   - [Setting per-element options](#setting-per-element-options)
   - [Summary](#summary)
@@ -72,15 +75,16 @@ or
 
 ### Register the plugin
 
-#### Vue.js + vue-router  
+#### Vue.js + vue-router (Vue 2)
 
 ```js
 //main.js
 
 import Vue from 'vue'
 import {
     SharedElementRouteGuard,
-    SharedElementDirective
+    SharedElementDirective,
+    createSharedElementDirective
 } from 'v-shared-element'
 
 Vue.use(SharedElementDirective)
@@ -91,6 +95,29 @@ router.beforeEach(SharedElementRouteGuard)
 ```
 or  
 
+#### Vue.js + vue-router (Vue 3)
+
+```ts
+//main.ts
+
+import { createApp } from 'vue'
+import {
+    createSharedElementDirective,
+    SharedElementRouteGuard,
+    SharedElementDirective
+} from 'v-shared-element'
+
+const app = createApp(App)
+
+app.use(SharedElementDirective)
+// or app.use(createSharedElementDirective())
+
+const router = new VueRouter({ ... })
+
+router.beforeEach(SharedElementRouteGuard)
+```
+or  
+
 #### Nuxt.js
 
 Simply add it as a module in your `nuxt.config.js`
@@ -220,7 +247,7 @@ Options can be applied globally (when you register the plugin) and/or on each in
 
 ### Setting global options
 
-#### Vue.js + vue-router  
+#### Vue.js + vue-router (Vue 2)
 ```js
 // main.js
 
@@ -231,6 +258,23 @@ Vue.use(SharedElementDirective, {
 
 or
 
+#### Vue.js + vue-router (Vue 3)
+```ts
+// main.ts
+
+app.use(SharedElementDirective, {
+  /* options */
+});
+
+// or
+
+app.use(createSharedElementDirective({
+  /* options */
+}))
+```
+
+or
+
 #### Nuxt.js  
 ```js
 // nuxt.config.js