Introduction
Recently, I started learning VueJS, and this article is part of the series of my notes while learning it. In the previous parts, I always used CDN to load Vue, until the last part where I finally created a project with CLI. This gave us new files with the .vue extension, and in this post, I am covering what those are and how to use them when creating the components.
.vue files
These new files are not something that is natively supported. They are something introduced by the Vue team. You can’t just load them in the browser. To use them, you need some compilers that will compile them and generate pure JavaScript, HTML, and CSS files. Thankfully, when you create a project using the CLI, you also get all the loaders set up for this task.
Now you might wonder, why would you want to use these files. If you followed previous parts of this series where I used CDN to load Vue, maybe you noticed how I wrote the component template in one long string. Also, I didn’t use any styling and everything was placed in one single file. With these, you can split your code into multiple files, but also group script, template, and styling code together, as these files support that. This option will show great benefits once you start using it in components. That is why to…
