Using the component allows you to easily render https://adaptivecards.io/ in your vue.js application.
For more information about Adaptive Cards read this: https://docs.microsoft.com/en-us/adaptive-cards
You might have noticed the version made a big jump, thats because we want to be inline with supported AdaptiveCards version which currently is 2.9.0
npm i adaptivecards-vue --save
After adding the library:
//main.js
import Vue from 'vue'
import AdaptiveCards from 'adaptivecards-vue'
import 'adaptivecards-vue/dist/adaptivecards-vue.css'
Vue.use(AdaptiveCards)
Or import the component whereever you want:
//App.vue
import { AdaptiveCards } from 'adaptivecards-vue'
export default {
components: {
AdaptiveCards
}
}
<template>
<adaptive-card
:card="card"
:data="data"
:useTemplating="true"
v-on:onActionClicked="onItemClick"
/>
</template>
:card
Either a card template with placeholders or a full card as object or json
:data
When using a template, pass in data for the template as object or json Read: https://docs.microsoft.com/en-us/adaptive-cards/templating/ for a guide about templating Also: https://medium.com/@tim.cadenbach/why-templating-for-adaptive-cards-is-a-game-changer-1606de3226ed might help.
NOTE: Breaking Change! When using the most recent AdaptiveCards Templating package you have to update your templates.
Instead of using {$root.data} you now have to use ${$root.data}
:useTemplating
When passing in a template set to true
:HostConfig
Use to overwrite the default host config -> https://docs.microsoft.com/en-us/adaptive-cards/rendering-cards/host-config
onActionClicked
Will be send for any card with actions whenever an action is used
Upcoming changes:
- Load card from remote sources 50% finished