@slackpanda/vue 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

• Components
• API
• FAQ

Examples

• VueIssues - Show issues of vue.js repository with pagination
• TodoList - ⏰ 🤖

Supported Platforms and Frameworks