Diving Into Vue 3 - Getting Started

This article delves into the differences between Vue 2 and Vue 3, specifically focusing on project setup using the Vue CLI. The author begins by explaining how to create a new Vue project in both versions of Vue. They then examine three key files: index.html, main.js, and App.vue. The index.html file remains unchanged between Vue 2 and Vue 3, serving as the default starting page for web applications. The main.js file, however, undergoes a significant transformation in Vue 3. Instead of using new Vue() to create a Vue instance, Vue 3 introduces the createApp function, which allows for separate configurations and instances of Vue. In the App.vue file, the most notable change is that Vue 3 no longer requires a single root element in the template block. This means developers can now have multiple direct child elements without needing an extra div. The author concludes by stating they are not yet intimidated by these changes and plans to explore more differences between Vue 2 and Vue 3, such as the setup() function and Composition API versus Options API.