Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 2 Next »

With the following instructions you can easily modify or completely turn around the APIIDA API Control Plane Developer Portal. As you like it.
Of course, if you want to do something completely your own, you can. https://demo.backend.apiida.io/swagger-ui/index.html

Technology and Prerequisites

Language and Framework

We use in combination the framework Vue and the language Typescript. The team is completed with Tailwind. Here is an example:

<template>
  <button type="button" class="rounded bg-indigo-500 py-1 px-2 text-xs font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500">Button text</button>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
    props: {
        // Type-Safe properties! 
        myComplexProperty: {
          type: Object as PropType<MyInterface>,
          required: true,
        }
    }, 
    emits: [],
    setup(props, { emit }) {

    },
})
</script>

<style scoped>

</style>

For storage we use Pinia.

import { defineStore } from 'pinia';
import Plan from '../types/configuration/Plan';

const planStore = defineStore({
  id: 'plan',
  state: () => ({
    plans: [] as Plan[],
  }),
});

export default planStore;

https://www.typescriptlang.org/ https://vuejs.org/ https://tailwindcss.com/ https://pinia.vuejs.org/ https://www.jetbrains.com/help/phpstorm/prettier.html https://prettier.io/ https://github.com/airbnb/javascript https://eslint.org/

  • No labels