feat: component base

components/SearchBar.vue

@@ -0,0 +1,46 @@
+<template>
+  <v-autocomplete
+    label="Search..."
+    single-line
+    append-icon="fa-search"
+    color="white"
+    hide-details
+    :items="items"
+    item-text="text"
+    item-value="path"
+    solo-inverted
+    :filter="filter"
+    clearable
+    cache-items
+    @change="choose"
+  >
+    <template v-slot:no-data>
+      <v-list-item>
+        <v-list-item-title>
+          Search for the <strong>tool</strong> you need!
+        </v-list-item-title>
+      </v-list-item>
+    </template>
+  </v-autocomplete>
+</template>
+
+<script>
+import {Component, Vue} from 'nuxt-property-decorator'
+import {ToolRoutes} from '~/mixins/tool-routes'
+
+@Component({
+  mixins: [ToolRoutes]
+})
+export default class SearchBar extends Vue {
+  title = 'IT - Tools'
+  drawer = false
+  items = []
+}
+</script>
+
+<style scoped lang="less">
+::v-deep .v-list-item__mask{
+  color: inherit !important;
+  background: inherit !important;
+}
+</style>

components/Tool.vue

@@ -1,28 +1,29 @@
 <script lang="ts">
 import {Component, Vue} from 'nuxt-property-decorator'
-import ToolWrapper from '~/components/ToolWrapper.vue';
-
-interface ToolConfig {
-  title: string;
-  description: string;
-}
-
-export {ToolConfig}
+import ToolWrapper from '~/components/ToolWrapper.vue'
+import {ToolConfig} from '~/types/ToolConfig'
 
 @Component({components: {ToolWrapper}})
 export default class Tool extends Vue {
-  public isTool = true;
-  public config: ToolConfig = {
-    title: 'Tool',
-    description: 'Tool description'
-  }
+  config(): ToolConfig {
+    throw new Error('You need to specify a config() method your custom Tool.')
+  };
 
   public head() {
-    const {title, description} = this.config
+    const {title, description, keywords} = this.config()
 
     return {
       title,
-      description
+      meta: [
+        {
+          name: 'description',
+          content: description
+        },
+        {
+          name: 'keywords',
+          content: keywords
+        }
+      ]
     }
   }
 }

components/ToolWrapper.vue

@@ -4,12 +4,14 @@
       <v-col cols="12" lg="6">
         <div class="tool-wrapper-info">
           <h1>{{ config.title }}</h1>
-          <div class="spacer"></div>
-          <div class="description">{{ config.description }}</div>
+          <div class="spacer" />
+          <div class="description">
+            {{ config.description }}
+          </div>
         </div>
         <v-card flat>
           <v-card-text class="pa-10">
-            <slot></slot>
+            <slot />
           </v-card-text>
         </v-card>
       </v-col>
@@ -19,7 +21,7 @@
 
 <script lang="ts">
 import {Component, Prop, Vue} from 'nuxt-property-decorator'
-import {ToolConfig} from '~/components/Tool.vue'
+import {ToolConfig} from '~/types/ToolConfig'
 
 @Component
 export default class ToolWrapper extends Vue {