refactor(example): replaces AppVue with Vue module augmentation

This is possible due to changes in @casl/[email protected]

Relates to stalniy/casl#312

packages/vue-todo/package.json

@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "@casl/ability": "^4.0.5",
-    "@casl/vue": "^1.0.3",
+    "@casl/vue": "^1.1.0",
     "core-js": "^3.6.4",
     "vue": "^2.6.11"
   },

packages/vue-todo/src/App.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts">
-import Vue from './AppVue';
+import Vue from 'vue';
 import TodoList from './components/TodoList.vue';
 
 export default Vue.extend({

packages/vue-todo/src/components/NewTodo.vue

@@ -19,7 +19,7 @@
 </template>
 
 <script lang="ts">
-import Vue from '../AppVue';
+import Vue from 'vue';
 
 export default Vue.extend({
   name: 'NewTodo',

packages/vue-todo/src/components/TodoFooter.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script lang="ts">
-import Vue from '../AppVue';
+import Vue from 'vue';
 import { defineRulesFor } from '../config/ability';
 import { Todo } from '../models/Todo';
 

packages/vue-todo/src/components/TodoItems.vue

@@ -30,7 +30,7 @@
 </template>
 
 <script lang="ts">
-import Vue from '../AppVue';
+import Vue from 'vue';
 import { Todo, TodoInput } from '../models/Todo';
 
 type State = {

packages/vue-todo/src/components/TodoList.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script lang="ts">
-import Vue from '../AppVue';
+import Vue from 'vue';
 import TodoItems, { UpdateEvent } from './TodoItems.vue';
 import TodoFooter from './TodoFooter.vue';
 import NewTodo from './NewTodo.vue';

packages/vue-todo/src/config/ability.ts

@@ -1,4 +1,4 @@
-import { PureAbility, AbilityBuilder, Ability, detectSubjectType, AbilityClass, InferSubjects } from '@casl/ability';
+import { AbilityBuilder, Ability, detectSubjectType, AbilityClass, InferSubjects } from '@casl/ability';
 import { Todo } from '../models/Todo'
 
 type Actions = 'manage' | 'create' | 'read' | 'update' | 'delete';
@@ -14,7 +14,7 @@ export function defineRulesFor(role: string) {
     can('manage', 'all');
   } else {
     can('read', 'all');
-    can(['update', 'delete'], 'Todo', { assignee: 'me' });
+    can(['create', 'update', 'delete'], 'Todo', { assignee: 'me' });
   }
 
   return rules;

packages/vue-todo/src/shims-ability.d.ts

@@ -0,0 +1,13 @@
+import { AppAbility } from './config/ability'
+
+declare module 'vue/types/vue' {
+  interface Vue {
+      $ability: AppAbility;
+      $can(this: this, ...args: Parameters<this['$ability']['can']>): boolean;
+  }
+}
+declare module 'vue/types/options' {
+  interface ComponentOptions<V extends Vue> {
+      ability?: AppAbility;
+  }
+}

packages/vue-todo/tsconfig.json

@@ -17,6 +17,9 @@
     "paths": {
       "@/*": [
         "src/*"
+      ],
+      "@casl/vue/patch": [
+        "src/shims-ability.d.ts"
       ]
     },
     "lib": [