0.2.0 • Published 4 years ago
@slackpanda/core v0.2.0
Setup
# via npm
$ npm install @slackpanda/vue @slackpanda/slack
# via yarn
$ yarn add @slackpanda/vue @slackpanda/slack
If you not have build command for .vue file, Recommend vue3-node library.
# via npm
$ npm install vue3-node
# via yarn
$ yarn add vue3-node
Getting Started
Create new slack app with slackpanda
// VueIssues.vue
<template>
<pb-section text="Vue.js Issues" />
<pb-section v-if="issues.length > 0">
<pb-section-fields>
<pb-text v-for="issue in issues" :key="issue.id">
{{ issue.title }}
</pb-text>
</pb-section-fields>
</pb-section>
<pb-actions>
<pb-button v-if="showsPrevButton" @click="onPrevButtonClicked">
Prev Page
</pb-button>
<pb-button @click="onNextButtonClicked">Next Page</pb-button>
</pb-actions>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref, computed } from 'vue';
import axios from 'axios';
import {
PbButton,
PbSection,
PbSectionFields,
PbText,
PbActions,
} from '@slackpanda/vue';
export default defineComponent({
name: 'VueIssues',
components: {
PbSection,
PbSectionFields,
PbText,
PbButton,
PbActions,
},
setup() {
const page = ref(1);
const issues = ref<any[]>([]);
const showsPrevButton = computed(() => page.value > 1);
async function fetchData() {
const response = await axios.get(
`https://api.github.com/repos/vuejs/vue/issues?per_page=5&page=${page.value}`
);
issues.value = response.data;
}
function onNextButtonClicked() {
page.value += 1;
fetchData();
}
function onPrevButtonClicked() {
page.value -= 1;
fetchData();
}
onMounted(() => {
fetchData();
});
return {
issues,
showsPrevButton,
onNextButtonClicked,
onPrevButtonClicked,
};
},
});
</script>
Create new client by calling function
const { createClient } = require('@slackpanda/vue');
const { SlackAdapter } = require('@slackpanda/slack');
const adapter = new SlackAdapter({
apiToken: process.env.SLACK_API_TOKEN,
signingSecret: process.env.SLACK_SIGNING_SECRET,
});
const client = createClient({
adapter,
});
Send your slack app
const VueIssues = reuqire('./VueIssues.vue');
client.sendMessage(VueIssues, '#general');
Works fine!
Feature Planning
- Test
- Friendly error report
- Home tabs
- CLI
Documentation
Examples
Supported Platforms and Frameworks
Vue | React | |
---|---|---|
Slack | ✅ | ❌ |
Discord | ❌ | ❌ |
Teams | ❌ | ❌ |