Vue-Router and Public Homepage — Vue-Router We’ve seen that Laravel has routing files, web.php and api.php. Vue also has routing but routing with vue is only possible if we install a router (Router here refers to router packages not the hardware). There are many routers for Vue, the official router for Vue is called Vue-Router. …

Footer Component / Avoiding a Collision — A collision may occur We need to create a footer component. We would usually: create the component file import the file in App.vue’s script include the file in App.vue’s script element’s components block use the component inside App.vue’s template

Contact Form’s Client Side Validation and FooterEditor — For the client side validation, we can add HTML5 attribute required to each input The name input becomes: <input type="text" placeholder="name" id="name" v-model="form.name" required/> The email input becomes: <input type="text" placeholder="email" id="email" v-model="form.email" required/> The message input becomes: <input type="text" placeholder="message" id="message" v-model="form.message" required/>

Handling Contact Form & Email Errors — Contact Form’s Laravel Validation For our email to be successful, we need: Sender Valid Sender Email textContent/htmlContent We can create a form request and require these in the rules function. php artisan make:request ContactFormRequest Let’s set the authorize fuction to true and think about the rules function. public function authorize() { return true; }

Contact Form and Emailing — We start off our form component, we have a section with the id contact a h1 heading Contact and an empty form element. <template> <section id="contact"> <h1>Contact</h1> <form> </form> </section> </template> <script> export default { name: "Contact" } </script> <style scoped> </style> Within the form element, we can have:

CV Selector — We should build a CVSelector component and have it as a child component of AboutEditor. AboutEditor.vue’s template: 👇 <template> <section id="about-editor"> <h1>About Editor</h1> <form enctype="multipart/form-data" id="about-form"> <input type="file" @change="selectFile" name="cv" accept=".doc, .docx, .pdf" id="cv_upload"> <button @click.prevent="onSubmit">Submit</button> </form> <CVSelector/> </section> </template>

Downloading The CV — In Chapter 14, we created an ability to upload the CV. Now we need an ability to download the CV. Creating the ability to download the CV We need to follow these steps: Store the original filename in a database table Make the original filename available at a route Receive the original filename in the script tag …

Close Button of the viewItemModal — Clean Up In the last chapter, we had two approaches of creating the portfolio gallery. We chose to use the 2nd approach since it takes a smaller amount of code. Both approaches required code in template and style tags. We should now delete any style that is no longer required. …

Building the public view of the portfolio — We can build up our portfolio by adding new items using the Portfolio Editor; We add items and they appear in the PortfolioEditorTable but this is not how the public should view the portfolio. We need the public view to have a portfolio gallery. Before we get to that, Let’s…