Vue

Posted on  by admin

You must first install Vue.js on Windows or on Windows Subsystem for Linux. Not sure which to use, generally we recommend beginners install on Windows to learn, but professionals install on WSL, see Should I install Node.js on Windows or Windows Subsystem for Linux.

Open your command line and create a new directory: mkdir HelloVue, then enter the directory: cd HelloVue. Install the Vue CLI: npm install -g @vue/cli.

vue-kinesis

Create your Vue app: vue create hello-vue-app. You'll need to choose whether to use Vue 2 or Vue 3 Preview, or manually select the features you want. Open the directory of your new hello-vue-app: cd hello-vue-app. Try running you new Vue app in your web browser: npm run serve. You should see "Welcome to your Vue.js App" on http://localhost:8080 in your browser.

You can press Ctrl+C to stop the vue-cli-service server. If using WSL (with Ubuntu or your favorite Linux distribution) for this tutorial, you'll need to make sure that you have the Remote - WSL Extension installed for the best experience running and editing your code with VS remote server.

Installation

Try updating the welcome message by opening your Vue app's source code in VS Code, enter: code . VS Code will launch and display your Vue application in the File Explorer.

Run your app in the terminal again with npm run serve and have your web browser open to the localhost so that you can see the Vue page welcome page displayed.

Find the App.vue file in VS Code.

Try changing "Welcome to your Vue.js App" to "Welcome to the Jungle!" You will see your Vue app "hot reload" as soon as you save your change.

Using Vue in Visual Studio Code: Find more about using Vue with VS Code, including the Vetur extension that provides Vue syntax highlighting, IntelliSense, debugging support, and more.

Usage

Microsoft Learn online course: Take your first steps with Vue.js.

  • Kinesis-container — A wrapper component to disable or enable interactions. And also, to attach the event that triggers the animation, both moving (mouse interaction) and scrolling are supported. However, the move event is not supported on mobile devices
  • Kinesis-element — A wrapper component for the elements to which you want to apply the animation, as well as for specifying the animation type or origins
  • Kinesis-audio — This component is used to specify the audio frequency to react to when an audio source is added to the kinesis container

Pulling off the code sample from its doc page:

We have the following output:

Also for the audio sample, we have:

If we run this sample, we should see the following output:

In this example, we defined a path to an audio file and attached it to the kinesis-container, and because the kinesis-audio component is triggered by this, we placed a squared div inside it so that whenever we click the button that toggles playing, our squared div reacts.

There are a lot more options that we can add to the vue-kinesis components, some of which can be found on their example page here.

And as previously stated, this library reacts to cursor changes, scroll events, or frequency from an audio file by adding a kinesis (undirected movement) animation to the elements wrapped within it. So, it is most useful for creating animations in these horizons. A notable example, however, would be a simple music application where some other elements react to the audio that’s currently playing.

vue-prix

vue-prix is another awesome vue animation library that can easily add parallax scrolling effects to images. In a parallax effect, both the foreground image and its background element are moving, but the background moves much more slowly, creating the illusion of depth.

Installation

We can install vue-prix with the command below:

And then initialize it in our entry file:

Alternatively, it is available as a universal module that can also be included via its CDN, as shown below:

Usage

To get started, simply add a new v-prlx attribute to image tags, and the parallax effect will be initiated immediately:

On mobile devices, the parallax effect is disabled by default. However, you can easily enable it by appending .mobile: to the v-prlx prop:

Also, by supplying an additional object, we can set the parallax speed, reverse its direction, and many more:

In web applications, parallax effects are typically added to featured (side) images, as shown in the screenshot at the beginning of this section. Nevertheless, the type of interaction you want to achieve in your project will heavily influence its application areas.

For further exploration and examples, you can check out their documentation here.

vue-fake3D-image

This is another lightweight Vue library that allows us to add simulated, interactive 3D effects to images in a Vue app. And, unlike some of the other animation libraries we’ve discussed, this one is SSR-compatible, which means it works with server-side rendering.

Installation

We can add this library to a Vue application with the command below:

To begin adding the 3D effect to our image files, we’ll need to import the Fake3dImageEffect component as well as the library CSS file:

Optionally, if you’d like to make it a global plugin that can be accessed from anywhere in your application, we can do so with the code below:

To see it in action, consider the following example, in which we’ve wrapped the Fake3dImageEffect component within some other text content:

And when we run this example, we get the following results:

As you may have noticed in this example, the fake3dimage component also supports some other props, such as the fill-height-content prop, which sets the element height to 100vh (full height), and the tag attribute, which allows us to select a preferred semantic element to wrap other children elements with.

You can also view their documentation here for a complete list of supported props.

v-wave

This library allows us to add beautiful ripple effects to markup elements when they are clicked by simply adding a new v-wave property, similar to how the ripple effect works in material design.

This library has an interesting feature in that it works well with statically positioned elements and can automatically guess the color of the wave based on the parent element. However, as deemed appropriate, you can also set a preferred color.

Installation

We can easily install v-wave with:

Or include its CDN:

And once the installation is completed, we can load it in a Vue 3 project like so:

For Vue 2, we also have:

Usage

To begin using this library, simply add the v-wave property to any element to which you want to add the ripple effect:

As a result, when we run this example, we get the following results:

We can further customize the ripple effects by changing its initial opacity, duration, easing, and many other parameters:

Which will give us:

Here’s also a link to the v-wave documentation for further information.

vue-animate-onscroll

This library includes directives for animating elements as they scroll into view. Unlike the previous libraries, however, this one does not directly provide helper classes or components that allow us to add animation to our application. It instead provides directives that allow us to call animations when a section of our application is scrolled into view.

Installation

We can simply install this library with the command below:

And, once the installation is completed, we are able to import it into our Vue entry file like this:

Usage

Once imported as a Vue plugin, we can animate an element on scroll by adding the v-animate-onscroll property to the element, along with our animation names:

However, as previously stated, we will still need to define a CSS animation name rotate before the animation will be triggered. A more relevant example is shown below:

And running this code, we have the following output:

It’s also worth mentioning that, by default, when an element is scrolled into view, its corresponding animation is only triggered once. However, we can use v-animate-onscroll.repeat instead of the latter, so that anytime the element is scrolled into view, the animation is triggered:

Furthermore, you can customize the scroll directions (up or down) you want to trigger the animations:

Creating a CSS animation from scratch might be time-consuming. For this reason, it is a common approach to use this library interchangeably with other animation libraries such as the popular Animate.css. The integration is straightforward; you’ll only need to install the preferred CSS library or include its CDN in your markup, and then you are able to replace your animation names with the ones in this library.

Conclusion

Each animation library is different and has a different approach to making things easier. There are also numerous animation libraries to choose from. However, in this article, we’ve had an overview of the essential features of the top ones, as well as how to implement them.

With this piece, hopefully you will be able to choose from the wide variety of animation libraries available and find one that perfectly complements your Vue.js application — whatever your needs may be.

Experience your Vue apps exactly how a user does

Debugging Vue.js applications can be difficult, especially when there are dozens, if not hundreds of mutations during a user session. If you’re interested in monitoring and tracking Vue mutations for all of your users in production, try LogRocket. https://logrocket.com/signup/

LogRocket is like a DVR for web and mobile apps, recording literally everything that happens in your Vue apps including network requests, JavaScript errors, performance problems, and much more. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred.

The LogRocket Vuex plugin logs Vuex mutations to the LogRocket console, giving you context around what led to an error, and what state the application was in when an issue occurred.

Modernize how you debug your Vue apps - Start monitoring for free.