Create a UI Predict Input with Vue
Learn how to create a modern, inline, typeahead HTML input using Vue. With the huge influx of AI-based generated text, it's a perfect time to learn how to help users decide what their intent is while typing.
If you're familiar with "autocomplete" or "typeahead" methods, this is very similar to that but with the results inline with a normal HTML textarea. This series is inspired, in part, by VSCode but designed to work within your web apps.
The goal of this series is two fold:
- Learn more about Vue.js and the Composition API
- Build the foundation of a practical HTML element we can use in future AI-based projects.
Demo
Resources
Lessons
1
Welcome + Demo
1:24
2
Setup Vue Project
2:03
3
Textarea Echo
5:12
4
Preview Textarea Styles
3:28
5
Dynamic Textarea Size & Layering
6:09
6
Placeholder Value
2:51
7
Toggle Predictive Text Display
3:14
8
Tab-select Prediction
3:54
9
Pseudo Random Prediction Values
4:51
10
Typeahead and setTimeout
4:00
11
Props and Emit on predict-input
7:01
12
predict-input and Form Submit
4:30
13
Verify Pred Endpoint URL
5:57
14
Using HTTPBin to Simulate Working Endpoint
13:24
15
Thank you and next steps
1:32