Vue App

Posted on  by admin

Building mobile applications with JavaScript is not a new thing and has been around for quite some time now. The advantages over native solutions, built with Swift or Android is that you could apply what you know about building web apps, and leverage some of the thousands of packages on npm.


On this page, we will go through the different ways one can build a mobile app with Vue, and the pros and cons behind each.

These are applications that are written in JavaScript by using a predefined set of custom UI components. During build time, the code then gets transformed to native for each required platform. The benefit of using such applications is that you can use your existing JavaScript knowledge to build truly native apps that can look and feel native.

Objective: To setup a local Vue development environment, create a starter app, and understand the basics of how it works.

# Compile to Native

Components made in Native code can also be integrated with such apps. Builds to Native platform code. Direct access to all native APIs. Allows usage of already existing platform UI components. Apps can look and feel truly native.

Cannot use HTML, only provided XML-like components by framework. Cannot use CSS to style components. Need to use different components for each platform. Weex was the first native solution for Vue.js. The framework was written by developers of top Chinese companies and fully supports Vue components. It promises a "build once, ship everywhere" methodology, opposed to other similar solutions. It has a CLI tool, official UI theme and a set of plugins. Weex has a deep integration with Vue, thus the support parity between the two is very good. It is developed and used mostly in China, so it may be a con for someone.

Not enough learning material in English, besides official docs. NativeScript-Vue is a NativeScript plugin which allows you to use Vue.js to craft your mobile application. NativeScript-Vue is one of the most popular solutions for native mobile apps with Vue. It offers excellent developer experience for building truly native mobile apps. Similar to ReactNative, as with other similar frameworks, you develop using a set of pre-built Vue components, using the existing Vue and JS knowledge.

Knowledge of Native API's is required. With a vast growing popularity and community, the wide adoption of NativeScript across companies, first class support for Vue by official NativeScript team, it is a very good choice. Active, growing English speaking community.

# Hybrid Apps

First-class support by NativeScript. Very actively developed. Vue-Devtools support. Cross-platform without maintaining two code bases. Routing is done manually, no Vue-Router support. Styling is done via a constrained set of CSS rules. Lots of examples for Angular, might need to adapt. Vue Native is a mobile framework made for building native mobile apps using Vue.js.

# Mobile UI libraries

It acts as a wrapper around React Native APIs, which allows you to use Vue.js to compose rich mobile User Interfaces. For APIs that React Native does not support, you have to write "bridges" in the platform's native code or install external plugins.

  1. Being younger than NativeScript-Vue, it has a smaller community and adoption, but is nonetheless growing as well.
  2. Progressive Web Apps are basically mobile friendly SPA's, that can be installed as native apps on your mobile device, from within the browser.
  3. They give you the freedom to choose how you build the app, using the already known web technologies, without the need to wrap it with PhoneGap or similar. Such apps still run inside a hidden browser window, so they are limited to what the browser's APIs offer.
  4. Nonetheless, these apps are receiving a wide adoption and are a very good choice for cases where the website and mobile application should function the same. Below is a list of popular tools to generate a PWA quickly:.
  5. Vue CLI - official CLI plugin to transform SPA's to PWA. Nuxt PWA - Nuxt module that adds PWA support to Nuxt apps. Vuepress - Plugin to enable offline support. Quasar - Out of the box PWA generator via CLI.
  6. Gridsome - Generates out of the box PWA ready app. Hybrid apps are built by reusing well established tools for making websites like HTML, CSS and JavaScript with a minimal extra learning curve. These web based projects can then be compiled to native mobile apps with build tools such as (Cordova)[] or it's more recent successor (Capacitor)[].
  7. The build tool wraps the web app in a native shell and provides access to native device functionality via unified JavaScript APIs. This allows developers to write one code base that can then run natively across platforms.

Uses plain HTML, CSS and JavaScript. Build once, run everywhere. Can be fully custom styled with CSS.

Wide range of Established UI libraries. Cheaper to create than Native. Generally slower than Native apps. Access to lower level device APIs is dependent on wrapper (Cordova or Capacitor). Platform inconsistencies. These are UI frameworks that offer native mobile looking components, build for the web with Vue and CSS. These components try to mimic the look and functionality of their native counterparts as close as possible. Most UI frameworks allow you to use the same component and swap out it's styling during the bundling phase, giving it a native look for the current mobile platform.

Some frameworks focus more towards one platform, so careful consideration must be taken, if true native look is required for each platform.

# Summary (TLDR)

Quasar is a very active and fast growing Vue UI framework, one of the first targeting desktop and mobile in particular. It offers a large and ever extending set of pre-built components, some mimic mobile elements, and a bunch of other useful general use case ones.

  • Quasar comes with a CLI for easy application bootstrapping, managing, and bundling your mobile app for each platform.
  • Integrates many tools into a full featured framework including support for PWAs, i18n, Vuex, Vue Router, code splitting, option of Cordova or Capacitor for native builds and more. One of the most popular mobile UI frameworks in the world, Ionic was originally built for Angular, but with their latest release they now support Vue 3, thanks to their move to web components.
  • Ionic has a vast community, but as most tutorials are for the previous versions, using Angular, Vue users might have to adopt the examples, but the concepts are the same.
  • New material targeting Ionic Vue is starting to emerge gradually now that it has finished beta. As with other frameworks, it provides a set of components that change look depending on the OS they are built for and a CLI tool for starting projects and easily integrating Capacitor for native builds. Framework 7 is an already established, mobile focused UI framework, offering native like looking themes for both IOS and Android. It was originally built with IOS in mind, with Material Design added later. They officially support Vue on top of their components. Along with mobile apps using Cordova, you can easily develop Web Apps (SPA) with PWA support via their CLI.
  • This section could use a little bit of love. If you're able to, please consider helping the Vue Community by contributing a PR. You'll find a link to edit this page at the bottom. This article requires the Vue.js template, which is available starting in Visual Studio 2017 version 15.8. You must have Visual Studio installed and the Node.js development workload. If you haven't already installed Visual Studio 2019, go to the Visual Studio downloads page to install it for free. If you haven't already installed Visual Studio 2017, go to the Visual Studio downloads page to install it for free. If you need to install the workload but already have Visual Studio, go to Tools > Get Tools and Features.., which opens the Visual Studio Installer.

You can use a global installation of Node.js or you can specify the path to a local interpreter in each of your Node.js projects. If you don't have the Node.js runtime already installed, install the LTS version from the Node.js website.

# Progressive Web Applications

For more information, see the prerequisites. Open Visual Studio. Create a new project. Press Esc to close the start window. Type Ctrl + Q to open the search box, type Basic Vue.js, then choose Basic Vue.js Web application (either JavaScript or TypeScript). In the dialog box that appears, type the name basic-vuejs, and then choose Create.

From the top menu bar, choose File > New > Project. In the left pane of the New Project dialog box, expand JavaScript or TypeScript, then choose Node.js. In the middle pane, choose Basic Vue.js Web application, type the name basic-vuejs, and then choose OK. If you don't see the Basic Vue.js Web application project template, you must add the Node.js development workload. For detailed instructions, see the Prerequisites. Visual Studio creates the new project.

The new project opens in Solution Explorer (right pane). Check the Output window (lower pane) for progress on installing the npm packages required for the application. In Solution Explorer, open the npm node and make sure that all the listed npm packages are installed.

If any packages are missing (exclamation point icon), you can right-click the npm node and choose Install Missing npm Packages.

# Vue-Native

Take a look at Solution Explorer in the right pane. Highlighted in bold is your project, using the name you gave in the New Project dialog box. On disk, this project is represented by a .njsproj file in your project folder. At the top level is a solution, which by default has the same name as your project.

A solution, represented by a .sln file on disk, is a container for one or more related projects. The npm node shows any installed npm packages. You can right-click the npm node to search for and install npm packages using a dialog box.

If you want to install npm packages or run Node.js commands from a command prompt, right-click the project node and choose Open Command Prompt Here. In Solution Explorer, right-click any folder such as the src/components folder, and then choose Add > New Item.

Select either JavaScript Vue Single File Component or TypeScript Vue Single File Component, and then click Add. Visual Studio adds the new file to the project. Next, choose Build > Build Solution to build the project. Check the Output window to see build results, and choose Build from the Show output from list. (TypeScript project only) From Visual Studio, choose Build > Clean Solution.

Next, choose Build > Build Solution to build the project. Check the Output window to see build results, and choose Build from the Show output from list. Press Ctrl+F5 (or Debug > Start Without Debugging) to run the application. In the console, you see a message Starting Development Server.

Then, the app opens in a browser. If you don't see the running app, refresh the page.

Close the web browser.

Note: If you select a CSS pre-processor when creating the project via the CLI, you can add a lang attribute to the