- I've recently decided to work on my first web application.
- I've chosen VueJS as the frontend framework because I've heard it's easy.
- I've already created plain HTML and CSS pages that are ready to be adapted into VueJS
- I'm writing this post because it's been said that teaching is the best way to learn 😄
After going through some YouTube videos and trying out VueJS, I've noticed that there are 5 main pieces in a VueJS application.
This is just a plain old regular html file. The main thing to note is that each Vue application is rendered in a div container that MUST be specified by the element ID.
I think this file manages the various node packages are used in the application. The main thing to note is that the Vue application is instantiated here along with the element ID for the application to be rendered in.
The default component created through
vue create app-name is named
App.vue. This serves as the main component that gets rendered in index.html. All other sub-components should be imported here. More details on creating a Vue application can be found on the VueJS.org.
Personally, I've created the sub-components based on the main HTML tags, namely , and . This makes sense because I don't want to have duplicated code for the navigation bar and footer. The main tag is also made into a sub-component because each page/route would have different content in the tag.
Vue-Router is a node package. This is used to serve different content based on the URL routes, e.g.
website.com/new. If I don't use Vue-Router, I'll probably have to create separate html files for each page of content that I want to deliver to the user. 😩
Some of my key takeaways when implementing VueJS:
- remember to define element #ID for rendering each Vue application
- export each sub-component
- import sub-component to the parent component
- there are many useful Vue-directives that makes life easy such as
v-model, make use of them!
- each component have three parts: template, script, and style
- remember to include
scopedfor the style part to prevent unexpected design nightmare!
- if it seems overwhelming to start VueJS, just know that you can implement it in plain HTML incrementally 😄
Hopefully, this post will be beneficial to those interested in picking up VueJS.
Also if anyone spots any mistakes/misconceptions I have about VueJS, please do let me know or leave it in the comments! It would be terrible if someone got misled 😧
These are the list of resources that I've used to learn about VueJS.