Making cross browser compatible Vue.Js Apps and the challenges involved

Since the day world’s second browser was launched, Cross-platform support seems to be one of the major issues faced by designers and developers worldwide. Web developers were already tackling with issues such as faster development time, code reusability, accuracy, etc, and were building robust prepackaged frameworks to help in development. So it was no surprise that they added cross browser compatibility as a major feature of these frameworks. Out of those frameworks, one the most popular ones is Vue.JS and this post is all about cross browser compatibility in Vue.JS apps.

So, what exactly does it mean for an app to be cross-browser compatible ? Let’s understand it through an example –

Just imagine that you work in an office and they follow the BYOD (Bring Your Own Device) trend. ‘Bring Your Own Device’ means the employees need to carry their personal device to the workplace so that the applications used for work can be run on the employee’s own device thus, saving the company from the need to provide each employee with a device.
For this set up to work properly, the apps of the company must have been developed in such a way that they operate flawlessly across all the devices irrespective of the software/hardware environment of the device. That is without worrying about the operating system, configuration or the browser, the company should be able to command the employees to install the apps on their personal devices and the apps must work well.

This is where cross-platform mobile development support steps in. It is all about developing the apps in such a way that they run on different platforms flawlessly. A lot of technologies provide commendable support for easy development of such apps.

Vue.js is comparatively a new entrant in the market of web app development. Still, it has managed to steal a significant number of developers as fans giving other technologies a run for their money.

Also read – How to read Perform VueJS Visual Testing On Cloud

First of all, let me make it clear here that out-of-the-box Vue.js framework is pretty cross browser compatible. Nearly all basic components are supported by all major browsers that support JavaScript. However, and this is the major point here, no website is build using just out-of-the box Vue.js. In it’s a framework, and people use it to build apps faster. Nearly every project that I have worked on required tweaking some classes, adding functionality thourgh Vue.js plugins, integrating with other custom modules, integrating with third party modules, and most importantly a large amount of custom CSS and JS. This much mess is bound to create CSS clashes, incompatibility, JS errors and as expected, browser compatibility errors.

The challenges of making a cross browser compatible Vue.js app

A common problem faced by developers while working with Vue.js is that it doesn’t support IE8. The language only works on DOM elements in Internet Explorer 8. No way is present to polyfill it for JavaScript objects. This is one of the major issues faced by the developers while developing cross platform apps with Vue.js.
Making use of tools such as Capacitor and Electron, development of cross-platform apps using Vue.js has become exceptionally easy. Acting as a native bridge for cross-platform web apps and popularly known as a spiritual successor to Apache Cordova and Adobe PhoneGap, Capacitor allows you to build applications with contemporary web technologies and run it literally on any platform. You can now start with your free PhoneGap testing on the cloud.

Making use of Capacitor, Vue and some other tools, we will here look at the major steps involved in designing an innovative mobile application for Android. We won’t go into understanding the source code as of now. Let it be a story for another day.
The following are the steps involved –

• The first step is to install the Vue CLI V3 followed by generating a new Vue project. We also need to add Ionic 4 to our environment since we shall be using some Ionic 4 UI components to do a bit of styling for our mobile application.

• The next step is to add the Vue components. We will also add a navigation to our app using the Vue router here.

• In this step, capacitor is added. There are two ways to add it –

  1. You may create a new capacitor project from scratch.
  2. You may add capacitor to an existing front-end project.
• In the next step step, we integrate capacitor with Vue and use various capacitor plugins to gain access of native features of devices without having to write specific code for each platform.
• In the final step, we build the app for target platforms.

That was a quick overview of the steps involved in using Capacitor to build a cross-platform app with Vue.js. For the detailed source code, you may refer to this website and launch your own mini mobile application like a pro

Rather than using Capacitor, Electron can also be used for developing cross-platform apps with Vue,js. Combining the best of React’s component approach and Angular’s templates, Vue.js has the best of all worlds. Developing native apps using Vue.js using Weex or NativeScript is another popular topic of study for budding as well as experienced developers.
NativeScrip for Cross Platform Mobile and Web Apps Using NativeScript with Vue, using the nativescript-vue plugin provided by the NativeScript community has bridged the gap between virtual DOM and NativeScript components making the development of cross-platform apps with Vue.js literally a walk in the park. Here is a brief introduction of using Vue.js with NativeScript for further reference.

Vue.js being a JavaScript framework faces some common JavaScript problems. Some of the features of this modern framework are not supported in old browsers and lead to error messages.

Code Quality Leads To Browser Compatibility

Using Linters can help you here by providing better quality code, vulnerable to less error messages. Apart from that, resorting to browser developer tools can help you debug the code and add breakpoints. These breakpoints can be of immense help and help you layout the path for further action.

Pollyfills

Another way out, that can effectively help you secure a way out of cross browser problems is using polyfills. These provide the necessary functionality to the old browsers using which the browsers start supporting the features of modern frameworks like Vue.js. Feature detection is another important method to judge whether a feature will be supported by a browser or not. Using these two in collaboration can save you from a lot of cross browser trouble.

Adapting to coding practices making use of ready-made code libraries supporting cross browser compatibility can also help you develop nice applications.

It can safely be concluded that even though it is a new entrant as compared to Angular and React, Vue.js is one of the best technologies available today for cross platform development of apps. The number of problems faced is significantly low as compared to the prospects.

Shubham Saxena

Shubham Saxena was a Product Growth specialist at LambdaTest and was also a tech blogger.

See author's profile