One of the biggest advantages of JavaScript is that it can be run anywhere. For the backend, we can use Node.js, and we definitely can use JavaScript for the frontend (well, obviously). But how about the mobile? What are the choices? Usually, for development, you will want to use a framework that you know the best. And in case your knowledge is in Vue.js, you might be wondering if it is possible to build native apps with Vue. Good news: yes we can use Vue for native apps. Now, all we need to do is to find out how. At the same time, let’s review the best Vue.js mobile frameworks.
The big question: is it possible to build native apps with Vue.js?
Using Vue.js for hybrid apps is one thing, but can it be used for building native apps? Before answering this question let’s get it straight what are the native and hybrid mobile applications. In simple words, differences between native and hybrid apps are these:
- Native applications are the ones that were built for the specific platform. It means, if you are building a mobile application, it will be written for a specific platform (might be Android, iOS, or any other). Usually, it is a preferable type of application as it provides the best performance, it is better for users in terms of UX, has support from application stores.
- Talking about the hybrid app, it’s an application that is a mix of native application and web application. It works on different platforms, so if you’ve written an application for the web, it will work perfectly fine on mobile. Yet, it will not be customized for the mobile device specifically and it still will be a web application.
If you are interested in learning more about the differences between native and hybrid, I encourage you to read this article.
Now when we know the differences between those, let’s get back to the question. Great news and the answer to this question is that yes, Vue.js does support native applications. You can make a native app with Vue pretty easily, however, hybrid applications are also possible to build with Vue. keep reading to find out what are the Vue.js frameworks that can help to develop a mobile app. Spoiler alert: there are many of them.
Best Vue.js mobile frameworks
There are different frameworks for the development of mobile applications. Some of them provide you all the tooling and needed possibilities for developing mobile applications, while some of them are just UI libraries that help you make a good-looking mobile application with Vue. Let’s get started from the Vue frameworks that let building native apps, Here are the most popular Vue.js mobile frameworks for the development of native applications:
NativeScript
NativeScript is a great choice not only for building a native mobile application with Vue.js but also with other JavaScript frameworks like Angular. The framework, that was created in 2014 by Progress is a perfect fit for developing cross-platform applications. Creators of the framework have a goal to have over 90% of the common code for both, iOS and Android operating systems. For the moment, NativeScript has 18.5k stars on GitHub and is used by more than 12.2k repositories.
What are the main advantages of the framework:
- A mature framework that might be used not only with Vue but with other frontend frameworks or just a vanilla JavaScript.
- A huge advantage that you can access and use every native element from JavaScript (APIs also)
- As the NativeScript is independent of Vue, in case you will want to rewrite your application that was written with Vue.js, for example, with Angular, it will be possible to do so. Although it will take some time to rewrite the Vue.js specific part, as the core of your app will be around the NativeScript, it will not hurt that much.
So if you are confident you want to try NativeScript, a convenient way would be by using the nativescript-vue plugin.
Vue-Native
Vue-native is another great option when choosing a framework for building mobile apps with Vue. The secret with this, that it compiles to React Native, and it looks very familiar to React Native. And as currently, React Native is doing great and is one of the most loved frameworks for native mobile development. If you have experience building native apps with React, you will probably have no difficulties figuring this framework out. The framework has over 7.2k GitHub stars.
And if we are heading to the advantages, we should also include React Native benefits, as the Vue-Native is only a wrapper around React Native:
- The framework is a wrapper around React Native – a mature and popular framework for developing mobile applications. What does that mean? A combo of two great ecosystems – Vue and React.
- This one is true about Vue in general, but the framework focuses on the view layer
- Highly adaptive and lightweight solution
Vux
Another tool that might be used for Vue mobile development, is Vux. It provides mobile UI components based on Vue and WeUI. Probably the name is not very familiar to you. Contrary to NativeScript or Vue-native, Vux is not being talked about that much. The main reason for this is that its documentation is mostly in Chinese, so unless you know the language or have a friend who can help you, it will take you some time to master this. But as the code is not in Chinese, figuring out the documentation might not be the mission impossible. And it might even be worth it – Vux is being used pretty actively and it has over 17k stars on GitHub. English documentation is under the way, so let’s hope soon we will be able to refer to the English documentation.
Vum
Vum is UI framework for building mobile applications. According to the developers, Vum takes the style for different framework components, from frameworks such as Framework7, WeUI, MSUi, Light7, Ratchet, and vue-strap. If you are searching for a UI mobile framework for Vue, it’s another option that you might want to consider. The documentation is in English and looks poorly translated also has some spelling mistakes, but overall, it’s pretty understandable. It has over 1.6k stars on GitHub.
Cordova
Cordova is a framework, created by Apache. This framework lets you build hybrid applications both for iOS and Android platforms. However, Cordova is not a Vue.js specific framework, rather it is a platform for building hybrid mobile applications. For this purpose web technologies such as HTML, CSS, and JavaScript could be used. So that works as a container for running different web applications. It lets you access mobile device functionality such as camera or GPS, which is not possible normally, without using a platform such as Cordova. Cordova lets you achieve this with the help of different plugins. Even though it is possible to use it on its own, frameworks such as Quasar or Framework7 had incorporated Cordova into their ecosystem.
Quasar
Quasar is a powerful Vue.js framework that allows you not only to build hybrid mobile applications but a lot more. It helps you to ship Electron apps, responsive websites, mobile apps that use the same codebase. The framework uses Cordova for Android and iOS hybrid applications, so it’s a much richer solution that Cordova. Applications for a lot of different platforms could be created with this. Quasar has more than 14.6k GitHub stars.
Some of the reasons why Quasar is a great option for building your next mobile app with Vue:
- Extensive and rich documentation, helping to create a codebase for different platforms.
- Provides a great performance.
- The framework is a perfect choice for building different types of applications: SPA (single page application), SSR (server-side rendered application), PWA (progressive web application), browser extensions, mobile applications, Electron multi-platform desktop applications.
- Uses material design for building the UI.
Onsen UI
Onsen UI is a framework for building hybrid Vue.js applications. In fact, not only Vue might be used – it supports React, Angular, and Vue. The framework provides a range of UI elements that will help you develop a clean and simple app. Different design guidelines can be used for creating a good looking application on Android or iOS platforms. The framework has over 8k stars on GitHub.
Framework7
Framework7 is another powerful framework that might fulfill the needs of building mobile apps with Vue. It has a plethora of needed UI components that help to create web or progressive web applications. As the ecosystem of Framework7 is huge, it also has Vue.js components and works pretty well with Vue. However, keep in mind that the framework will not provide native mobile applications. Instead of it, PWA (progressive web applications) can be built with it. So, if your needs are to build native apps specifically, this might not be the best option. Currently, more than 15k of developers stared Framework7 on GitHub.
What are the advantages of using Vue.js for building mobile applications?
- The biggest reason you should use Vue.js for developing mobile applications is that you won’t need to learn another language and framework. Of course, this might become a disadvantage in some cases: if you are trying to improve as a developer, learning what other choices are there and how do they work, will help you to grow. However, if everything you want is to build an app as fast as possible without too much of a headache, Vue.js will do the work.
- If the previous point doesn’t describe you, and you are just getting started with Vue, then it is a really great choice to use Vue.js for native apps. The reason for this is that you will be building expertise in JavaScript, and at the same time have an opportunity to build anything with it: web apps, mobile apps, even desktop apps.
- Vue.js is a lightweight and fast solution. At the same time, it is progressive and is not some kind of a chunky and heavy framework that is suited for enterprises. Anyway, if you are familiar with Vue.js then it is a great choice for building your next mobile app. Especially when the installation of the Vue.js native frameworks is so simple.
Should I really start developing a mobile application with Vue.js?
That’s completely up to you. You should consider your reasons. You might have a specific need, for example, you are doing client work and your client asked to make his website that is suitable for mobile. However, if you are considering building a mobile app with Vue as your personal project, or you are trying to guess the future and thinking of learning a handy skill of native mobile application development so that you could earn living from this, I really encourage you doing so.
According to the statistics, mobile users will keep going in pretty rapid pace (Source: Statista)
From the current trend and speed of growth, we can speculate that the hybrid mobile applications will thrive in the future (of course, and nowadays this niche is doing well).
Final words
Now when we had reviewed the best Vue.js frameworks for mobile, it’s your choice to use whatever framework you like. As there is Vue.js used for all of them, the learning curve would not be that steep (if you are fluent in Vue.js). And finally, don’t forget that these are just tools, no matter which one you will choose, if you have a specific goal, most of them can be used for doing the job. But of course, some frameworks are more specialized in solving specific cases, than others.