add a simple component

Author: hipertracker

src/components/Languages.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <div v-if='loading'>Loading...</div>
+    <div v-else-if='error'>Error: {{ error.message }}</div>
+    <div v-else-if='result && result.languages'>
+      {{ result.languages }}
+    </div>
+  </div>
+</template>
+
+<script lang='ts'>
+import { defineComponent } from 'vue';
+import { useQuery } from '@vue/apollo-composable';
+import gql from 'graphql-tag';
+
+export default defineComponent({
+  name: 'Languages',
+  setup() {
+    const { result, loading, error } = useQuery(gql`
+      query GetLanguages {
+        languages(order_by: {sort: asc, name: asc}) {
+          name
+          label
+        }
+      }
+    `);
+    return { /* your other items, */ result, loading, error };
+  }
+});
+</script>

src/pages/Index.vue

@@ -1,22 +1,25 @@
 <template>
-  <q-page class="row items-center justify-evenly">
+  <q-page class='row items-center justify-evenly'>
     <example-component
-      title="Example component"
+      :meta='meta'
+      :todos='todos'
       active
-      :todos="todos"
-      :meta="meta"
+      title='Example component'
     ></example-component>
+    <hr />
+    <Languages />
   </q-page>
 </template>
 
-<script lang="ts">
-import { Todo, Meta } from 'components/models';
+<script lang='ts'>
+import { Meta, Todo } from 'components/models';
 import ExampleComponent from 'components/CompositionComponent.vue';
+import Languages from 'components/Languages.vue';
 import { defineComponent, ref } from 'vue';
 
 export default defineComponent({
   name: 'PageIndex',
-  components: { ExampleComponent },
+  components: { ExampleComponent, Languages },
   setup() {
     const todos = ref<Todo[]>([
       {