https://github.com/DeeJayTC/adaptivecards-vue

Vue.js component to render adaptive cards
https://github.com/DeeJayTC/adaptivecards-vue

adaptivecards vue vuejs2

Last synced: about 2 months ago
JSON representation

Vue.js component to render adaptive cards

• Host: GitHub
• URL: https://github.com/DeeJayTC/adaptivecards-vue
• Owner: DeeJayTC
• License: mit
• Created: 2020-01-29T23:38:21.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-02-09T12:25:27.000Z (over 2 years ago)
• Last Synced: 2024-05-01T18:36:49.931Z (5 months ago)
• Topics: adaptivecards, vue, vuejs2
• Language: Vue
• Homepage: https://www.madewithcards.io
• Size: 1.37 MB
• Stars: 12
• Watchers: 4
• Forks: 8
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

• awesome-adaptive-cards - Vue - Vue.js component to render adaptive cards. (Uncategorized / Uncategorized)

README

        
# A vue.js component to render Adaptive Cards easily

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

# Versioning changed!

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

# Installation

```

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

  }

}

```

# Basic Usage

```

    

```

# Properties

__: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

# Future improvements

Upcoming changes:

* Load card from remote sources 50% finished