Newsletter signup form with server-side validation using Vue.js

What are you most proud of, and what would you do differently next time?

This project was my first time using Vue and I was pleasantly surprised at just how easy it was to setup and use. It seems over-kill for this small of a challenge however I wanted to tackle the form validation properly with server-side validation, and also setup the success view as a separate page rather than a component that is shown and hidden with CSS & JS.

Using Vue meant that this challenge naturally took me longer to complete as I was learning how to use it along the way, but having done so I feel even more proud that I've gone a step further and taken on the challenge using a new framework. I could have opted for other frameworks such as React or Next.js which I will definitely consider for future challenges.

What challenges did you encounter, and how did you overcome them?

Switching the order of the text content and the image on larger screen sizes required me to do some research which lead me to discover the flexbox order property. I used this to change the order within a media query to achieve the desired result:

@media (min-width: 768px) {
  .newsletter-info {
    order: 1;
  }

  picture {
    ...
    order: 2;
  }
}

I could have also done this by using grid and redefining the grid-column and grid-row css properties within a media query

What specific areas of your project would you like help with?

As previously mentioned this was my first time using Vue, so any comments or feedback on that would be great. For example, in Vue I noticed how styling is sometimes defined within the component file rather than in a separate dedicated file which is what I am used to with css, hence why I created a base.css and a main.css file. Im curious to know if there is a "best practice" for either approach in Vue or is it just personal preference?

Any other general feedback or comments are very much welcome!♥