Skip to content
home@dennisPersonal Website of Dennis Plöger
  • Home
  • Blog
  • Artist
  • Impressum
  • Datenschutzerklärung

tflookup – Developer Diary Part 4

9. Juni 2019

Dear Diary!

So I finished my REST service which will deliver my search results. But what good is that without an appealing frontend.

After I was nearly blown away by the overwhelming good critics about Vue.js at last year’s enterjs I took the Vue-way immediately.

I think, Vue is very easy compared to other frameworks out there and also very well structured.

Also, it has proper Typescript support and good documentation.

So I started a Vue project using Vue CLI (which has an amazing new UI btw).

A simple test of the REST calls worked fine, but I wanted something more appealing.

Luckily, Vuetify has some nice Material Design components ready for Vue and also a nice autocomplete component.

This method watches the query input field and uses the REST backend to fill the results. I used a delayed promise there to allow the user to input the complete search text before I use the text to search the backend.

The autocomplete than renders a so-called „slot“ with the item results.

Selecting a result would trigger a location change to the actual terraform documentation page.

The hard thing here was to get my head around how Vue plugins work, how they work in Typescript and how Vuetify components and their specialities (like slots) work. But the good examples and documentation for Vuetify and Vue helped a great deal.

Yours
Dennis

This post is one of five posts from the tflookup developer diary series

Cover Image: „diary writing“ by Fredrik Rubensson

Originally published to dev.to

PDF

Calendar

März 2023
M D M D F S S
« Apr    
 12345
6789101112
13141516171819
20212223242526
2728293031  

Archive

  • April 2021
  • März 2021
  • September 2020
  • Dezember 2019
  • November 2019
  • Oktober 2019
  • Juli 2019
  • Juni 2019
  • Mai 2019
  • April 2019
  • März 2019
  • September 2018
  • August 2018
  • Juli 2018
  • März 2018
  • Januar 2018
  • Dezember 2017
  • September 2017
  • März 2017
  • Februar 2017
  • Januar 2017
  • August 2016
  • Mai 2016
  • Dezember 2015
  • November 2015
  • August 2015
  • März 2015
  • Dezember 2014
  • September 2014
  • August 2014
  • Juli 2014
  • Februar 2014
  • Oktober 2013
  • September 2013
  • August 2013
  • Juli 2013
  • Juni 2013
  • Mai 2013
  • April 2013
  • November 2012
  • Oktober 2012
  • September 2012
  • August 2012
  • Juni 2012
  • Mai 2012
  • März 2012
  • Februar 2012
  • Januar 2012
  • November 2011
  • Juli 2011
  • Juni 2011
  • März 2011
  • Februar 2011
  • Januar 2011
  • Dezember 2010
  • November 2010
  • April 2010
  • Februar 2010

Kategorien

  • Allgemein

Neueste Beiträge

  • Github Action for the Godot Asset library
  • Announcing EgoVenture
  • The third installment of my learning project
  • So I released an Adventure Game
  • Feather > Sword

Schlagwörter

administration apache blog commit configuration configuration management development dhcp django documentation dokuwiki extension html ip java javascript keyboard lbows linux log migration netdot networks news php plugin printer python rest server shortcut skd sles soap social ssh survey twitter ubuntu udev vmware website zimbra zimlet zimlets

Meta

  • Anmelden
  • Beitrags-Feed (RSS)
  • Kommentare als RSS
  • WordPress.org

Copyright (c) Dennis Plöger | Theme by ThemeinProgress | Proudly powered by WordPress

Zum Ändern Ihrer Datenschutzeinstellung, z.B. Erteilung oder Widerruf von Einwilligungen, klicken Sie hier: Einstellungen