If you're beginning to learn Vue.js, specifically Vue 3 in late 2021, this post will help you avoid some pitfalls that I spent time resolving and get you started quickly.
Now I wanted to add some interactivity. I've experienced React before and it was messy for me. I wanted to learn something easy and provide immediate results. I eventually decided that Vue will be the better option for me.
One of the main pains I experienced, that kept me from doing front-end stuff was this entire stack of build tools that you need to configure. If I had my way, I'd just want to add the frameworks in a plain HTML file and avoid using any build tools. But I like Hot Module Reloading. I used browsersync to just play with a plain hand-coded HTML page. But as Vue came into the picture, I discovered Vite. And man 0h man. It's great. Simple. Fast.
What I was doing
I built a basic CSS front-end with Bulma by manually building Vue components with the base vue template that comes with vite. I needed to add some simple pieces of interactivity in the toy example I was working with.
- Clicking the hamburger menu opens up the menu on a mobile screen
2. Clicking a link in the menu shows the modal window
3. Clicking the close button on the modal hides the modal window
What confused me
The complexity occurred when I reached the point of communicating events between parent and child components.
script section of an SFC, you basically describe the component using the Options API. This is very similar to what you learn in the introductory tutorials. With a little bit of trial and error, I was able to figure it out and had the interactivity with the hamburger menu on a mobile device implemented.
However, when I started implementing the second feature: showing the modal window, there was inter-component communication and the root vue instance was described in a
script setup tag (which is what vite generates by default). I attempted to build an Options API-based object but couldn't figure it out.
I started searching for internet resources that will describe how to build Vue applications with vite and finally, after watching a few Youtube videos and going through the documentation a few times I got it.
The problem was that the new Vue 3 syntax uses something called Composition API. None of this was described in the introductory examples and tutorials so I had no idea.
What I learned
Finally, I implemented the root vue component in three different flavors to achieve the same thing.
Here are those three ways:
I continue to post my learnings on Twitter if you'd like to follow me on my journey.Follow @shuuabe