First released in 2013, Vue is a progressive framework for building web user interfaces. It’s an adoptable, not monolithic, framework that integrates with other frameworks such as React and Angular. While Vue is focused only on the view layer, it can power single-page applications (SPAs) with ease. This fully open-source project is maintained on its GitHub page.
September 2020’s full release of Vue 3 had significant improvements for developers. Vue 3 is fully backward compatible with Vue 2. It has improved performance, better readability, and several new features.
Today, we’ll examine a few of those features and see how to use them to enhance your development workflow. We’ll also reflect on some workarounds needed to use these features in previous versions of Vue. We’ll cover TypeScript support, Teleport, and fragments.
TypeScript Support
One of the most exciting aspects of Vue 3 is that it’s written in, and has full support for, TypeScript (TS). The great thing about native TS support is that we don’t have to use any additional tooling. Also, it helps prevent many potential runtime errors as our applications grow.
Previously, Vue 2 only had official type declarations for TS. Developers had to install TS using npm and use additional plugins to avoid errors. This often required complicated and roundabout methods of using TS within a Vue 2 app. The Vue 3 API is identical for both TS and JavaScript, meaning that in Vue 3, we get the same level of native support for both platforms.
Let’s take a quick look at how to define a Vue component using TS in Vue 3.
import { defineComponent } from 'vue'
const Component = defineComponent({
// type inference enabled
})
The example here imports defineComponent so that TS can properly infer types within the Vue component. If we want to use single file components, we must include the following tags around our code:
<script lang="ts"></script>
Vue 3 provides simple and easy access to TS in all Vue projects. Full TS support in Vue 3 provides greater flexibility for developers. It’s much more accessible than in previous versions of Vue.
Teleport
Teleport is one exciting Vue 3 feature. In Vue 2, this was called portals and required plug-ins and additional tooling.
Vue encourages developers to create user interface (UI) systems that contain both the UI and related behavior inside components. These components can then nest within one another in a tree-like format. While this is a great way to construct a UI, in many cases, we want part of a component to exist elsewhere in the document object model (DOM) from a technical standpoint. Teleporting in Vue 3 enables us to have pieces of templates, such as modals, live within a separate component without a bunch of messy CSS or compositional changes. This code, found within the Vue documentation, enables us to illustrate this change.
Let’s take a look at the following HTML structure:
<body>
<div style="position: relative;">
<h3>Tooltips with Vue 3 Teleport</h3>
<div>
<modal-button></modal-button>
</div>
</div>
</body>
This HTML creates a basic page with a common modal button. At the moment, the modal inherits the parent div tag’s CSS attributes. In Vue 2, for the modal to inherit the body tag attributes, we needed to use portal plugins or create some messy and error-prone CSS. In Vue 3, however, we use the new teleport feature to send the modal button to the body. We do this without ever removing it from its original place in the DOM.
The following code achieves this goal quite a bit more simply than did Vue 2’s tooling:
app.component('modal-button', {
template: `
<button @click="modalOpen = true">
Open full screen modal! (With teleport!)
</button>
<teleport to="body">
<div v-if="modalOpen" class="modal">
<div>
I'm a teleported modal!
(My parent is "body")
<button @click="modalOpen = false">
Close
</button>
</div>
</div>
</teleport>
`,
data() {
return {
modalOpen: false
}
}
})
It’s as simple as using <teleport to="body"> to apply the body tag’s CSS attributes to the created modal. In this example, we created a space for the button on the page, but the modal itself functions as a full-screen modal.
Teleporting is a welcome addition to Vue 3. It’s a great tool for reducing clutter and increasing project readability.
Fragments
Vue 3 also includes support for fragments or multi-root node components. In Vue 2, each component could only have one root node. There was also no plug-in support for creating multi-root nodes.
Note that fragments require developers to define non-prop attributes when needed. Non-prop attributes are an attribute or event listener passed on to a component but requiring further definition when used.
In Vue 2, we often had to create our components within a single div tag. This practice created confusion around which template they may belong to and how. In Vue 3, fragments look like this:
<template>
<header>...</header>
<main v-bind="$attrs">...</main>
<footer>...</footer>
</template>
We can see in this example that we only need to create a template, and from there we easily create multiple nodes without a div tag. The <main> tag includes an example of the non-prop attribute binding that is sometimes required when using fragments in Vue 3.
Fragments are great for reducing DOM confusion and creating cleaner code.
Conclusion
Vue 3 provides more flexibility and better performance than previous framework versions. While the new version brings many new features, the three we explored today are some of the most beneficial for developers to enhance development workflows.
Vue 3 is also backward compatible with Vue 2 code, meaning no one has to completely rewrite their systems to take advantage of the new features. Vue is completely open-source and maintained purely on GitHub. Consider joining the project.
If you are seeking ways to use Vue 3 and its features covered today, but don't know where to start, look at some of GrapeCity’s offerings. These components plug seamlessly into your Vue applications to add powerful enhancements.
SpreadJS, for example, is a JavaScript spreadsheet solution that works wonderfully in Vue. Developers easily create custom, feature-rich spreadsheets, dashboards, reports, and much more using only Vue and SpreadJS.
Or, you can try Wijmo, a UI component collection also available in React and Angular. Wijmo, much like SpreadJS, has a ton of useful features, such as the ability to create flexible charts and data grids all within Vue. Wijmo is super lightweight and won't leave a huge footprint on your project. It enables developers more freedom when using Vue 3.
Experience GrapeCity’s tools with a 30-day, no-obligation free trial.
Kevin Ashley