Vuejs Class Documentation

Posted on  by admin

You’re browsing the documentation for v2.x and earlier. For v3.x, click here. Vue CLI provides built-in TypeScript tooling support.

A static type system can help prevent many potential runtime errors, especially as applications grow.

Transitions on Initial Render

That’s why Vue ships with official type declarations for TypeScript - not only in Vue core, but also for vue-router and vuex as well.

Since these are published on NPM, and the latest TypeScript knows how to resolve type declarations in NPM packages, this means when installed via NPM, you don’t need any additional tooling to use TypeScript with Vue.

Note that you have to include strict: true (or at least noImplicitThis: true which is a part of strict flag) to leverage type checking of this in component methods otherwise it is always treated as any type.

See TypeScript compiler options docs for more details. Vue CLI 3 can generate new projects that use TypeScript.

Official Declaration in NPM Packages

To get started:. For developing Vue applications with TypeScript, we strongly recommend using Visual Studio Code, which provides great out-of-the-box support for TypeScript.

Overview

If you are using single-file components (SFCs), get the awesome Vetur extension, which provides TypeScript inference inside SFCs and many other great features.

WebStorm also provides out-of-the-box support for both TypeScript and Vue. To let TypeScript properly infer types inside Vue component options, you need to define components with Vue.component or Vue.extend:.

If you prefer a class-based API when declaring components, you can use the officially maintained vue-class-component decorator:.

Plugins may add to Vue’s global/instance properties and component options.

Transitioning Between Components

In these cases, type declarations are needed to make plugins compile in TypeScript. Fortunately, there’s a TypeScript feature to augment existing types called module augmentation.

For example, to declare an instance property $myProperty with type string:.

  • After including the above code as a declaration file (like my-property.d.ts) in your project, you can use $myProperty on a Vue instance.

Dynamic Transitions

You can also declare additional global properties and component options:.

The above declarations allow the following code to be compiled:.

  • Because of the circular nature of Vue’s declaration files, TypeScript may have difficulties inferring the types of certain methods.

Transitioning Single Elements/Components

  • For this reason, you may need to annotate the return type on methods like render and those in computed.

Annotating Props

  • If you find type inference or member completion isn’t working, annotating certain methods may help address these problems.

List Transitions

  • Using the --noImplicitAny option will help find many of these unannotated methods.

Reusable Transitions

  • If you find validator not getting type inference or member completion isn’t working, annotating the argument with the expected type may help address these problems.

Class-Style Vue Components

← TestingProduction Deployment →. Caught a mistake or want to contribute to the documentation?Edit this on GitHub!Deployed onNetlify . You’re browsing the documentation for v2.x and earlier. For v3.x, click here. Vue provides a variety of ways to apply transition effects when items are inserted, updated, or removed from the DOM.

  • This includes tools to:. automatically apply classes for CSS transitions and animations.

Basic Usage

integrate 3rd-party CSS animation libraries, such as Animate.css. use JavaScript to directly manipulate the DOM during transition hooks.

Augmenting Types for Use with Plugins

integrate 3rd-party JavaScript animation libraries, such as Velocity.js.

On this page, we’ll only cover entering, leaving, and list transitions, but you can see the next section for managing state transitions.

Vue provides a transition wrapper component, allowing you to add entering/leaving transitions for any element or component in the following contexts:.

Conditional rendering (using v-if). Conditional display (using v-show). Dynamic components.

Component root nodes. This is what an example looks like in action:.

Development Tooling

When an element wrapped in a transition component is inserted or removed, this is what happens:. Vue will automatically sniff whether the target element has CSS transitions or animations applied.

If it does, CSS transition classes will be added/removed at appropriate timings. If the transition component provided JavaScript hooks, these hooks will be called at appropriate timings.

If no CSS transitions/animations are detected and no JavaScript hooks are provided, the DOM operations for insertion and/or removal will be executed immediately on next frame (Note: this is a browser animation frame, different from Vue’s concept of nextTick).

Recommended Configuration

There are six classes applied for enter/leave transitions.

Annotating Return Types

v-enter: Starting state for enter. Added before element is inserted, removed one frame after element is inserted.

v-enter-active: Active state for enter. Applied during the entire entering phase. Added before element is inserted, removed when transition/animation finishes.

This class can be used to define the duration, delay and easing curve for the entering transition.

v-enter-to: Only available in versions 2.1.8+.

Ending state for enter. Added one frame after element is inserted (at the same time v-enter is removed), removed when transition/animation finishes. v-leave: Starting state for leave.

Added immediately when a leaving transition is triggered, removed after one frame. v-leave-active: Active state for leave.

Applied during the entire leaving phase. Added immediately when leave transition is triggered, removed when the transition/animation finishes. This class can be used to define the duration, delay and easing curve for the leaving transition.

  • v-leave-to: Only available in versions 2.1.8+.
  • Ending state for leave. Added one frame after a leaving transition is triggered (at the same time v-leave is removed), removed when the transition/animation finishes.

Transitioning Between Elements

Each of these classes will be prefixed with the name of the transition. Here the v- prefix is the default when you use a element with no name.

If you use for example, then the v-enter class would instead be my-transition-enter.

v-enter-active and v-leave-active give you the ability to specify different easing curves for enter/leave transitions, which you’ll see an example of in the following section.

One of the most common transition types uses CSS transitions.

Here’s an example:. CSS animations are applied in the same way as CSS transitions, the difference being that v-enter is not removed immediately after the element is inserted, but on an animationend event.

Here’s an example, omitting prefixed CSS rules for the sake of brevity:.

CSS Transitions

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id.

Staggering List Transitions

Pellentesque habitant morbi tristique senectus et netus. You can also specify custom transition classes by providing the following attributes:. enter-to-class (2.1.8+). leave-to-class (2.1.8+). These will override the conventional class names. This is especially useful when you want to combine Vue’s transition system with an existing CSS animation library, such as Animate.css.

Here’s an example:. Vue needs to attach event listeners in order to know when a transition has ended. It can either be transitionend or animationend, depending on the type of CSS rules applied. If you are only using one or the other, Vue can automatically detect the correct type.

However, in some cases you may want to have both on the same element, for example having a CSS animation triggered by Vue, along with a CSS transition effect on hover.

In these cases, you will have to explicitly declare the type you want Vue to care about in a type attribute, with a value of either animation or transition. In most cases, Vue can automatically figure out when the transition has finished.

Custom Transition Classes

By default, Vue waits for the first transitionend or animationend event on the root transition element.

However, this may not always be desired - for example, we may have a choreographed transition sequence where some nested inner elements have a delayed transition or a longer transition duration than the root transition element.

In such cases you can specify an explicit transition duration (in milliseconds) using the duration prop on the component:.

Transition Modes

You can also specify separate values for enter and leave durations:. You can also define JavaScript hooks in attributes:. These hooks can be used in combination with CSS transitions/animations or on their own.

JavaScript Hooks

When using JavaScript-only transitions, the done callbacks are required for the enter and leave hooks. Otherwise, the hooks will be called synchronously and the transition will finish immediately.

List Move Transitions

It’s also a good idea to explicitly add v-bind:css="false" for JavaScript-only transitions so that Vue can skip the CSS detection. This also prevents CSS rules from accidentally interfering with the transition. Now let’s dive into an example. Here’s a JavaScript transition using Velocity.js:.

Explicit Transition Durations

If you also want to apply a transition on the initial render of a node, you can add the appear attribute:. By default, this will use the transitions specified for entering and leaving. If you’d like however, you can also specify custom CSS classes:.

and custom JavaScript hooks:. In the example above, either appear attribute or v-on:appear hook will cause an appear transition.

We discuss transitioning between components later, but you can also transition between raw elements using v-if/v-else. One of the most common two-element transitions is between a list container and a message describing an empty list:.

CSS Animations

This works well, but there’s one caveat to be aware of:.

When toggling between elements that have the same tag name, you must tell Vue that they are distinct elements by giving them unique key attributes.

Otherwise, Vue’s compiler will only replace the content of the element for efficiency.

  • Even when technically unnecessary though, it’s considered good practice to always key multiple items within a component.

In these cases, you can also use the key attribute to transition between different states of the same element.

Instead of using v-if and v-else, the above example could be rewritten as:. It’s actually possible to transition between any number of elements, either by using multiple v-ifs or binding a single element to a dynamic property.

List Entering/Leaving Transitions

Which could also be written as:. There’s still one problem though. Try clicking the button below:.

As it’s transitioning between the “on” button and the “off” button, both buttons are rendered - one transitioning out while the other transitions in.

This is the default behavior of - entering and leaving happens simultaneously.

Sometimes this works great, like when transitioning items are absolutely positioned on top of each other:. And then maybe also translated so that they look like slide transitions:. Simultaneous entering and leaving transitions aren’t always desirable though, so Vue offers some alternative transition modes:.

Transition Classes

in-out: New element transitions in first, then when complete, the current element transitions out. out-in: Current element transitions out first, then when complete, the new element transitions in.

Now let’s update the transition for our on/off buttons with out-in:. With one attribute addition, we’ve fixed that original transition without having to add any special styling. The in-out mode isn’t used as often, but can sometimes be useful for a slightly different transition effect.

Project Creation

Let’s try combining it with the slide-fade transition we worked on earlier:. Pretty cool, right? Transitioning between components is even simpler - we don’t even need the key attribute.

Instead, we wrap a dynamic component:. So far, we’ve managed transitions for:. Individual nodes.

Editor Support

Multiple nodes where only 1 is rendered at a time. So what about for when we have a whole list of items we want to render simultaneously, for example with v-for?

Using Transitions and Animations Together

In this case, we’ll use the component. Before we dive into an example though, there are a few things that are important to know about this component:.

Unlike , it renders an actual element: a by default. You can change the element that’s rendered with the tag attribute.

# Props

Transition modes are not available, because we are no longer alternating between mutually exclusive elements. Elements inside are always required to have a unique key attribute.

CSS transition classes will be applied to inner elements and not to the group/container itself.

# Events

Now let’s dive into an example, transitioning entering and leaving using the same CSS classes we’ve used previously:.

There’s one problem with this example.

When you add or remove an item, the ones around it instantly snap into their new place instead of smoothly transitioning.

# Writing code examples

We’ll fix that later. The component has another trick up its sleeve. It can not only animate entering and leaving, but also changes in position.

The only new concept you need to know to use this feature is the addition of the v-move class, which is added when items are changing positions.

Like the other classes, its prefix will match the value of a provided name attribute and you can also manually specify a class with the move-class attribute.

This class is mostly useful for specifying the transition timing and easing curve, as you’ll see below:. This might seem like magic, but under the hood, Vue is using an animation technique called FLIP to smoothly transition elements from their old position to their new position using transforms. We can combine this technique with our previous implementation to animate every possible change to our list!

One important note is that these FLIP transitions do not work with elements set to display: inline. As an alternative, you can use display: inline-block or place elements in a flex context.

These FLIP animations are also not limited to a single axis.

Items in a multidimensional grid can be transitioned too:.

# Importing examples

By communicating with JavaScript transitions through data attributes, it’s also possible to stagger transitions in a list:. Transitions can be reused through Vue’s component system.

To create a reusable transition, all you have to do is place a or component at the root, then pass any children into the transition component. Here’s an example using a template component:.

And functional components are especially well-suited to this task:. Yes, even transitions in Vue are data-driven!

The most basic example of a dynamic transition binds the name attribute to a dynamic property.