Vue.js Project Request Form
Using terminal, type the following command in the directory of the unzipped files to install dependencies:
- To run in dev mode, type:
npm run dev
View at http://localhost:8080/ (may be on a slightly different port)
- To run in production mode, type:
npm run build
View at http://localhost:5000
- Use Console via DevTools to see the results of the the form submission. User entered values are stored in firstName, lastName, fullName, email, phone, projectType, and description.
After reviewing a few options for handling validation and sanitzation, I ultimately decided to use vee-validate. I think using a package is better overall as it gives more control over how the validation works and appears, though I did use some of the built in HTML options to limit the amount of characters (maxlength, digits).
Since I started off with vee-validate's examples, I decided to also stick with the CSS framework they used, which is Bulma. I have never used it before, so I was learning it as I went along, but it is fairly similar to bootstrap.
Icons used are from Font Awesome.
There are some additional notes commented in the source code of App.vue related to how I could set up the code if actually sending the data somewhere such as a database.
Need to clean up the devDependinces or recreate from scratch since I installed and tried a few different things while developing that are no longer used, which will decrease the installation size.
In App.vue, line 154, there seems to be an issue with the max option on the input element set to type number, at least when I tested it. I set maxlength to 7 as well for browsers that do not recognize type number and default to type text. You can see under Budget, you are able to enter values higher than 1,000,000, but you will get the warning message via Vue + vee-validate.