made a page for primary symbol apis using meta_primary_symbol.json file

src/App.vue

@@ -3,7 +3,7 @@
     <!-- use the router-link component for navigation. -->
     <!-- specify the link by passing the `to` prop. -->
     <!-- `<router-link>` will render an `<a>` tag with the correct `href` attribute -->
-    <router-link class="rlink" to="/">Primary Symbols</router-link>
+    <router-link class="rlink" to="/PrimarySymbol">Primary Symbols</router-link>
     |
     <router-link class="rlink" to="/">tf</router-link>
     |

src/router.ts

@@ -1,10 +1,12 @@
 import Home from "@/views/Home.vue";
 import About from "@/views/About.vue";
+import PrimarySymbol from "@/views/PrimarySymbol.vue";
 import {createRouter, createWebHistory, RouteRecordRaw} from "vue-router";
 
 const routes: Array<RouteRecordRaw> = [
     {path: '/', name: 'Home', component: Home},
-    {path: '/about', name: 'About', component: About}
+    {path: '/about', name: 'About', component: About},
+    {path: '/PrimarySymbol', name: 'PrimarySymbol', component: PrimarySymbol}
 ]
 
 const router = createRouter({

src/views/PrimarySymbol.vue

@@ -0,0 +1,98 @@
+<template>
+    <div id="PrimarySymbol">
+        <div class="category" v-for="ty of types" :key="ty">
+            <h2>{{ty}}</h2>
+            <div class="api" v-for="api of apis(ty)" :key="api.name">
+                <div class="header clickable">
+                    <span class="name">{{api.name}}</span>
+                    <span class="desc" v-html="api.desc"></span>
+                </div>
+                <div class="content">
+                    <div class="md-docstring" v-html="encodeHtml(api.docs)"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import {Options, Vue} from 'vue-class-component';
+import meta from '../meta_primary_symbol.json';
+import { marked } from 'marked';
+import {$} from '../main';
+
+interface APIEntry
+{
+    name: string
+    desc: string
+    type: string
+    docs: string
+}
+
+function onlyUnique(value, index, self) {
+    return self.indexOf(value) === index;
+}
+
+@Options({components: {}})
+export default class PrimarySymbol extends Vue
+{
+    get types(): string[]
+    {
+        return meta.map(it => it.type).filter(onlyUnique)
+    }
+
+    mounted()
+    {
+        $('.api').accordion({collapsible: true, header: '.header', heightStyle: 'content',
+            active: false})
+    }
+
+    encodeHtml(markdown: string): string
+    {
+        if (!markdown) return ""
+
+        return marked(markdown)
+    }
+
+    apis(ty: string): APIEntry[] 
+    {
+        return meta.filter(it => it.type == ty)
+    }
+}
+</script>
+
+<style lang="sass" scoped>
+#PrimarySymbol > * + *
+    margin-top: 10px
+
+.category > * + *
+    margin-top: 10px
+
+
+.api
+    .header
+        text-align: left
+        background: #ececec
+        padding: 10px
+        border-radius: 10px
+
+        .name
+            font-weight: bold
+            margin-right: 10px
+            color: #2298d4
+    
+    .ui-state-active.header
+        border-radius: 10px 10px 0 0!important
+
+</style>
+
+<style lang="sass">
+.md-docstring
+    text-align: left
+    background: #f3f3f3
+    padding: 10px
+    border-radius: 0 0 10px 10px
+
+    h1, h2
+        font-size: 1em !important
+</style>