Download code from GitHub
Getting Started with Vue.js 3
Before we start learning how to develop enterprise-ready applications with Vue.js 3, you need to understand Vue 3 and the different features it is bundled with to help you navigate through building scalable and enterprise-ready applications.
In this chapter, we will cover the essential aspects of Vue 3 that will directly influence how we develop an enterprise application with Vue.js 3. This background information will put you in a better position to grasp the terms and concepts of Vue 3 and help you understand how to build and scale an enterprise-ready application.
We will cover the following key topics in this chapter:
- Overview of Vue.js
- Introducing Vue.js 3
- Building your first Vue.js 3 app
Once you’ve worked through each of these topics, you will be ready to get started with building your first enterprise-ready Vue.js 3 application.
Overview of Vue.js
Vue.js is an open source progressive JavaScript frontend web framework used to develop interactive frontend web interfaces. It is a very popular and simplified JavaScript framework that focuses on the view layer of web development. It can be easily integrated into big and enterprise web development projects.
Vue.js is a framework that opens the door for developers to create and manage large and scalable projects with ease, as the code structure and development environment are developer-friendly.
In the next section, we will introduce you to the wonders of Vue 3 and the Composition API.
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
Todorepository from an external API and refreshing it on user changes - Searching the
Todorepository using thesearchQuerystring - Filtering the
Todorepository using thefiltersobject
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.
Building your first Vue.js 3 app
Vue.js can be integrated into projects in multiple ways depending on the requirements because it is incrementally adaptable.
We will create a completely blank new Vue 3 project, or you can use the migration guide (https://v3.vuejs.org/guide/migration/migration-build.html#overview) to migrate your Vue 2 project to Vue to follow along.
In this section, we are going to cover how to build our Vue 3 application using the Vite command-line interface (CLI).
Creating a Vue 3 app with Vite
To create our first Vue 3 application, we will use the recommended Vite web development tool. Vite is a web development build tool that allows for lightning-fast code serving due to its native ES Module import approach.
In this book, we will be building an enterprise-ready Pinterest clone project, and all the backend data management of the project will be developed and hosted with Strapi.
Type along with these simple commands:
npm init @vitejs/app pinterest-app-clone cd pinterest-app-clone npm install npm run dev // If you're having issues with spaces in username, try using: npx create-vite-app pinterest-app-clone
The preceding commands will create a pinterest-app-clone folder with Vue 3 installed and set up properly. Once done, open your favorite browser and access the web page with localhost:3000. This is what the web page will look like:
Figure 1.1 – A screenshot of the newly installed Vue 3
In this section, we explored Vue 3, the Composition API, and how to get started building your first application with Vue 3. In the next section, we will learn about the Strapi CMS that we will use for data and content management.
What is the Strapi CMS?
Strapi is an open source headless CMS based on Node.js that is used to develop and manage content or data using RESTful APIs and GraphQL.
With Strapi, we can scaffold our API faster and consume the content via APIs using any HTTP client or GraphQL-enabled frontend.
Scaffolding a Strapi project
Scaffolding a new Strapi project is very simple and works precisely like installing a new frontend framework. Follow these steps to scaffold a new Strapi project:
- Run either of the following commands and test them out in your default browser:
npx create-strapi-app strapi-api --quickstart # OR yarn create strapi-app strapi-api --quickstart
The preceding command will scaffold a new Strapi project in the directory you specified.
- Next, run
yarn buildto build your app and, lastly,yarn developto run the new project if it doesn’t start automatically.
The yarn develop command will open a new tab with a page to register your new admin of the system:
Figure 1.2 – The registration page
As we progress in this book, we will customize our Strapi backend instance to reflect Pinterest data modeling.
Summary
This chapter started with an overview of Vue.js and why Vue.js can be used to develop enterprise-ready applications. We discussed the latest release of Vue.js and how it improves the performance aspect of the framework by introducing a tree-shaking feature right out of the box. We then introduced the Composition API, a Vue 3 feature that improves the readability, maintainability, and scalability of Vue 3 for building and deploying enterprise applications. We also looked at creating our first Vue 3 application using Vite and the fundamental reasons for using Vite instead of the other available options.
Finally, we introduced the Strapi CMS, the backend stack and a headless CMS for building and modeling backend applications and APIs. With Strapi, we will only focus on building and scaling our enterprise frontend Pinterest-clone application using Vue 3 while the Strapi CMS handles the backend.
In the next chapter, we will dive deeper into using Vuex, Vue Router, and Axios to build an enterprise-ready app. You will learn how to properly utilize these libraries to develop large-scale applications with maintainability and scalability, and by the end of the chapter, you will have learned how to set up your backend with Strapi and connect it to Vue 3.
