Introducing Vue.js 3

The official Vue.js 3 version was released in September 2020 with highly documented, highly readable, well-structured resources to help you start using Vue 3. Evan You in his article The process: Making Vue 3 (https://increment.com/frontend/making-vue-3/) mentioned that one of the key reasons for the rewrite was to leverage a new language feature, Proxy.

Proxy allows the framework to intercept operations on objects. A core feature of Vue is the ability to listen to changes made to the user-defined state and reactively update the DOM. In Vue 3, using the Proxy feature is the key to resolving the reactivity-related issues in Vue 2.

Most importantly, Vue 3 was completely rewritten in TypeScript and has all the advantages of a modern framework that come with using TypeScript.

In this section, we will explore some of the features and improvements that resonate with building an enterprise application and, most importantly, the new Composition API.

We’ll cover the following topics:

• Vue 3 performance
• Tree-shaking support
• The Composition API

These topics give you a glimpse at the features of Vue.js 3 and we will start with what we are already familiar with in Vue in this book.

Vue 3 performance

The performance increase in Vue 3 is excellent for enterprise applications because any lag in the core framework can result in a loss of funds given the gigantic nature of an enterprise project.

Vue 3 has sped up performance by 55% compared to previous versions. Also, the updates are up to 133% faster, which is excellent for developing and testing large enterprise projects before deployment. Also, memory usage is reduced by 54%, cutting down computing costs drastically on enterprise projects.

Tree-shaking support

Tree-shaking is the process of eliminating dead, useless, or unused code, which drastically decreases the build size of an application if you compare this to an enterprise application with thousands of files and—sometimes unknowingly—unused files that can lead to a bloated and heavy project.

Vue 3 supports tree-shaking right out of the box, eliminating unused files and code, thereby decreasing the build size and increasing the project’s performance.

The Composition API

The Composition API is an entirely new addition and the most significant change to Vue 3. It requires relearning the concepts and total discarding the Options API used in Vue 2. While the Composition API advances, the previous Options API will continue to be supported. In this book, we use the Composition API because of the readability and performance improvements that come with it.

Why the Composition API?

When building a simple application, the component-based architecture alone has proven to be the best approach to developing such an application where individual components can be reused to improve maintainability and flexibility.

However, when building enterprise-ready applications with hundreds of components, from collective experience, it is proven that component-based architecture alone might not be enough, especially when your application is getting big but sharing and reusing code even within components becomes very important, and thus the introduction of the Composition API.

Code example

Let’s imagine we are building an enterprise to-do application with unique features such as filters and search capabilities. Using the Options API, we will approach this project using the traditional data, computed, and watch methods.

The following code block shows how to create and manage a Vue component using the Options API from Vue 2:

// src/components/TodoRepositories.vue
export default {
  components: { RepositoriesFilters, RepositoriesSortBy,
                RepositoriesList },
  props: {
    todo: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      repositories: [], // 1
      filters: {}, // 3
      searchQuery: '', // 2
    }
  },
  computed: {
    filteredRepositories() {}, // 3
    repositoriesMatchingSearchQuery() {}, // 2
  },
  watch: {
    todo: 'getTodoRepositories', // 1
  },
  mounted() {
    this.getTodoRepositories() // 1
  },
  methods: {
    getTodoRepositories() {
      // using `this.Todo` to fetch Todo repositories
    }, // 1
    updateFilters() {}, // 3
  },
}

The preceding component handles many responsibilities, as you can see in the following points:

• Getting the Todo repository from an external API and refreshing it on user changes
• Searching the Todo repository using the searchQuery string
• Filtering the Todo repository using the filters object

Organizing your component’s logic as in the previous example works perfectly, but at the same time poses a huge challenge to readability and maintainability for larger and enterprise projects with bigger components’ logic.

Wouldn’t it be perfect if we could collocate code related to the same logical concern? That’s exactly what the Composition API enables us to do.

Let’s rewrite the same component using the Composition API to see the improvement and readability benefits gained by using it:

<script setup>
import { fetchTodoRepositories } from '@/api/repositories'
import { ref, watch, computed } from 'vue'
const props = defineProps({
    todo: {
        type: String
        default:""
    }
})
  const repositories = ref([])
  const getTodoRepositories = async () => {
    repositories.value =
        await fetchTodoRepositories(props.todo)
  }
  getTodoRepositories()
  // set a watcher on the Reactive Reference to user todo
  // prop
  watchEffect(getTodoRepositories)
  const searchQuery = ref('')
  const repositoriesMatchingSearchQuery = computed(() => {
    return repositories.value.filter(
      repository =>
          repository.name.includes(searchQuery.value)
    )
  })
</script>

The Composition API is a great addition, especially for developing enterprise-ready applications. We can move the computed, mounted, and watch lifecycle hooks into a standalone composition function and import it into the script with setup, making it readable, flexible, and maintainable. To learn more about the Composition API, visit the official documentation (https://v3.vuejs.org/guide/composition-api-introduction.html#why-composition-api), which is outside the scope of this book.

So far, we have covered an overview of Vue 3 and the newly introduced features of Vue that are handy for building enterprise-ready and scalable production-grade applications. We have also covered the basics of the Composition API to foster your understanding of building your modern enterprise application with Vue 3.

In the next section, we will put your knowledge to the test by learning how to build your first Vue 3 application using Vite as the build tool.

According to the official documentation (https://vitejs.dev/guide/), Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. It is based on Rollup, and it’s configured to support most sensible defaults for modern JavaScript frameworks.