I have created a simple vue + typescript app with vue-cli. Following https://stalniy.github.io/casl/v4/en/package/casl-vue instructions I have declared the following:
// main.ts
import Vue from 'vue';
import App from './App.vue';
import { abilitiesPlugin } from '@casl/vue';
import ability from './services/ability';
import { Can } from '@casl/vue';
Vue.config.productionTip = false;
Vue.use(abilitiesPlugin);
Vue.component('Can', Can);
new Vue({
render: h => h(App)
// ability
}).$mount('#app');
But I get the error on second parameter on:
Vue.component('Can', Can);
No overload matches this call. The last overload gave the following error. Argument of type 'FunctionalComponentOptions, PropsDefinition>>' is not assignable to parameter of type 'ComponentOptions, DefaultMethods, DefaultComputed, PropsDefinition>, Record<...>>'. Types of property 'render' are incompatible. Type '((this: undefined, createElement: CreateElement, context: RenderContext>) => VNode | VNode[]) | undefined' is not assignable to type '((createElement: CreateElement, hack: RenderContext>) => VNode) | undefined'. Type '(this: undefined, createElement: CreateElement, context: RenderContext>) => VNode | VNode[]' is not assignable to type '(createElement: CreateElement, hack: RenderContext>) => VNode'. Type 'VNode | VNode[]' is not assignable to type 'VNode'. Type 'VNode[]' is missing the following properties from type 'VNode': isRootInsert, isCommentts(2769) vue.d.ts(112, 3): The last overload is declared here.
My package.json contains:
"dependencies": {
"@casl/ability": "^4.0.5",
"@casl/vue": "^1.0.2",
"@typegoose/typegoose": "^6.4.0",
"mongoose": "^5.9.9",
"vue": "^2.6.11",
"vue-class-component": "^7.2.3",
"vue-property-decorator": "^8.4.1"
},
"devDependencies": {
"@types/mongoose": "^5.7.12",
"@typescript-eslint/eslint-plugin": "^2.26.0",
"@typescript-eslint/parser": "^2.26.0",
"@vue/cli-plugin-eslint": "~4.3.0",
"@vue/cli-plugin-typescript": "~4.3.0",
"@vue/cli-service": "~4.3.0",
"@vue/eslint-config-prettier": "^6.0.0",
"@vue/eslint-config-typescript": "^5.0.2",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-vue": "^6.2.2",
"lint-staged": "^9.5.0",
"prettier": "^1.19.1",
"typescript": "~3.8.3",
"vue-template-compiler": "^2.6.11"
},
Thanks in advance for any help on this. Sorry if I'm missing some info on this Q post (is my first one).
Author of CASL here. I improved typescript types for @casl/vue
, updated docs and released a patch version for @casl/vue
.
Also you can find an example of vue + casl + typescript integration in this repo https://github.com/stalniy/casl-examples/tree/master/packages/vue-todo